From 09f05ac8a0eb5b655e31f21e45c83e6e7ef8b57d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 17 May 2024 17:25:25 +0200 Subject: [PATCH 01/14] feat(p/all): add description view --- src/app.tsx | 20 ++++++----- .../board-buttons/board-buttons.tsx | 11 ++++--- src/components/catalog-row/catalog-row.tsx | 9 +++-- .../post/post-desktop/post-desktop.tsx | 8 ++++- src/lib/utils/view-utils.ts | 2 +- src/views/board/board.tsx | 6 ++-- src/views/catalog/catalog.tsx | 33 ++++++++++++++----- 7 files changed, 60 insertions(+), 29 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 40638493..89b51355 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -70,17 +70,8 @@ const App = () => { }> } /> } /> - } /> - } /> - } /> - } /> - } /> } /> - } /> - } /> - } /> - } /> } /> } /> @@ -89,6 +80,17 @@ const App = () => { } /> } /> + } /> + } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> } /> diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 2a4418e6..6571fd2f 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -56,11 +56,14 @@ const BottomButton = () => { export const MobileBoardButtons = () => { const params = useParams(); const location = useLocation(); - const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); - const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; - const isInPostView = isPostPageView(location.pathname, params); + const isInAllView = isAllView(location.pathname); const isInCatalogView = isCatalogView(location.pathname); const isInPendingPostPage = isPendingPostView(location.pathname, params); + const isInPostView = isPostPageView(location.pathname, params); + const isInSubscriptionsView = isSubscriptionsView(location.pathname); + + const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); + const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; return (
@@ -77,7 +80,7 @@ export const MobileBoardButtons = () => { ) : ( <> - + )} diff --git a/src/components/catalog-row/catalog-row.tsx b/src/components/catalog-row/catalog-row.tsx index fa9d8eb7..db5cc4ca 100644 --- a/src/components/catalog-row/catalog-row.tsx +++ b/src/components/catalog-row/catalog-row.tsx @@ -1,8 +1,9 @@ import { useEffect, useState } from 'react'; -import { Link } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Comment } from '@plebbit/plebbit-react-hooks'; import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils'; +import { isAllView } from '../../lib/utils/view-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import styles from './catalog-row.module.css'; @@ -60,7 +61,11 @@ const CatalogPost = ({ openMenu, post, toggleMenu }: CatalogPostProps) => { } const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties; - const postLink = `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`; + + const location = useLocation(); + const isInAllView = isAllView(location.pathname); + + const postLink = isInAllView && isDescription ? `/p/all/description` : `/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${cid}`}`; const linkCount = useCountLinksInReplies(post); diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 66364455..6207e2a9 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -114,7 +114,13 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { )} {!isInPostView && !isReply && ( - [{_.capitalize(t('reply'))}] + [ + + {_.capitalize(t('reply'))} + + ] )} diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 855f5dad..cb209a3d 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -14,7 +14,7 @@ export const isCatalogView = (pathname: string): boolean => { export const isDescriptionView = (pathname: string, params: ParamsType): boolean => { const decodedPathname = decodeURIComponent(pathname); - return params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false; + return pathname === '/p/all/description' ? true : params.subplebbitAddress ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/description`) : false; }; export const isHomeView = (pathname: string): boolean => { diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 409c928d..792c9cff 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -78,15 +78,15 @@ const Board = () => { const setLastVirtuosoState = () => { virtuosoRef.current?.getState((snapshot: StateSnapshot) => { if (snapshot?.ranges?.length) { - lastVirtuosoStates[subplebbitAddress + sortType] = snapshot; + lastVirtuosoStates[location.pathname] = snapshot; } }); }; window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [subplebbitAddress, sortType]); + }, [location.pathname]); - const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + sortType]; + const lastVirtuosoState = lastVirtuosoStates?.[location.pathname]; useEffect(() => { document.title = title ? title : shortAddress; diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index ad44a5ff..dc735a48 100644 --- a/src/views/catalog/catalog.tsx +++ b/src/views/catalog/catalog.tsx @@ -6,6 +6,7 @@ import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import useFeedStateString from '../../hooks/use-feed-state-string'; +import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; import useWindowWidth from '../../hooks/use-window-width'; import CatalogRow from '../../components/catalog-row'; import LoadingEllipsis from '../../components/loading-ellipsis'; @@ -20,23 +21,27 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp const { address, createdAt, description, rules, shortAddress, suggested, title } = subplebbit || {}; const { avatarUrl } = suggested || {}; + const location = useLocation(); + const isInAllView = isAllView(location.pathname); + const multisub = useMultisubMetadata(); + const feedWithDescriptionAndRules = useMemo(() => { if (!isFeedLoaded) { return []; // prevent rules and description from appearing while feed is loading } - if (!description && !rules) { + if (!description && !rules && !isInAllView) { return feed; } const _feed = [...feed]; - if (description && description.length > 0) { + if ((description && description.length > 0) || isInAllView) { _feed.unshift({ isDescription: true, subplebbitAddress: address, timestamp: createdAt, author: { displayName: '## Board Mods' }, - content: description, + content: isInAllView ? multisub?.description : description, link: avatarUrl, - title: t('welcome_to_board', { board: title || `p/${shortAddress}` }), + title: t('welcome_to_board', { board: isInAllView ? multisub?.title : title || `p/${shortAddress}` }), pinned: true, locked: true, }); @@ -54,7 +59,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp }); } return _feed; - }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t]); + }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t, isInAllView, multisub]); // Memoize rows calculation, ensuring it updates on changes to the modified feed or column count const rows = useMemo(() => { @@ -102,7 +107,17 @@ const Catalog = () => { const subplebbit = useSubplebbit({ subplebbitAddress }); const { shortAddress, state, title } = subplebbit || {}; const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); - const loadingString =
{state === 'failed' ? state : }
; + const loadingString = ( +
+ {state === 'failed' ? ( + state + ) : isInSubscriptionsView && subscriptions?.length === 0 ? ( + `You haven't subscribed to any board yet.` + ) : ( + + )} +
+ ); const Footer = () => { let footerContent; @@ -126,14 +141,14 @@ const Catalog = () => { const setLastVirtuosoState = () => virtuosoRef.current?.getState((snapshot: StateSnapshot) => { if (snapshot?.ranges?.length) { - lastVirtuosoStates[subplebbitAddress + 'catalog'] = snapshot; + lastVirtuosoStates[location.pathname] = snapshot; } }); window.addEventListener('scroll', setLastVirtuosoState); return () => window.removeEventListener('scroll', setLastVirtuosoState); - }, [subplebbitAddress]); + }, [location.pathname]); - const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + 'catalog']; + const lastVirtuosoState = lastVirtuosoStates?.[location.pathname]; useEffect(() => { let documentTitle = title ? title : shortAddress; From f189b8ca12df2d773cd4c69b63cdbaa91ed80d05 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 17 May 2024 21:27:06 +0200 Subject: [PATCH 02/14] fix catalog button link --- src/components/board-buttons/board-buttons.tsx | 18 ++++++++++++------ src/components/board-nav/board-nav.tsx | 2 -- .../post/post-mobile/post-mobile.tsx | 6 +++++- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 6571fd2f..6daec02e 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -1,5 +1,5 @@ import { useTranslation } from 'react-i18next'; -import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; +import { Link, useLocation, useParams } from 'react-router-dom'; import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks'; import styles from './board-buttons.module.css'; import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; @@ -16,12 +16,18 @@ const OptionsButton = () => { return ; }; -const CatalogButton = ({ address, isInAllView, isInCatalogView, isInSubscriptionsView }: BoardButtonsProps) => { +const CatalogButton = ({ address, isInAllView, isInCatalogView }: BoardButtonsProps) => { const { t } = useTranslation(); - const navigate = useNavigate(); - const link = isInAllView ? `/p/all/catalog` : isInSubscriptionsView ? `/p/subscriptions/catalog` : isInCatalogView ? `/p/${address}` : `/p/${address}/catalog`; - return ; + return ( + + ); }; const SubscribeButton = ({ address }: BoardButtonsProps) => { @@ -70,7 +76,7 @@ export const MobileBoardButtons = () => { {isInPostView || isInPendingPostPage ? (
- +
diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 52b6f687..5d30ccbb 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -8,7 +8,6 @@ import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddre const BoardNavDesktop = () => { const { t } = useTranslation(); const location = useLocation(); - const params = useParams(); const isInCatalogView = isCatalogView(location.pathname); const subplebbits = useDefaultSubplebbits(); @@ -47,7 +46,6 @@ const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress); const location = useLocation(); - const params = useParams(); const isInAllView = isAllView(location.pathname); const isInCatalogView = isCatalogView(location.pathname); const isInSubscriptionsView = isSubscriptionsView(location.pathname); diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx index 891abfff..90a80228 100644 --- a/src/components/post/post-mobile/post-mobile.tsx +++ b/src/components/post/post-mobile/post-mobile.tsx @@ -164,6 +164,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) const params = useParams(); const location = useLocation(); + const isInAllView = isAllView(location.pathname); const isInPendingPostView = isPendingPostView(location.pathname, params); const isInPostView = isPostPageView(location.pathname, params); @@ -188,7 +189,10 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps) {replyCount > 0 && `${replyCount} Replies`} {linksCount > 0 && ` / ${linksCount} Links`} - + {t('view_thread')}
From a096f664c8ebd94e8ad3fc9d526a78a75c718e5d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 23 May 2024 18:03:13 +0200 Subject: [PATCH 03/14] fix regex --- src/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app.tsx b/src/app.tsx index 89b51355..caa6d672 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -22,7 +22,7 @@ const BoardLayout = () => { const isValidAccountCommentIndex = !accountCommentIndex || (!isNaN(parseInt(accountCommentIndex)) && parseInt(accountCommentIndex) >= 0); const isValidCommentCid = !commentCid || /^Qm[a-zA-Z0-9]{44}$/.test(commentCid); - const isValidSubplebbitAddress = !subplebbitAddress || subplebbitAddress.includes('.') || /^12D3K[a-zA-Z0-9]{44}$/.test(subplebbitAddress); + const isValidSubplebbitAddress = !subplebbitAddress || subplebbitAddress.includes('.') || /^12D3KooW[a-zA-Z0-9]{44}$/.test(subplebbitAddress); if (!isValidAccountCommentIndex || !isValidCommentCid || !isValidSubplebbitAddress) { return ; From 9df89301227fe98785099bff924262897dbe33fe Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 26 May 2024 16:29:41 +0200 Subject: [PATCH 04/14] style(post desktop): p/link should come before the c/cid in multisub feeds --- src/components/post/post-desktop/post-desktop.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 6207e2a9..379073aa 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -82,6 +82,12 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { {isDescription || isRules ? '' : ' '} + {subplebbitAddress && (isInAllView || isInSubscriptionsView) && ( + + {' '} + p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}{' '} + + )} {!(isDescription || isRules) && ( !cid && e.preventDefault()}> @@ -96,12 +102,6 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { )} )} - {subplebbitAddress && (isInAllView || isInSubscriptionsView) && ( - - {' '} - p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)} - - )} {pinned && ( From 654bb3960f8e8124f773321b69d4f06c058fe6b8 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 26 May 2024 16:33:21 +0200 Subject: [PATCH 05/14] style(multiboards): p/link is redundant in replies info --- src/components/post/post-desktop/post-desktop.tsx | 2 +- src/components/post/post-mobile/post-mobile.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 379073aa..4e1db8a1 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -82,7 +82,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { {isDescription || isRules ? '' : ' '} - {subplebbitAddress && (isInAllView || isInSubscriptionsView) && ( + {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && ( {' '} p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)}{' '} diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx index 90a80228..c762e9ae 100644 --- a/src/components/post/post-mobile/post-mobile.tsx +++ b/src/components/post/post-mobile/post-mobile.tsx @@ -72,7 +72,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { )} - {subplebbitAddress && (isInAllView || isInSubscriptionsView) && ( + {subplebbitAddress && (isInAllView || isInSubscriptionsView) && !isReply && (
{' '} p/{subplebbitAddress && Plebbit.getShortAddress(subplebbitAddress)} From 3524803196e49dc12e578c5d8c0b059f8fbba634 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Sun, 26 May 2024 16:51:59 +0200 Subject: [PATCH 06/14] feat(post): don't show link if it's not a valid url --- src/components/post/post-desktop/post-desktop.tsx | 5 +++-- src/components/post/post-mobile/post-mobile.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 4e1db8a1..d23a0b06 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -6,6 +6,7 @@ import { useAccount } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils'; import { getFormattedDate } from '../../../lib/utils/time-utils'; +import { isValidURL } from '../../../lib/utils/url-utils'; import { isAllView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../../lib/utils/view-utils'; import useCountLinksInReplies from '../../../hooks/use-count-links-in-replies'; import useReplies from '../../../hooks/use-replies'; @@ -259,7 +260,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps) )} - {link && } + {link && isValidURL(link) && } {!content &&
} {content && } @@ -291,7 +292,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
{'>>'}
- {reply.link && } + {reply.link && isValidURL(reply.link) && } {reply.content && }
diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx index c762e9ae..3ad4c4ed 100644 --- a/src/components/post/post-mobile/post-mobile.tsx +++ b/src/components/post/post-mobile/post-mobile.tsx @@ -209,7 +209,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
- {content && } + {reply.content && }
From 7537066202553f519dc917f7e05f20674a6ca025 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 27 May 2024 10:33:11 +0200 Subject: [PATCH 07/14] Update interface-settings.module.css --- .../interface-settings/interface-settings.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/settings-modal/interface-settings/interface-settings.module.css b/src/components/settings-modal/interface-settings/interface-settings.module.css index 039665b9..650868a8 100644 --- a/src/components/settings-modal/interface-settings/interface-settings.module.css +++ b/src/components/settings-modal/interface-settings/interface-settings.module.css @@ -3,6 +3,7 @@ } .setting { + text-transform: capitalize; margin-left: 10px; margin-top: 10px; } From 08cb0736daee6dabbc9f5e3ec0e6165ed008c04b Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 27 May 2024 12:28:18 +0200 Subject: [PATCH 08/14] feat(post): add post menu component with links to other clients --- .../post/post-desktop/post-desktop.tsx | 33 +------ src/components/post/post-menu/index.ts | 1 + .../post/post-menu/post-menu.module.css | 86 +++++++++++++++++++ src/components/post/post-menu/post-menu.tsx | 72 ++++++++++++++++ src/components/post/post.module.css | 49 ----------- src/themes.css | 74 ++++++++++++---- src/views/post-page/post-page.module.css | 3 + 7 files changed, 223 insertions(+), 95 deletions(-) create mode 100644 src/components/post/post-menu/index.ts create mode 100644 src/components/post/post-menu/post-menu.module.css create mode 100644 src/components/post/post-menu/post-menu.tsx diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index d23a0b06..0e1f3eb8 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useLocation, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom'; @@ -17,6 +17,7 @@ import LoadingEllipsis from '../../loading-ellipsis'; import Markdown from '../../markdown'; import { PostProps } from '../post'; import styles from '../post.module.css'; +import PostMenu from '../post-menu'; import _ from 'lodash'; const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { @@ -41,30 +42,6 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { const account = useAccount(); const accountShortAddress = account?.author?.shortAddress; - const [menuBtnRotated, setMenuBtnRotated] = useState(false); - const menuRef = useRef(null); - - const handleMenuButtonClick = () => { - setMenuBtnRotated((prev) => !prev); - }; - - const handleClickOutside = (event: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(event.target as Node)) { - setMenuBtnRotated(false); - } - }; - - useEffect(() => { - if (menuBtnRotated) { - document.addEventListener('mousedown', handleClickOutside); - } else { - document.removeEventListener('mousedown', handleClickOutside); - } - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [menuBtnRotated]); - return (
@@ -125,11 +102,7 @@ const PostInfo = ({ openReplyModal, post, roles }: PostProps) => { )} - - - ▶ - - +
); }; diff --git a/src/components/post/post-menu/index.ts b/src/components/post/post-menu/index.ts new file mode 100644 index 00000000..7c04c4cc --- /dev/null +++ b/src/components/post/post-menu/index.ts @@ -0,0 +1 @@ +export { default } from './post-menu'; diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-menu/post-menu.module.css new file mode 100644 index 00000000..79dd778e --- /dev/null +++ b/src/components/post/post-menu/post-menu.module.css @@ -0,0 +1,86 @@ +.postMenu { + position: absolute; + background-color: var(--post-menu-background-color); + border-bottom: 2px solid var(--post-menu-border-color); + border-right: 1px solid var(--post-menu-border-color); + outline: none; +} + +.postMenuBtnWrapper { + position: relative; + display: inline-block; + padding-left: 15px; +} + +.postMenuBtn { + color: var(--post-menu-button-color); + transition: transform 0.1s; + transform: rotate(90deg); + position: absolute; + bottom: -4px; +} + +.postMenuBtn:hover { + cursor: pointer; + color: var(--post-menu-button-color-hover); +} + +.postMenuItem { + cursor: pointer; + padding: 2px 4px; + border: 1px solid var(--post-menu-item-border-color); + background-color: var(--post-menu-item-background-color); + border-bottom: none; +} + +.postMenuItem:hover { + background-color: var(--post-menu-item-hover-background-color); +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdownMenu { + position: absolute; + left: 100%; + top: -1px; + display: none; + border-bottom: 2px solid var(--post-menu-border-color); + border-right: 1px solid var(--post-menu-border-color); +} + +.dropdown a { + text-decoration: none; + color: inherit; +} + +.dropdown:hover .dropdownMenu { + display: block; +} + +@media (max-width: 640px) { + .postMenuBtn { + width: 1em; + text-align: center; + font-weight: 700; + font-size: 16px; + } + + .postMenuBtnWrapper { + position: relative; + padding-right: 12px; + } +} + +@media (min-width: 640px) { + .postMenuBtn { + right: -2px; + opacity: var(--post-menu-btn-opacity); + } + + .stickyIconWrapper { + padding-right: 18px; + } +} diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx new file mode 100644 index 00000000..d9f00ba7 --- /dev/null +++ b/src/components/post/post-menu/post-menu.tsx @@ -0,0 +1,72 @@ +import { useState } from 'react'; +import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; +import { Comment } from '@plebbit/plebbit-react-hooks'; +import styles from './post-menu.module.css'; + +const PostMenu = ({ post }: Comment) => { + const { cid, isDescription, isRules, link, subplebbitAddress } = post; + const [menuBtnRotated, setMenuBtnRotated] = useState(false); + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); + + const { refs, floatingStyles, context } = useFloating({ + placement: 'bottom-start', + open: menuBtnRotated, + onOpenChange: setMenuBtnRotated, + middleware: [offset({ mainAxis: 10, crossAxis: 5 }), flip({ fallbackAxisSideDirection: 'end' }), shift({ padding: 10 })], + whileElementsMounted: autoUpdate, + }); + + const click = useClick(context); + const dismiss = useDismiss(context); + const role = useRole(context); + + const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]); + + const headingId = useId(); + + const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; + + return ( + <> + + setMenuBtnRotated((prev) => !prev)} + style={{ transform: menuBtnRotated ? 'rotate(90deg)' : 'rotate(0deg)' }} + > + ▶ + + + {menuBtnRotated && ( + +
+
setIsClientRedirectMenuOpen(true)} + onMouseLeave={() => setIsClientRedirectMenuOpen(false)} + > + View on » + {isClientRedirectMenuOpen && ( + + )} +
+
+ + )} + + ); +}; + +export default PostMenu; diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 902debc5..8cfe0d3b 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -131,37 +131,6 @@ color: var(--button-desktop-text-color-hover); } -.postMenuBtnWrapper { - position: relative; - display: inline-block; - padding-left: 5px; -} - -.replyDesktop .postMenuBtnWrapper { - padding-right: 12px; -} - -.replyDesktop .stickyIconWrapper { - padding-right: 18px; -} - -.postDesktop .postMenuBtn, .replyDesktop .postMenuBtn { - color: var(--post-menu-button-color); - transition: transform 0.1s; - position: absolute; - opacity: var(--post-menu-btn-opacity); - bottom: -4px; -} - -.replyDesktop .postMenuBtn { - right: -2px; -} - -.postDesktop .postMenuBtn:hover, .replyDesktop .postMenuBtn:hover { - cursor: pointer; - color: var(--post-menu-button-color-hover); -} - .postDesktop .spacer { width: 100%; padding: 5px; @@ -260,20 +229,6 @@ clear: left; } -.postMobile .postMenuBtn { - color: var(--post-mobile-menu-button-color); - line-height: 1em; - width: 1em; - text-align: center; - transition: transform 0.1s; - transform: rotate(90deg); - -webkit-transform: rotate(90deg); - float: left; - font-weight: 700; - font-size: 16px; - height: 100%; -} - .postMobile .nameBlock { clear: none; } @@ -408,10 +363,6 @@ color: var(--post-mobile-info-text-color); } -.replyMobile .postInfo .postMenuBtn { - width: 1em; -} - .replyMobile .nameBlock { display: inline; float: left; diff --git a/src/themes.css b/src/themes.css index 88f4de91..e08c2e23 100644 --- a/src/themes.css +++ b/src/themes.css @@ -103,6 +103,29 @@ --post-greentext-color: #789922; --post-replies-expand-button-background-image: url("/public/assets/buttons/plus-red.png"); + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + --post-form-field-title-background-color: #ea8; + --post-form-field-title-color: #800; + --post-form-field-border: 1px solid #800; + --post-form-field-title-font-weight: 700; + --post-form-field-title-padding: 0 5px; + --post-form-field-title-font-size: 10pt; + --post-form-field-input-border: 1px solid #aaa; + --post-form-field-font-family: arial, helvetica, sans-serif; + --post-form-field-input-appearance: none; + --post-form-field-input-outline: none; + --post-form-field-input-focus-border: 1px solid #ea8; + --post-form-field-input-color: #000; + + /* post menu */ + --post-menu-border-color: #d9bfb7; + --post-menu-background-color: #f0e0d6; + --post-menu-item-border-color: #d9bfb7; + --post-menu-item-background-color: #f0e0d6; + --post-menu-item-hover-background-color: #ffe; + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; @@ -120,22 +143,6 @@ --post-mobile-file-info-text-color: #707070; --post-mobile-content-font-size: 11pt; - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; - --post-form-field-title-background-color: #ea8; - --post-form-field-title-color: #800; - --post-form-field-border: 1px solid #800; - --post-form-field-title-font-weight: 700; - --post-form-field-title-padding: 0 5px; - --post-form-field-title-font-size: 10pt; - --post-form-field-input-border: 1px solid #aaa; - --post-form-field-font-family: arial, helvetica, sans-serif; - --post-form-field-input-appearance: none; - --post-form-field-input-outline: none; - --post-form-field-input-focus-border: 1px solid #ea8; - --post-form-field-input-color: #000; - /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -288,6 +295,13 @@ --post-form-field-input-focus-border: 1px solid #98e; --post-form-field-input-color: #000; + /* post menu */ + --post-menu-border-color: #b7c5d9; + --post-menu-background-color: #d6daf0; + --post-menu-item-border-color: #b7c5d9; + --post-menu-item-background-color: #d6daf0; + --post-menu-item-hover-background-color: #eef2ff; + /* post mobile */ --post-mobile-background-color: #d6daf0; --post-mobile-info-border-bottom: 1px solid #b7c5d9; @@ -427,6 +441,13 @@ --post-form-field-title-font-size: 16px; --post-form-field-input-color: #000; + /* post menu */ + --post-menu-border-color: #d9bfb7; + --post-menu-background-color: #f0e0d6; + --post-menu-item-border-color: #d9bfb7; + --post-menu-item-background-color: #f0e0d6; + --post-menu-item-hover-background-color: #ffe; + /* post mobile */ --post-mobile-background-color: #f5e9e1; --post-mobile-info-border-bottom: 1px solid #d9bfb7; @@ -576,6 +597,13 @@ --post-form-field-title-font-size: 16px; --post-form-field-input-color: #000; + /* post menu */ + --post-menu-border-color: #b7c5d9; + --post-menu-background-color: #d6daf0; + --post-menu-item-border-color: #b7c5d9; + --post-menu-item-background-color: #d6daf0; + --post-menu-item-hover-background-color: #eef2ff; + /* post mobile */ --post-mobile-background-color: #d6daf0; --post-mobile-info-border-bottom: 1px solid #b7c5d9; @@ -733,6 +761,13 @@ --post-form-field-input-appearance: none; --post-form-field-input-outline: none; + /* post menu */ + --post-menu-border-color: #000; + --post-menu-background-color: #282a2e; + --post-menu-item-border-color: #000; + --post-menu-item-background-color: #282a2e; + --post-menu-item-hover-background-color: #1d1f21; + /* post mobile */ --post-mobile-background-color: #282A2E; --post-mobile-info-border-top: 1px solid #2D2F33; @@ -908,6 +943,13 @@ --post-form-field-input-focus-border: 1px solid #ea8; --post-form-field-input-color: #000; + /* post menu */ + --post-menu-border-color: #ccc; + --post-menu-background-color: #ddd; + --post-menu-item-border-color: #ccc; + --post-menu-item-background-color: #ddd; + --post-menu-item-hover-background-color: #eee; + /* quotelink */ --post-quotelink-text-color: #f60; --post-quotelink-text-color-hover: #f30; diff --git a/src/views/post-page/post-page.module.css b/src/views/post-page/post-page.module.css index e69de29b..b4afdfd6 100644 --- a/src/views/post-page/post-page.module.css +++ b/src/views/post-page/post-page.module.css @@ -0,0 +1,3 @@ +.content { + margin-bottom: 150px; +} \ No newline at end of file From 677407cd52f5f25be24b56c20d500dda9692df81 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 27 May 2024 12:37:53 +0200 Subject: [PATCH 09/14] feat(post menu): add reverse image search --- .../post/post-menu/post-menu.module.css | 1 - src/components/post/post-menu/post-menu.tsx | 34 +++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-menu/post-menu.module.css index 79dd778e..62fb7876 100644 --- a/src/components/post/post-menu/post-menu.module.css +++ b/src/components/post/post-menu/post-menu.module.css @@ -39,7 +39,6 @@ .dropdown { position: relative; - display: inline-block; } .dropdownMenu { diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx index d9f00ba7..cfadba48 100644 --- a/src/components/post/post-menu/post-menu.tsx +++ b/src/components/post/post-menu/post-menu.tsx @@ -2,11 +2,14 @@ import { useState } from 'react'; import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react'; import { Comment } from '@plebbit/plebbit-react-hooks'; import styles from './post-menu.module.css'; +import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; +import { isValidURL } from '../../../lib/utils/url-utils'; const PostMenu = ({ post }: Comment) => { const { cid, isDescription, isRules, link, subplebbitAddress } = post; const [menuBtnRotated, setMenuBtnRotated] = useState(false); const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); + const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false); const { refs, floatingStyles, context } = useFloating({ placement: 'bottom-start', @@ -26,6 +29,9 @@ const PostMenu = ({ post }: Comment) => { const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; + const commentMediaInfo = getCommentMediaInfo(post); + const { thumbnail, type, url } = commentMediaInfo || {}; + return ( <> @@ -41,6 +47,34 @@ const PostMenu = ({ post }: Comment) => { {menuBtnRotated && (
+ {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && ( +
setIsImageSearchMenuOpen(true)} + onMouseLeave={() => setIsImageSearchMenuOpen(false)} + > + Image search » + {isImageSearchMenuOpen && ( + + )} +
+ )}
setIsClientRedirectMenuOpen(true)} From 219c05b6d190d03bedeeb34093e75187f904093e Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 27 May 2024 17:21:21 +0200 Subject: [PATCH 10/14] style(post menu): add themes styling --- .../post/post-menu/post-menu.module.css | 8 ++++---- src/themes.css | 18 ++++++++++++------ src/views/board/board.tsx | 2 +- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-menu/post-menu.module.css index 62fb7876..d3da5d9b 100644 --- a/src/components/post/post-menu/post-menu.module.css +++ b/src/components/post/post-menu/post-menu.module.css @@ -1,8 +1,8 @@ .postMenu { position: absolute; background-color: var(--post-menu-background-color); - border-bottom: 2px solid var(--post-menu-border-color); - border-right: 1px solid var(--post-menu-border-color); + border-bottom: var(--post-menu-border-bottom); + border-right: var(--post-menu-border-right); outline: none; } @@ -46,8 +46,8 @@ left: 100%; top: -1px; display: none; - border-bottom: 2px solid var(--post-menu-border-color); - border-right: 1px solid var(--post-menu-border-color); + border-bottom: var(--post-menu-border-bottom); + border-right: var(--post-menu-border-right); } .dropdown a { diff --git a/src/themes.css b/src/themes.css index e08c2e23..f0890723 100644 --- a/src/themes.css +++ b/src/themes.css @@ -120,7 +120,8 @@ --post-form-field-input-color: #000; /* post menu */ - --post-menu-border-color: #d9bfb7; + --post-menu-border-bottom: 2px solid #d9bfb7; + --post-menu-border-right: 1px solid #d9bfb7; --post-menu-background-color: #f0e0d6; --post-menu-item-border-color: #d9bfb7; --post-menu-item-background-color: #f0e0d6; @@ -296,7 +297,8 @@ --post-form-field-input-color: #000; /* post menu */ - --post-menu-border-color: #b7c5d9; + --post-menu-border-bottom: 2px solid #b7c5d9; + --post-menu-border-right: 1px solid #b7c5d9; --post-menu-background-color: #d6daf0; --post-menu-item-border-color: #b7c5d9; --post-menu-item-background-color: #d6daf0; @@ -442,7 +444,8 @@ --post-form-field-input-color: #000; /* post menu */ - --post-menu-border-color: #d9bfb7; + --post-menu-border-bottom: 1px solid #d9bfb7; + --post-menu-border-right: unset; --post-menu-background-color: #f0e0d6; --post-menu-item-border-color: #d9bfb7; --post-menu-item-background-color: #f0e0d6; @@ -598,7 +601,8 @@ --post-form-field-input-color: #000; /* post menu */ - --post-menu-border-color: #b7c5d9; + --post-menu-border-bottom: 1px solid #b7c5d9; + --post-menu-border-right: unset; --post-menu-background-color: #d6daf0; --post-menu-item-border-color: #b7c5d9; --post-menu-item-background-color: #d6daf0; @@ -762,7 +766,8 @@ --post-form-field-input-outline: none; /* post menu */ - --post-menu-border-color: #000; + --post-menu-border-bottom: 1px solid #000; + --post-menu-border-right: unset; --post-menu-background-color: #282a2e; --post-menu-item-border-color: #000; --post-menu-item-background-color: #282a2e; @@ -944,7 +949,8 @@ --post-form-field-input-color: #000; /* post menu */ - --post-menu-border-color: #ccc; + --post-menu-border-bottom: 1px solid #ccc; + --post-menu-border-right: unset; --post-menu-background-color: #ddd; --post-menu-item-border-color: #ccc; --post-menu-item-background-color: #ddd; diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index 792c9cff..123831e6 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -54,7 +54,7 @@ const Board = () => { {state === 'failed' ? ( state ) : isInSubscriptionsView && subscriptions?.length === 0 ? ( - `You haven't subscribed to any board yet.` + `You have not subscribed to any board yet.` ) : ( )} From caacd77bbabc26aada1845c68791144797105e86 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 27 May 2024 18:42:31 +0200 Subject: [PATCH 11/14] feat(post menu): add copy link button (share link) --- src/components/post/post-menu/post-menu.tsx | 143 +++++++++++--------- src/lib/utils/url-utils.ts | 2 +- 2 files changed, 83 insertions(+), 62 deletions(-) diff --git a/src/components/post/post-menu/post-menu.tsx b/src/components/post/post-menu/post-menu.tsx index cfadba48..241ff171 100644 --- a/src/components/post/post-menu/post-menu.tsx +++ b/src/components/post/post-menu/post-menu.tsx @@ -3,13 +3,86 @@ import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDis import { Comment } from '@plebbit/plebbit-react-hooks'; import styles from './post-menu.module.css'; import { getCommentMediaInfo } from '../../../lib/utils/media-utils'; -import { isValidURL } from '../../../lib/utils/url-utils'; +import { copyShareLinkToClipboard, isValidURL } from '../../../lib/utils/url-utils'; -const PostMenu = ({ post }: Comment) => { - const { cid, isDescription, isRules, link, subplebbitAddress } = post; - const [menuBtnRotated, setMenuBtnRotated] = useState(false); - const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); +interface PostMenuProps { + cid: string; + isDescription?: boolean; + isRules?: boolean; + subplebbitAddress: string; + onClose: () => void; +} + +const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuProps) => { + return ( +
{ + copyShareLinkToClipboard(subplebbitAddress, cid); + onClose(); + }} + > +
Copy link
+
+ ); +}; + +const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => { const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false); + return ( +
setIsImageSearchMenuOpen(true)} + onMouseLeave={() => setIsImageSearchMenuOpen(false)} + onClick={onClose} + > + Image search » + {isImageSearchMenuOpen && ( + + )} +
+ ); +}; + +const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuProps) => { + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); + const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; + return ( +
setIsClientRedirectMenuOpen(true)} + onMouseLeave={() => setIsClientRedirectMenuOpen(false)} + onClick={onClose} + > + View on » + {isClientRedirectMenuOpen && ( + + )} +
+ ); +}; + +const PostMenu = ({ post }: { post: Comment }) => { + const { cid, isDescription, isRules, link, subplebbitAddress } = post; + const commentMediaInfo = getCommentMediaInfo(post); + const { thumbnail, type, url } = commentMediaInfo || {}; + const [menuBtnRotated, setMenuBtnRotated] = useState(false); const { refs, floatingStyles, context } = useFloating({ placement: 'bottom-start', @@ -18,19 +91,13 @@ const PostMenu = ({ post }: Comment) => { middleware: [offset({ mainAxis: 10, crossAxis: 5 }), flip({ fallbackAxisSideDirection: 'end' }), shift({ padding: 10 })], whileElementsMounted: autoUpdate, }); - const click = useClick(context); const dismiss = useDismiss(context); const role = useRole(context); - const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]); - const headingId = useId(); - const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`; - - const commentMediaInfo = getCommentMediaInfo(post); - const { thumbnail, type, url } = commentMediaInfo || {}; + const handleClose = () => setMenuBtnRotated(false); return ( <> @@ -47,55 +114,9 @@ const PostMenu = ({ post }: Comment) => { {menuBtnRotated && (
- {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && ( -
setIsImageSearchMenuOpen(true)} - onMouseLeave={() => setIsImageSearchMenuOpen(false)} - > - Image search » - {isImageSearchMenuOpen && ( - - )} -
- )} -
setIsClientRedirectMenuOpen(true)} - onMouseLeave={() => setIsClientRedirectMenuOpen(false)} - > - View on » - {isClientRedirectMenuOpen && ( - - )} -
+ {cid && subplebbitAddress && } + {link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && } +
)} diff --git a/src/lib/utils/url-utils.ts b/src/lib/utils/url-utils.ts index aacfae92..b6cd62f8 100644 --- a/src/lib/utils/url-utils.ts +++ b/src/lib/utils/url-utils.ts @@ -16,7 +16,7 @@ export const isValidURL = (url: string) => { }; export const copyShareLinkToClipboard = (subplebbitAddress: string, cid: string) => { - const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}`; + const shareLink = `https://pleb.bz/p/${subplebbitAddress}/c/${cid}?redirect=plebchan.eth.limo`; if (navigator.clipboard) { navigator.clipboard.writeText(shareLink); From e990cbe851e7d3c981d844efe0d8bd9364f358a2 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Mon, 27 May 2024 19:17:52 +0200 Subject: [PATCH 12/14] adjust z-indexes --- src/components/board-nav/board-nav.module.css | 2 +- src/components/challenge-modal/challenge-modal.module.css | 2 +- src/components/post/post-menu/post-menu.module.css | 1 + src/components/reply-modal/reply-modal.module.css | 2 +- src/components/settings-modal/settings-modal.module.css | 4 ++-- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/board-nav/board-nav.module.css b/src/components/board-nav/board-nav.module.css index 149e7bfa..d510e086 100644 --- a/src/components/board-nav/board-nav.module.css +++ b/src/components/board-nav/board-nav.module.css @@ -26,7 +26,7 @@ font-size: var(--boardnav-mobile-font-size); position: fixed; width: 100%; - z-index: 6; + z-index: 3; animation-name: stickyMenuAnimation; animation-duration: 1s; animation-timing-function: linear; diff --git a/src/components/challenge-modal/challenge-modal.module.css b/src/components/challenge-modal/challenge-modal.module.css index e4e1af72..f60b7368 100644 --- a/src/components/challenge-modal/challenge-modal.module.css +++ b/src/components/challenge-modal/challenge-modal.module.css @@ -7,7 +7,7 @@ font-size: 10pt; border-left: none; border-top: none; - z-index: 1000; + z-index: 999; background-color: var(--challenge-modal-background-color); border: var(--challenge-modal-border); } diff --git a/src/components/post/post-menu/post-menu.module.css b/src/components/post/post-menu/post-menu.module.css index d3da5d9b..a97282c7 100644 --- a/src/components/post/post-menu/post-menu.module.css +++ b/src/components/post/post-menu/post-menu.module.css @@ -4,6 +4,7 @@ border-bottom: var(--post-menu-border-bottom); border-right: var(--post-menu-border-right); outline: none; + z-index: 2; } .postMenuBtnWrapper { diff --git a/src/components/reply-modal/reply-modal.module.css b/src/components/reply-modal/reply-modal.module.css index 15385f2d..0bbc9fba 100644 --- a/src/components/reply-modal/reply-modal.module.css +++ b/src/components/reply-modal/reply-modal.module.css @@ -7,7 +7,7 @@ font-size: 10pt; border-left: none; border-top: none; - z-index: 1000; + z-index: 3; background-color: var(--challenge-modal-background-color); border: var(--challenge-modal-border); } diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css index d8dbe0b8..e13e646f 100644 --- a/src/components/settings-modal/settings-modal.module.css +++ b/src/components/settings-modal/settings-modal.module.css @@ -5,7 +5,7 @@ width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.25); - z-index: 900; + z-index: 4; } .settingsModal label, .settingsModal button, .settingsModal select { @@ -31,7 +31,7 @@ overflow-y: auto; margin-left: -178px; position: fixed; - z-index: 1000; + z-index: 5; padding: 2px; font-size: 14px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); From fdf5803890d2f000b29d83c86ad522eb3ca3a6af Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Tue, 28 May 2024 13:30:52 +0200 Subject: [PATCH 13/14] style(settings modal): adjust font size per theme --- src/components/settings-modal/settings-modal.module.css | 2 +- src/themes.css | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/settings-modal/settings-modal.module.css b/src/components/settings-modal/settings-modal.module.css index e13e646f..73652072 100644 --- a/src/components/settings-modal/settings-modal.module.css +++ b/src/components/settings-modal/settings-modal.module.css @@ -33,7 +33,7 @@ position: fixed; z-index: 5; padding: 2px; - font-size: 14px; + font-size: var(--settings-modal-font-size); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); background-color: var(--settings-modal-background-color); border-top: var(--settings-modal-border-top); diff --git a/src/themes.css b/src/themes.css index f0890723..693243e0 100644 --- a/src/themes.css +++ b/src/themes.css @@ -160,6 +160,7 @@ --reply-modal-field-input-border-focus: 1px solid #ea8; /* settings modal */ + --settings-modal-font-size: 14px; --settings-modal-background-color: #f0e0d6; --settings-modal-header-border-bottom: 1px solid #d9bfb7; --settings-modal-border-top: none; @@ -336,6 +337,7 @@ --reply-modal-field-input-border-focus: 1px solid #98e; /* settings modal */ + --settings-modal-font-size: 14px; --settings-modal-background-color: #d6daf0; --settings-modal-border-top: none; --settings-modal-border-right: 1px solid #b7c5d9; @@ -814,6 +816,7 @@ --select-color: #c5c8c6; /* settings modal */ + --settings-modal-font-size: 14px; --settings-modal-background-color: #282a2e; --settings-modal-border-top: 1px solid #111; --settings-modal-border-right: 1px solid #111; @@ -972,6 +975,7 @@ --reply-modal-field-input-border-focus: 1px solid #ea8; /* settings modal */ + --settings-modal-font-size: 14px; --settings-modal-background-color: #ddd; --settings-modal-border-top: 1px solid #ccc; --settings-modal-border-right: 1px solid #ccc; From 2859baf9c2963c75a2f5b180e20dcc8b93f24df2 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Tue, 28 May 2024 16:11:25 +0200 Subject: [PATCH 14/14] style(comment media): fix subplebbit avatar size --- .../comment-media/comment-media.module.css | 14 +++++++++++--- src/components/comment-media/comment-media.tsx | 9 +++------ 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css index d9298d7f..bc16045b 100644 --- a/src/components/comment-media/comment-media.module.css +++ b/src/components/comment-media/comment-media.module.css @@ -5,9 +5,17 @@ max-width: 250px; max-height: 250px; margin: 3px 20px 5px 0; - display: flex; + display: inline-flex; justify-content: center; align-items: center; + overflow: hidden; +} + +.subplebbitAvatar { + max-width: 250px; + max-height: 250px; + margin: 3px 20px 5px 0; + display: inline-block; } .thumbnailSmall { @@ -17,9 +25,10 @@ max-width: 125px; max-height: 125px; margin: 3px 10px 5px 5px; - display: flex; + display: inline-flex; justify-content: center; align-items: center; + overflow: hidden; } .thumbnailSmall span, .thumbnailSmall a { @@ -43,7 +52,6 @@ } .content img, .content video, .content iframe, .content audio { - box-sizing: border-box; max-width: 100%; max-height: 100%; } diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index 55ec8e76..b147b1df 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -57,11 +57,6 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid displayHeight = '100%'; } - if (isOutOfFeed) { - displayWidth = 'unset'; - displayHeight = 'unset'; - } - let thumbnailComponent: React.ReactNode = null; const iframeThumbnail = patternThumbnailUrl || thumbnail; const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined); @@ -86,7 +81,9 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid const linkWithoutThumbnail = url && new URL(url); - return isMobile || isReply ? ( + return isOutOfFeed ? ( + {thumbnailComponent} + ) : isMobile || isReply ? ( {thumbnailComponent} {isMobile &&