External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix bugs

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-01 18:13:41 +02:00
parent 911ec8f65f
commit ee69ab60ed
6 changed files with 86 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.module.css
+18 -4
View File
@@ -25,6 +25,24 @@
padding: 10px 0; padding: 10px 0;
} }
.desktopBoardButtons {
display: flex;
align-items: center;
justify-content: space-between; /* Ensure elements are spaced out properly */
}
.desktopBoardButtons::after {
content: "";
display: table;
clear: both;
}
.desktopBoardButtons .rightSideButtons {
margin-left: auto; /* Push the right-side buttons to the right */
display: flex;
align-items: center;
}
@media (max-width: 640px) { @media (max-width: 640px) {
.desktopBoardButtons { .desktopBoardButtons {
display: none; display: none;
@@ -35,8 +53,4 @@
.mobileBoardButtons { .mobileBoardButtons {
display: none; display: none;
} }
.rightSideButtons {
float: right;
}
} }
src/components/board-buttons/board-buttons.tsx
+43 -35
View File
@@ -68,11 +68,12 @@ const SortOptions = () => {
}; };
return ( return (
<> <>
Sort by:{' '} Sort by:&nbsp;
<select value={sortType} onChange={handleSortChange}> <select value={sortType} onChange={handleSortChange}>
<option value='active'>Bump order</option> <option value='active'>Bump order</option>
<option value='new'>Creation date</option> <option value='new'>Creation date</option>
</select>{' '} </select>
&nbsp;
</> </>
); );
}; };
@@ -134,45 +135,52 @@ export const DesktopBoardButtons = () => {
const isInSubscriptionsView = isSubscriptionsView(location.pathname); const isInSubscriptionsView = isSubscriptionsView(location.pathname);
return ( return (
<div className={styles.desktopBoardButtons}> <>
<hr /> <hr />
{isInPostView || isInPendingPostPage ? ( <div className={styles.desktopBoardButtons}>
<> {isInPostView || isInPendingPostPage ? (
[ <>
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} /> [
] [
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
] [
<OptionsButton />]{' '}
{isInPostView && (
<span className={styles.rightSideButtons}>
[<SubscribeButton address={subplebbitAddress} />]
</span>
)}
</>
) : (
<>
[
{isInCatalogView ? (
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} /> <ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
) : ( ] [
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} /> <CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />
)} ] [
] [ <OptionsButton />]
<OptionsButton /> {isInPostView && (
] [ <span className={styles.rightSideButtons}>
<RefreshButton />]{' '}
<span className={styles.rightSideButtons}>
{isInCatalogView && <SortOptions />}
{!(isInAllView || isInSubscriptionsView) && (
<>
[ [
<SubscribeButton address={subplebbitAddress} />] <SubscribeButton address={subplebbitAddress} />]
</span>
)}
</>
) : (
<>
{isInCatalogView ? (
<>
[
<ReturnButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]{' '}
</>
) : (
<>
[
<CatalogButton address={subplebbitAddress} isInAllView={isInAllView} isInSubscriptionsView={isInSubscriptionsView} />]{' '}
</> </>
)} )}
</span> [
</> <OptionsButton />] [
)} <RefreshButton />]
</div> <span className={styles.rightSideButtons}>
{isInCatalogView && <SortOptions />}
{!(isInAllView || isInSubscriptionsView) && (
<>
[
<SubscribeButton address={subplebbitAddress} />]
</>
)}
</span>
</>
)}
</div>
</>
); );
}; };
src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+19 -7
View File
@@ -7,12 +7,14 @@ import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-desktop.module.css'; import styles from './post-menu-desktop.module.css';
import { getCommentMediaInfo } from '../../../../lib/utils/media-utils'; import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils'; import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils';
import { isCatalogView, isPostPageView } from '../../../../lib/utils/view-utils'; import { isAllView, isCatalogView, isPostPageView, isSubscriptionsView } from '../../../../lib/utils/view-utils';
import _ from 'lodash'; import _ from 'lodash';
interface PostMenuDesktopProps { interface PostMenuDesktopProps {
cid: string; cid: string;
isDescription?: boolean; isDescription?: boolean;
isInAllView?: boolean;
isInSubscriptionsView?: boolean;
isRules?: boolean; isRules?: boolean;
subplebbitAddress: string; subplebbitAddress: string;
onClose: () => void; onClose: () => void;
@@ -67,10 +69,10 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
); );
}; };
const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => { const ViewOnButton = ({ cid, isDescription, isInAllView, isInSubscriptionsView, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; const viewOnOtherClientLink = `p/${isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
const { refs, floatingStyles } = useFloating({ const { refs, floatingStyles } = useFloating({
placement: 'right-start', placement: 'right-start',
@@ -85,13 +87,13 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
ref={refs.setReference} ref={refs.setReference}
onClick={onClose} onClick={onClose}
> >
{t('view_on')} » {_.capitalize(t('view_on'))} »
{isClientRedirectMenuOpen && ( {isClientRedirectMenuOpen && (
<div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}> <div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
<a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'> <a href={`https://seedit.eth.limo/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Seedit</div> <div className={styles.postMenuItem}>Seedit</div>
</a> </a>
<a href={`https://plebones.netlify.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'> <a href={`https://plebones.eth.limo/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Plebones</div> <div className={styles.postMenuItem}>Plebones</div>
</a> </a>
</div> </div>
@@ -111,8 +113,10 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const location = useLocation(); const location = useLocation();
const params = useParams(); const params = useParams();
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname); const isInCatalogView = isCatalogView(location.pathname);
const isInPostPageView = isPostPageView(location.pathname, params); const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname);
const { refs, floatingStyles, context } = useFloating({ const { refs, floatingStyles, context } = useFloating({
placement: 'bottom-start', placement: 'bottom-start',
@@ -158,7 +162,15 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
</div> </div>
)} )}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />} {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
<ViewOnButton cid={cid} isDescription={isDescription} isRules={isRules} subplebbitAddress={subplebbitAddress} onClose={handleClose} /> <ViewOnButton
cid={cid}
isDescription={isDescription}
isInAllView={isInAllView}
isInSubscriptionsView={isInSubscriptionsView}
isRules={isRules}
subplebbitAddress={subplebbitAddress}
onClose={handleClose}
/>
</div> </div>
</FloatingFocusManager>, </FloatingFocusManager>,
document.body, document.body,
src/components/post/post-mobile/post-menu-mobile/post-menu-mobile.tsx
+2 -2
View File
@@ -51,10 +51,10 @@ const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
return ( return (
<div onClick={onClose}> <div onClick={onClose}>
<a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'> <a href={`https://seedit.eth.limo/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>{t('view_on_client', { client: 'Seedit' })}</div> <div className={styles.postMenuItem}>{t('view_on_client', { client: 'Seedit' })}</div>
</a> </a>
<a href={`https://plebones.netlify.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'> <a href={`https://plebones.eth.limo/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>{t('view_on_client', { client: 'Plebones' })}</div> <div className={styles.postMenuItem}>{t('view_on_client', { client: 'Plebones' })}</div>
</a> </a>
</div> </div>
src/components/subplebbit-description/subplebbit-description.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const SubplebbitDescription = ({ avatarUrl, createdAt, description, shortAddress
isDescription: true, isDescription: true,
subplebbitAddress, subplebbitAddress,
timestamp: isInAllView ? multisubMetadata?.createdAt : createdAt, timestamp: isInAllView ? multisubMetadata?.createdAt : createdAt,
author: { displayName: `'## ${t('board_mods')}` }, author: { displayName: `## ${t('board_mods')}` },
content: isInAllView ? multisubMetadata?.description : description, content: isInAllView ? multisubMetadata?.description : description,
link: avatarUrl, link: avatarUrl,
title: t('welcome_to_board', { title: t('welcome_to_board', {
src/components/topbar/topbar.tsx
+2 -2
View File
@@ -56,8 +56,8 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const boardSelect = ( const boardSelect = (
<select value={selectValue} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}> <select value={selectValue} onChange={(e) => navigate(`/p/${e.target.value}${isInCatalogView ? '/catalog' : ''}`)}>
{!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>} {!currentSubplebbitIsInList && subplebbitAddress && <option value={subplebbitAddress}>{displaySubplebbitAddress}</option>}
<option value='all'>{t('all')}</option> <option value='all'>all</option>
<option value='subscriptions'>{t('subscriptions')}</option> <option value='subscriptions'>subscriptions</option>
{subplebbitAddresses.map((address: any, index: number) => { {subplebbitAddresses.map((address: any, index: number) => {
const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...'); const subplebbitAddress = address?.includes('.') ? address : address?.slice(0, 10).concat('...');
return ( return (