From f534b734a64fec2600199528b1a4ab8a084bcbfe Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 10:11:36 +0200 Subject: [PATCH 01/12] improve media embeds size on mobile --- src/components/styled/GlobalStyle.styled.jsx | 35 ++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/src/components/styled/GlobalStyle.styled.jsx b/src/components/styled/GlobalStyle.styled.jsx index dd49247c..c140bf8d 100644 --- a/src/components/styled/GlobalStyle.styled.jsx +++ b/src/components/styled/GlobalStyle.styled.jsx @@ -90,6 +90,41 @@ export const GlobalStyle = createGlobalStyle` max-width: 100% !important; max-height: 100% !important; } + + .instagram-embed { + width: 100vw !important; + height: 45vh !important; + } + + .streamable-embed, + .bitchute-embed, + .odysee-embed, + .youtube-embed, + .rumble-embed, + .twitch-embed { + width: 100vw !important; + height: 30vh !important; + } + + .spotify-embed { + width: 100vw !important; + height: 40vh !important; + } + + .tiktok-embed { + width: 100vw !important; + height: 70vh !important; + } + + .twitter-embed { + width: 100vw !important; + height: 65vh !important; + } + + .reddit-embed { + width: 100vw !important; + height: 55vh !important; + } } .post-menu-catalog { From 708294922d32187d9c25b9214ab09f34dccbefd0 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 12:19:16 +0200 Subject: [PATCH 02/12] Update SettingsModal.jsx --- src/components/modals/SettingsModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 2a97e032..5a4d3a10 100755 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -463,7 +463,7 @@ const SettingsModal = ({ isOpen, closeModal }) => { {setAnonymousMode(!anonymousMode); window.location.reload();}} + onChange={() => {setAnonymousMode(!anonymousMode)}} />  Anon Mode From 80437094986a879b66c0be0d8139deb00171a43f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 12:56:08 +0200 Subject: [PATCH 03/12] fix mod color thread view --- src/components/styled/views/Thread.styled.jsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/components/styled/views/Thread.styled.jsx b/src/components/styled/views/Thread.styled.jsx index c6810840..7b3e54af 100644 --- a/src/components/styled/views/Thread.styled.jsx +++ b/src/components/styled/views/Thread.styled.jsx @@ -2495,6 +2495,10 @@ export const BoardForm = styled.div` color: #117743; font-weight: 700; } + + .capcode { + color: purple !important; + } .subject-mobile { color: #cc1105; @@ -2612,6 +2616,10 @@ export const BoardForm = styled.div` color: #117743; font-weight: 700; } + + .capcode { + color: purple !important; + } .subject-mobile { color: #0f0c5d; @@ -2725,6 +2733,10 @@ export const BoardForm = styled.div` color: #117743; font-weight: 700; } + + .capcode { + color: purple !important; + } .subject-mobile { color: #cc1105; @@ -2841,6 +2853,10 @@ export const BoardForm = styled.div` color: #117743; font-weight: 700; } + + .capcode { + color: purple !important; + } .subject-mobile { color: #0f0c5d; @@ -2954,6 +2970,10 @@ export const BoardForm = styled.div` font-weight: 700; } + .capcode { + color: #81a2be !important; + } + .poster-address-mobile { color: #707070; } @@ -3075,6 +3095,10 @@ export const BoardForm = styled.div` color: #004a99; font-weight: 700; } + + .capcode { + color: #f60 !important; + } .subject-mobile { color: #111; From cc98926fa603bb7d95910aa9e1d8e0d1087f759a Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 13:41:24 +0200 Subject: [PATCH 04/12] add mobile post menu --- src/components/styled/views/Board.styled.jsx | 129 ++++++++ src/components/views/All.jsx | 214 +++++++++++++- src/components/views/Board.jsx | 293 ++++++++++++++++++- src/components/views/Subscriptions.jsx | 216 +++++++++++++- src/components/views/Thread.jsx | 215 +++++++++++++- 5 files changed, 1048 insertions(+), 19 deletions(-) diff --git a/src/components/styled/views/Board.styled.jsx b/src/components/styled/views/Board.styled.jsx index 1f586bf1..ae9f426b 100644 --- a/src/components/styled/views/Board.styled.jsx +++ b/src/components/styled/views/Board.styled.jsx @@ -4091,4 +4091,133 @@ export const PostMenu = styled.div` cursor: pointer; transition: transform 0.1s; transform: ${props => props.rotated ? 'rotate(90deg)' : 'none'}; +`; + +export const PostMenuMobile = styled.div` + font-size: 16px; + line-height: 2.5em; + width: 216px; + + + ul { + border-right-width: 2px !important; + list-style: none; + padding: 0; + margin: 0; + white-space: nowrap; + } + + li { + cursor: pointer; + position: relative; + padding: 2px 4px; + vertical-align: middle; + } + + ${({ selectedStyle }) => { + switch (selectedStyle) { + case 'Yotsuba': + return ` + ul { + border: 1px solid #d9bfb7; + } + + li { + background-color: #f0e0d6; + border-bottom: 1px solid #d9bfb7; + + :hover { + background-color: #ffe; + color: #d00; + } + } + `; + + case 'Yotsuba-B': + return ` + ul { + border: 1px solid #b7c5d9; + } + + li { + background-color: #d6daf0; + border-bottom: 1px solid #b7c5d9; + + :hover { + background-color: #eef2ff; + color: #d00; + } + } + `; + + case 'Futaba': + return ` + ul { + border: 1px solid #d9bfb7; + } + + li { + background-color: #f0e0d6; + border-bottom: 1px solid #d9bfb7; + + :hover { + background-color: #ffe; + color: #d00; + } + } + `; + + case 'Burichan': + return ` + ul { + border: 1px solid #b7c5d9; + } + + li { + background-color: #d6daf0; + border-bottom: 1px solid #b7c5d9; + + :hover { + background-color: #eef2ff; + color: #d00; + } + } + `; + + case 'Tomorrow': + return ` + ul { + border: 1px solid #282a2e; + } + + li { + background-color: #1d1f21; + border-bottom: 1px solid #282a2e; + + :hover { + background-color: #1b1c1e; + } + } + `; + + case 'Photon': + return ` + ul { + border: 1px solid #ccc; + } + + li { + background-color: #ddd; + border-bottom: 1px solid #ccc; + + :hover { + background-color: #eee; + } + } + `; + + default: + return ''; + }} + } `; \ No newline at end of file diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index d1d9ddd0..123cfd03 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso'; import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu, PostMenuMobile } from '../styled/views/Board.styled'; import { Footer } from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled'; @@ -85,8 +85,11 @@ const All = () => { const [, setNewSuccessMessage] = useSuccess(); const threadMenuRefs = useRef({}); + const threadMenuRefsMobile = useRef({}); const replyMenuRefs = useRef({}); + const replyMenuRefsMobile = useRef({}); const postMenuCatalogRef = useRef(null); + const postMenuMobileRef = useRef(null); const backlinkRefs = useRef({}); const quoteRefs = useRef({}); const postRefs = useRef({}); @@ -105,8 +108,10 @@ const All = () => { const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const [commentCid, setCommentCid] = useState(null); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); @@ -196,12 +201,22 @@ const All = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + const handleOutsideClick = useCallback((e) => { if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } }, [openMenuCid, postMenuCatalogRef]); + + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); useEffect(() => { @@ -217,6 +232,19 @@ const All = () => { }, [openMenuCid, handleOutsideClick]); + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + + useEffect(() => { if (postOnHoverRef.current) { const rect = postOnHoverRef.current.getBoundingClientRect(); @@ -1321,7 +1349,7 @@ const All = () => {
  • handleOptionClick(reply.cid)}> Yandex
    • @@ -1748,7 +1776,96 @@ const All = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === thread.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(thread.cid); + handleShareClick(selectedAddress, thread.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(thread)}>Edit post
      • +
    • handleAuthorDeleteClick(thread)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleMobileOptionClick(thread.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleMobileOptionClick(thread.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(commentMediaInfo && ( + commentMediaInfo.type === 'image' || + (commentMediaInfo.type === 'webpage' && + commentMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(thread.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {thread.author.displayName ? thread.author.displayName.length > 20 @@ -1985,7 +2102,96 @@ const All = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === reply.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(reply.cid); + handleShareClick(selectedAddress, reply.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(reply)}>Edit post
      • +
    • handleAuthorDeleteClick(reply)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(replyMediaInfo && ( + replyMediaInfo.type === 'image' || + (replyMediaInfo.type === 'webpage' && + replyMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(reply.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {reply.author.displayName ? reply.author.displayName.length > 20 diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 1e687ce6..f279d2d9 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -8,7 +8,7 @@ import { Virtuoso } from 'react-virtuoso'; import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm, PostMenu, PostMenuMobile } from '../styled/views/Board.styled'; import { Footer } from '../styled/views/Thread.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; @@ -105,8 +105,11 @@ const Board = () => { const commentRef = useRef(); const linkRef = useRef(); const threadMenuRefs = useRef({}); + const threadMenuRefsMobile = useRef({}); const replyMenuRefs = useRef({}); + const replyMenuRefsMobile = useRef({}); const postMenuCatalogRef = useRef(null); + const postMenuMobileRef = useRef(null); const backlinkRefs = useRef({}); const quoteRefs = useRef({}); const postRefs = useRef({}); @@ -136,7 +139,9 @@ const Board = () => { const [isModerator, setIsModerator] = useState(false); const [commentCid, setCommentCid] = useState(null); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); @@ -210,12 +215,22 @@ const Board = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + const handleOutsideClick = useCallback((e) => { if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } }, [openMenuCid, postMenuCatalogRef]); + + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); useEffect(() => { @@ -231,6 +246,19 @@ const Board = () => { }, [openMenuCid, handleOutsideClick]); + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + + useEffect(() => { if (postOnHoverRef.current) { const rect = postOnHoverRef.current.getBoundingClientRect(); @@ -1038,7 +1066,32 @@ const Board = () => {
    + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "rules" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick("rules"); + handleShareClick(selectedAddress, "rules") + }}>Share board
      • +
    +     , document.body + )} {
    - + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "rules" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick("rules"); + handleShareClick(selectedAddress, "rules") + }}>Share board
      • +
    +     , document.body + )} {
    - + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "description" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick("description"); + handleShareClick(selectedAddress, "description") + }}>Share board
      • +
    +     , document.body + )} {
  • handleOptionClick(reply.cid)}> Yandex
    • @@ -2439,7 +2542,96 @@ const Board = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === thread.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(thread.cid); + handleShareClick(selectedAddress, thread.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(thread)}>Edit post
      • +
    • handleAuthorDeleteClick(thread)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleMobileOptionClick(thread.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleMobileOptionClick(thread.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(commentMediaInfo && ( + commentMediaInfo.type === 'image' || + (commentMediaInfo.type === 'webpage' && + commentMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(thread.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {thread.author.displayName ? thread.author.displayName.length > 20 @@ -2677,7 +2869,96 @@ const Board = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === reply.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(reply.cid); + handleShareClick(selectedAddress, reply.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(reply)}>Edit post
      • +
    • handleAuthorDeleteClick(reply)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(replyMediaInfo && ( + replyMediaInfo.type === 'image' || + (replyMediaInfo.type === 'webpage' && + replyMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(reply.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {reply.author.displayName ? reply.author.displayName.length > 20 diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index b7bb60d1..85302afa 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -9,7 +9,7 @@ import { useAccount, useAccountComments, useFeed, usePublishCommentEdit, useSubp import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; -import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, TopBar, BoardForm, PostMenu, PostMenuMobile } from '../styled/views/Board.styled'; import { Footer } from '../styled/views/Thread.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; @@ -85,8 +85,11 @@ const Subscriptions = () => { const [, setNewSuccessMessage] = useSuccess(); const threadMenuRefs = useRef({}); + const threadMenuRefsMobile = useRef({}); const replyMenuRefs = useRef({}); + const replyMenuRefsMobile = useRef({}); const postMenuCatalogRef = useRef(null); + const postMenuMobileRef = useRef(null); const backlinkRefs = useRef({}); const quoteRefs = useRef({}); const postRefs = useRef({}); @@ -105,8 +108,10 @@ const Subscriptions = () => { const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const [commentCid, setCommentCid] = useState(null); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [triggerPublishCommentEdit, setTriggerPublishCommentEdit] = useState(false); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); @@ -196,12 +201,22 @@ const Subscriptions = () => { setOpenMenuCid(null); }; - + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + + const handleOutsideClick = useCallback((e) => { if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } }, [openMenuCid, postMenuCatalogRef]); + + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); useEffect(() => { @@ -217,6 +232,19 @@ const Subscriptions = () => { }, [openMenuCid, handleOutsideClick]); + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + + useEffect(() => { if (postOnHoverRef.current) { const rect = postOnHoverRef.current.getBoundingClientRect(); @@ -1329,7 +1357,7 @@ const Subscriptions = () => {
  • handleOptionClick(reply.cid)}> Yandex
    • @@ -1756,7 +1784,96 @@ const Subscriptions = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === thread.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(thread.cid); + handleShareClick(selectedAddress, thread.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(thread)}>Edit post
      • +
    • handleAuthorDeleteClick(thread)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleMobileOptionClick(thread.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(thread.cid) + setIsModerationOpen(true); + handleMobileOptionClick(thread.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(commentMediaInfo && ( + commentMediaInfo.type === 'image' || + (commentMediaInfo.type === 'webpage' && + commentMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(thread.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {thread.author.displayName ? thread.author.displayName.length > 20 @@ -1993,7 +2110,96 @@ const Subscriptions = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === reply.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(reply.cid); + handleShareClick(selectedAddress, reply.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(reply)}>Edit post
      • +
    • handleAuthorDeleteClick(reply)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(replyMediaInfo && ( + replyMediaInfo.type === 'image' || + (replyMediaInfo.type === 'webpage' && + replyMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(reply.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {reply.author.displayName ? reply.author.displayName.length > 20 diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index f79be8b0..1f489c4f 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -7,7 +7,7 @@ import { Tooltip } from 'react-tooltip'; import { useAccount, useAccountComments, useComment, usePublishComment, usePublishCommentEdit, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, PostForm, PostFormTable, PostMenu, PostMenuMobile } from '../styled/views/Board.styled'; import { ReplyFormLink, TopBar, BottomBar, BoardForm, Footer } from '../styled/views/Thread.styled'; import { AlertModal } from '../styled/modals/AlertModal.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; @@ -91,8 +91,11 @@ const Thread = () => { const commentRef = useRef(); const linkRef = useRef(); const threadMenuRefs = useRef({}); + const threadMenuRefsMobile = useRef({}); const replyMenuRefs = useRef({}); + const replyMenuRefsMobile = useRef({}); const postMenuRef = useRef(null); + const postMenuMobileRef = useRef(null); const postMenuCatalogRef = useRef(null); const backlinkRefs = useRef({}); const quoteRefs = useRef({}); @@ -114,7 +117,9 @@ const Thread = () => { const [isModerator, setIsModerator] = useState(false); const [commentCid, setCommentCid] = useState(null); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [outOfViewCid, setOutOfViewCid] = useState(null); const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0}); const [postOnHoverHeight, setPostOnHoverHeight] = useState(0); @@ -189,12 +194,22 @@ const Thread = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + const handleOutsideClick = useCallback((e) => { if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } }, [openMenuCid, postMenuRef, postMenuCatalogRef]); + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); + useEffect(() => { if (openMenuCid !== null) { document.addEventListener('click', handleOutsideClick); @@ -208,6 +223,20 @@ const Thread = () => { }, [openMenuCid, handleOutsideClick]); + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + + + useEffect(() => { if (postOnHoverRef.current) { const rect = postOnHoverRef.current.getBoundingClientRect(); @@ -1423,7 +1452,7 @@ const Thread = () => {
  • handleOptionClick(reply.cid)}> Yandex
    • @@ -1737,7 +1766,96 @@ const Thread = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === comment.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(comment.cid); + handleShareClick(selectedAddress, comment.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(comment)}>Edit post
      • +
    • handleAuthorDeleteClick(comment)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(comment.cid) + setIsModerationOpen(true); + handleMobileOptionClick(comment.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(comment.cid) + setIsModerationOpen(true); + handleMobileOptionClick(comment.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(commentMediaInfo && ( + commentMediaInfo.type === 'image' || + (commentMediaInfo.type === 'webpage' && + commentMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(comment.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(comment.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(comment.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {comment?.author?.displayName ? comment?.author?.displayName.length > 15 @@ -1940,7 +2058,96 @@ const Thread = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === reply.cid ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
      +
    • { + handleMobileOptionClick(reply.cid); + handleShareClick(selectedAddress, reply.cid) + }}>Share thread
      • + {({ authorAddress }) => ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + <> +
    • handleAuthorEditClick(reply)}>Edit post
      • +
    • handleAuthorDeleteClick(reply)}>Delete post
      • + + ) : null} + {isModerator ? ( + <> + {authorAddress === account?.author.address || + authorAddress === account?.signer.address ? ( + null + ) : ( +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + setDeletePost(true); + }}> + Delete post +
      • + )} +
    • { + setModeratingCommentCid(reply.cid) + setIsModerationOpen(true); + handleMobileOptionClick(reply.cid); + }}> + Mod tools +
      • + + ) : null} + + )}       + {(replyMediaInfo && ( + replyMediaInfo.type === 'image' || + (replyMediaInfo.type === 'webpage' && + replyMediaInfo.thumbnail))) ? ( + <> +
    • handleMobileOptionClick(reply.cid)}> + Search image on Google +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
      • +
    • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
      • + + ) : null + } +
    +     , document.body + )} {reply.author?.displayName ? reply.author?.displayName.length > 12 From ab371789e916f4720e38c322fa5a1a2ff86fd13d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 17:35:28 +0200 Subject: [PATCH 05/12] update mobile post menu, rules and description --- src/components/BoardAvatar.jsx | 2 +- src/components/views/All.jsx | 80 +++---- src/components/views/Board.jsx | 276 ++++++++++++++++++++----- src/components/views/Catalog.jsx | 42 ++-- src/components/views/Description.jsx | 146 ++++++++++++- src/components/views/Rules.jsx | 107 +++++++++- src/components/views/Subscriptions.jsx | 78 +++---- src/components/views/Thread.jsx | 66 +++--- 8 files changed, 613 insertions(+), 184 deletions(-) diff --git a/src/components/BoardAvatar.jsx b/src/components/BoardAvatar.jsx index 454332cf..3499cf93 100644 --- a/src/components/BoardAvatar.jsx +++ b/src/components/BoardAvatar.jsx @@ -8,7 +8,7 @@ const BoardAvatar = ({ address }) => { useEffect(() => { if (subplebbit.suggested?.avatarUrl) { - setAvatarUrl(subplebbit.suggested.avatarUrl); + setAvatarUrl(subplebbit.suggested?.avatarUrl); } }, [subplebbit.suggested?.avatarUrl, subplebbit]); diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 123cfd03..bcad83e7 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -1842,24 +1842,27 @@ const All = () => { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(thread.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
    • +     ) : null } @@ -2164,28 +2167,31 @@ const All = () => { )} {(replyMediaInfo && ( - replyMediaInfo.type === 'image' || + replyMediaInfo.type === 'image' || (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(reply.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
    • +     ) : null } diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index f279d2d9..14c07851 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1041,6 +1041,32 @@ const Board = () => { change rules ) : null} */} +
  • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
      +
    • handleOptionClick("rules")}> + Plebbit +
      • + {/*
    • handleOptionClick("rules")}> + Seedit +
      • */} +
    • handleOptionClick("rules")}> + Plebones +
      • +
    +
    • , document.body @@ -1089,6 +1115,20 @@ const Board = () => { handleMobileOptionClick("rules"); handleShareClick(selectedAddress, "rules") }}>Share board + +
  • handleOptionClick("rules")}> + View on plebbit +
    • +     + +
  • handleOptionClick("rules")}> + View on plebones +
    • +     , document.body )} @@ -1200,6 +1240,32 @@ const Board = () => { change rules ) : null} */} +
  • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
      +
    • handleOptionClick("rules")}> + Plebbit +
      • + {/*
    • handleOptionClick("rules")}> + Seedit +
      • */} +
    • handleOptionClick("rules")}> + Plebones +
      • +
    +
    • , document.body @@ -1248,6 +1314,20 @@ const Board = () => { handleMobileOptionClick("rules"); handleShareClick(selectedAddress, "rules") }}>Share board + +
  • handleOptionClick("rules")}> + View on plebbit +
    • +     + +
  • handleOptionClick("rules")}> + View on plebones +
    • +     , document.body )} @@ -1381,6 +1461,60 @@ const Board = () => { change description ) : null} */} + {subplebbit.suggested?.avatarUrl ? ( +
  • {setIsImageSearchOpen(true)}} + onMouseLeave={() => {setIsImageSearchOpen(false)}}> + Image search » +
      +
    • handleOptionClick("description")}> + Google +
      • +
    • handleOptionClick("description")}> + Yandex +
      • +
    • handleOptionClick("description")}> + SauceNAO +
      • +
    +
    • + ) : null} +
  • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
      +
    • handleOptionClick("description")}> + Plebbit +
      • + {/*
    • handleOptionClick("description")}> + Seedit +
      • */} +
    • handleOptionClick("description")}> + Plebones +
      • +
    +
    • , document.body @@ -1403,17 +1537,18 @@ const Board = () => {
    - + {createPortal( {postMenuMobileRef.current = el}} @@ -1422,11 +1557,48 @@ const Board = () => { display: openMobileMenuCid === "description" ? "block" : "none", top: mobileMenuPosition.top + 20, left: mobileMenuPosition.left}}> -
      + , document.body )} @@ -1459,7 +1631,7 @@ const Board = () => {
      - board avatar
      image
      @@ -2608,24 +2780,27 @@ const Board = () => { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> -
    • handleMobileOptionClick(thread.cid)}> - Search image on Google -
      • -
    • handleMobileOptionClick(thread.cid)}> - Search image on Yandex -
      • -
    • handleMobileOptionClick(thread.cid)}> - Search image on SauceNAO -
      • + +
    • handleMobileOptionClick(thread.cid)}> + Search image on Google +
      • +       + +
    • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
      • +       + +
    • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
      • +       ) : null } @@ -2935,24 +3110,27 @@ const Board = () => { (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
    • handleMobileOptionClick(reply.cid)}> - Search image on Google -
      • -
    • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
      • -
    • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
      • + +
    • handleMobileOptionClick(reply.cid)}> + Search image on Google +
      • +       + +
    • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
      • +       + +
    • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
      • +       ) : null } diff --git a/src/components/views/Catalog.jsx b/src/components/views/Catalog.jsx index eac1f5f7..991c5476 100755 --- a/src/components/views/Catalog.jsx +++ b/src/components/views/Catalog.jsx @@ -24,7 +24,6 @@ import VerifiedAuthor from '../VerifiedAuthor'; import countLinks from '../../utils/countLinks'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getFormattedTime from '../../utils/getFormattedTime'; -import handleShareClick from '../../utils/handleShareClick'; import handleStyleChange from '../../utils/handleStyleChange'; import useAnonModeRef from '../../hooks/useAnonModeRef'; import useClickForm from '../../hooks/useClickForm'; @@ -433,10 +432,13 @@ const CatalogPost = ({post}) => { style={{ display: openMenuCid === "rules" ? 'block' : 'none' }} >
        -
      • { - handleOptionClick("rules"); - handleShareClick(selectedAddress, "rules"); - }}>Share board
        • + +
      • { + handleOptionClick("rules"); + }}>Share board
        • +         {/* {isModerator ? ( <> change rules @@ -512,7 +514,7 @@ const CatalogPost = ({post}) => { setPopupPosition({top: rect.top + window.scrollY, left: rect.left}); }} onMouseLeave={() => setIsHoveringForMenu(false)} - src={subplebbit.suggested.avatarUrl} alt="board avatar" /> + src={subplebbit.suggested?.avatarUrl} alt="board avatar" /> ) : null} {subplebbit.suggested?.avatarUrl ? ( @@ -577,10 +579,13 @@ const CatalogPost = ({post}) => { style={{ display: openMenuCid === "description" ? 'block' : 'none' }} >
          -
        • { - handleOptionClick("description"); - handleShareClick(selectedAddress, "description"); - }}>Share board
          • + +
        • { + handleOptionClick("description"); + }}>Share board
          • +           {/* {isModerator ? ( <> change description @@ -595,19 +600,19 @@ const CatalogPost = ({post}) => { style={{display: isImageSearchOpen ? 'block': 'none'}}>
        • handleOptionClick("description")}> Google
        • handleOptionClick("description")}> Yandex
        • handleOptionClick("description")}> SauceNAO
          • @@ -818,10 +823,13 @@ const CatalogPost = ({post}) => { style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} >
            -
          • { - handleOptionClick(thread.cid); - handleShareClick(selectedAddress, thread.cid); - }}>Share thread
            • + +
          • { + handleOptionClick(thread.cid); + }}>Share thread
            • +             {({ authorAddress }) => ( <> {authorAddress === account?.author.address || diff --git a/src/components/views/Description.jsx b/src/components/views/Description.jsx index 74b53c7c..6381753f 100644 --- a/src/components/views/Description.jsx +++ b/src/components/views/Description.jsx @@ -5,7 +5,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import BoardStats from '../BoardStats'; @@ -37,15 +37,20 @@ const Description = () => { const navigate = useNavigate(); const threadMenuRefs = useRef({}); - const postMenuRef = useRef(null); + const threadMenuRefsMobile = useRef({}); + const postMenuMobileRef = useRef(null); const postMenuCatalogRef = useRef(null); const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); + const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); @@ -55,12 +60,23 @@ const Description = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + + const handleOutsideClick = useCallback((e) => { - if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { + if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } - }, [openMenuCid, postMenuRef, postMenuCatalogRef]); + }, [openMenuCid, postMenuCatalogRef]); + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); + useEffect(() => { if (openMenuCid !== null) { @@ -74,6 +90,19 @@ const Description = () => { }; }, [openMenuCid, handleOutsideClick]); + + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + useEffect(() => { window.scrollTo(0, 0); @@ -376,6 +405,60 @@ const Description = () => { change description ) : null} */} + {subplebbit.suggested?.avatarUrl ? ( +
          • {setIsImageSearchOpen(true)}} + onMouseLeave={() => {setIsImageSearchOpen(false)}}> + Image search » +
              +
            • handleOptionClick("description")}> + Google +
              • +
            • handleOptionClick("description")}> + Yandex +
              • +
            • handleOptionClick("description")}> + SauceNAO +
              • +
            +
            • + ) : null} +
          • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
              +
            • handleOptionClick("description")}> + Plebbit +
              • + {/*
            • handleOptionClick("description")}> + Seedit +
              • */} +
            • handleOptionClick("description")}> + Plebones +
              • +
            +
      , document.body @@ -395,8 +478,57 @@ const Description = () => {
      - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "description" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> +
        +
      • { + handleMobileOptionClick("description"); + handleShareClick(selectedAddress, "description") + }}>Share board
        • + {subplebbit.suggested?.avatarUrl ? ( + <> +
      • handleMobileOptionClick("description")}> + Search image on Google +
        • +
      • handleMobileOptionClick("description")}> + Search image on Yandex +
        • +
      • handleMobileOptionClick("description")}> + Search image on SauceNAO +
        • + + ) : null + } +
      +       , document.body + )} {
      - board avatar
      image
      diff --git a/src/components/views/Rules.jsx b/src/components/views/Rules.jsx index b8526dcc..634f3c0b 100644 --- a/src/components/views/Rules.jsx +++ b/src/components/views/Rules.jsx @@ -5,7 +5,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { debounce } from 'lodash'; -import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; +import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import BoardStats from '../BoardStats'; @@ -42,15 +42,19 @@ const Rules = () => { const navigate = useNavigate(); const threadMenuRefs = useRef({}); - const postMenuRef = useRef(null); + const threadMenuRefsMobile = useRef({}); + const postMenuMobileRef = useRef(null); const postMenuCatalogRef = useRef(null); const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); + const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0}); const [openMenuCid, setOpenMenuCid] = useState(null); + const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); + const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false); const { subplebbitAddress } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); @@ -60,12 +64,23 @@ const Rules = () => { setOpenMenuCid(null); }; + const handleMobileOptionClick = () => { + setOpenMobileMenuCid(null); + }; + + const handleOutsideClick = useCallback((e) => { - if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { + if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) { setOpenMenuCid(null); } - }, [openMenuCid, postMenuRef, postMenuCatalogRef]); + }, [openMenuCid, postMenuCatalogRef]); + const handleMobileOutsideClick = useCallback((e) => { + if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) { + setOpenMobileMenuCid(null); + } + }, [openMobileMenuCid, postMenuMobileRef]); + useEffect(() => { if (openMenuCid !== null) { @@ -79,13 +94,25 @@ const Rules = () => { }; }, [openMenuCid, handleOutsideClick]); + + useEffect(() => { + if (openMobileMenuCid !== null) { + document.addEventListener('click', handleMobileOutsideClick); + } else { + document.removeEventListener('click', handleMobileOutsideClick); + } + + return () => { + document.removeEventListener('click', handleMobileOutsideClick); + }; + }, [openMobileMenuCid, handleMobileOutsideClick]); + useEffect(() => { window.scrollTo(0, 0); }, []); - useEffect(() => { const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); if (subplebbitAddress) { @@ -358,6 +385,32 @@ const Rules = () => { change rules ) : null} */} +
    • {setIsClientRedirectMenuOpen(true)}} + onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}> + View on » +
        +
      • handleOptionClick("rules")}> + Plebbit +
        • + {/*
      • handleOptionClick("rules")}> + Seedit +
        • */} +
      • handleOptionClick("rules")}> + Plebones +
        • +
      +
    , document.body @@ -391,8 +444,48 @@ const Rules = () => {
    - + + {createPortal( + {postMenuMobileRef.current = el}} + onClick={(event) => event.stopPropagation()} + style={{position: "absolute", + display: openMobileMenuCid === "rules" ? "block" : "none", + top: mobileMenuPosition.top + 20, + left: mobileMenuPosition.left}}> + + , document.body + )} { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(thread.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(thread.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(thread.cid)}> + Search image on SauceNAO +
    • +     ) : null } @@ -2176,24 +2179,27 @@ const Subscriptions = () => { (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(reply.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
    • +     ) : null } diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 1f489c4f..91bd7573 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1832,24 +1832,27 @@ const Thread = () => { (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail))) ? ( <> +
  • handleMobileOptionClick(comment.cid)}> - Search image on Google + Search image on Google
    • + +
  • handleMobileOptionClick(comment.cid)}> - Search image on Yandex + Search image on Yandex
    • + +
  • handleMobileOptionClick(comment.cid)}> - Search image on SauceNAO + Search image on SauceNAO
    • + ) : null } @@ -2124,24 +2127,27 @@ const Thread = () => { (replyMediaInfo.type === 'webpage' && replyMediaInfo.thumbnail))) ? ( <> -
  • handleMobileOptionClick(reply.cid)}> - Search image on Google -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on Yandex -
    • -
  • handleMobileOptionClick(reply.cid)}> - Search image on SauceNAO -
    • + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Google +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on Yandex +
    • +     + +
  • handleMobileOptionClick(reply.cid)}> + Search image on SauceNAO +
    • +     ) : null } From 5c72bc69e1c5e125c8c9348b3e2c5a0c877f5bdb Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 14 Sep 2023 21:58:35 +0200 Subject: [PATCH 06/12] Revert "Update SettingsModal.jsx" This reverts commit 708294922d32187d9c25b9214ab09f34dccbefd0. --- src/components/modals/SettingsModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 5a4d3a10..2a97e032 100755 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -463,7 +463,7 @@ const SettingsModal = ({ isOpen, closeModal }) => { {setAnonymousMode(!anonymousMode)}} + onChange={() => {setAnonymousMode(!anonymousMode); window.location.reload();}} />  Anon Mode From b826f332d63b7046857a20feab9377442f53889e Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 15 Sep 2023 10:33:38 +0200 Subject: [PATCH 07/12] add view on other client buttons mobile --- src/components/views/Board.jsx | 28 ++++++++++++++++++++++++++++ src/components/views/Thread.jsx | 28 ++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 14c07851..e69b39d1 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -2804,6 +2804,20 @@ const Board = () => { ) : null } + +
  • handleOptionClick(thread.cid)}> + View on plebbit +
    • +     + +
  • handleOptionClick(thread.cid)}> + View on plebones +
    • +     , document.body )} @@ -3134,6 +3148,20 @@ const Board = () => { ) : null } + +
  • handleOptionClick(reply.cid)}> + View on plebbit +
    • +     + +
  • handleOptionClick(reply.cid)}> + View on plebones +
    • +     , document.body )} diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 91bd7573..f76e98a6 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1856,6 +1856,20 @@ const Thread = () => { ) : null } + +
  • handleOptionClick(comment.cid)}> + View on plebbit +
    • +     + +
  • handleOptionClick(comment.cid)}> + View on plebones +
    • +     , document.body )} @@ -2151,6 +2165,20 @@ const Thread = () => { ) : null } + +
  • handleOptionClick(reply.cid)}> + View on plebbit +
    • +     + +
  • handleOptionClick(reply.cid)}> + View on plebones +
    • +     , document.body )} From 72a12ddb8ca7e2824312997d339dd53b106b6387 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 15 Sep 2023 10:36:48 +0200 Subject: [PATCH 08/12] add share reply link --- src/components/views/All.jsx | 6 +++--- src/components/views/Board.jsx | 6 +++--- src/components/views/Subscriptions.jsx | 6 +++--- src/components/views/Thread.jsx | 6 +++--- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index bcad83e7..6e96c25a 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -1291,8 +1291,8 @@ const All = () => {
    • { handleOptionClick(reply.cid); - handleShareClick(thread.subplebbitAddress, thread.cid); - }}>Share thread
      • + handleShareClick(thread.subplebbitAddress, reply.cid); + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || @@ -2129,7 +2129,7 @@ const All = () => {
    • { handleMobileOptionClick(reply.cid); handleShareClick(selectedAddress, reply.cid) - }}>Share thread
      • + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index e69b39d1..3380cce5 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -2230,8 +2230,8 @@ const Board = () => {
      • { handleOptionClick(reply.cid); - handleShareClick(selectedAddress, thread.cid); - }}>Share thread
        • + handleShareClick(selectedAddress, reply.cid); + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || @@ -3082,7 +3082,7 @@ const Board = () => {
      • { handleMobileOptionClick(reply.cid); handleShareClick(selectedAddress, reply.cid) - }}>Share thread
        • + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 19732e8c..06fd965d 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -1299,8 +1299,8 @@ const Subscriptions = () => {
        • { handleOptionClick(reply.cid); - handleShareClick(thread.subplebbitAddress, thread.cid); - }}>Share thread
          • + handleShareClick(thread.subplebbitAddress, reply.cid); + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || @@ -2137,7 +2137,7 @@ const Subscriptions = () => {
        • { handleMobileOptionClick(reply.cid); handleShareClick(selectedAddress, reply.cid) - }}>Share thread
          • + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index f76e98a6..f1d608e6 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -1396,8 +1396,8 @@ const Thread = () => {
          • { handleOptionClick(reply.cid); - handleShareClick(selectedAddress, comment.cid); - }}>Share thread
            • + handleShareClick(selectedAddress, reply.cid); + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || @@ -2099,7 +2099,7 @@ const Thread = () => {
          • { handleMobileOptionClick(reply.cid); handleShareClick(selectedAddress, reply.cid) - }}>Share thread
            • + }}>Share post {({ authorAddress }) => ( <> {authorAddress === account?.author.address || From 861902c35b1f082587f19032b12d5d39ec14f6c8 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 15 Sep 2023 10:39:02 +0200 Subject: [PATCH 09/12] add whitespace --- src/components/views/All.jsx | 4 ++-- src/components/views/Board.jsx | 4 ++-- src/components/views/Subscriptions.jsx | 4 ++-- src/components/views/Thread.jsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 6e96c25a..cae6958e 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -753,7 +753,7 @@ const All = () => { } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'thread')}}> @@ -1460,7 +1460,7 @@ const All = () => { } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'reply')}}> diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 3380cce5..56c39a82 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1693,7 +1693,7 @@ const Board = () => { } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'thread')}}> @@ -2397,7 +2397,7 @@ const Board = () => { } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'reply')}}> diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 06fd965d..d80a1c50 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -761,7 +761,7 @@ const Subscriptions = () => { } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'thread')}}> @@ -1468,7 +1468,7 @@ const Subscriptions = () => { } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'reply')}}> diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index f1d608e6..c2c97942 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -903,7 +903,7 @@ const Thread = () => { } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'thread')}}> @@ -1563,7 +1563,7 @@ const Thread = () => { } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && ( - [ +  [ {handleThumbnailClick(index, 'reply')}}> From cb99446f4c3a764e31e7a59c8945de0b3c7ff9f4 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 15 Sep 2023 10:46:50 +0200 Subject: [PATCH 10/12] update share board link --- src/utils/handleShareClick.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/utils/handleShareClick.js b/src/utils/handleShareClick.js index 19ab126c..0e7b59c3 100644 --- a/src/utils/handleShareClick.js +++ b/src/utils/handleShareClick.js @@ -1,14 +1,19 @@ function handleShareClick(selectedAddress, cid) { - const plebBzBaseURL = "https://pleb.bz/p/"; + let shareLink; - let shareLink = `${plebBzBaseURL}${selectedAddress}/`; + if (cid === "rules" || cid === "description") { + shareLink = `https://plebchan.eth.limo/#/p/${selectedAddress}`; + } else { + const plebBzBaseURL = "https://pleb.bz/p/"; + shareLink = `${plebBzBaseURL}${selectedAddress}/`; + + if (cid !== "rules" && cid !== "description") { + shareLink += `c/${cid}`; + } - if (cid !== "rules" && cid !== "description") { - shareLink += `c/${cid}`; + shareLink += `?redirect=plebchan.eth.limo`; } - shareLink += `?redirect=plebchan.eth.limo`; - if (navigator.clipboard) { navigator.clipboard.writeText(shareLink).then(() => { console.log("Link copied to clipboard!"); From 824549d67ddc32614fcbd3b8c388742e51b05a7f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 15 Sep 2023 10:52:08 +0200 Subject: [PATCH 11/12] fix other whitespace --- src/components/views/All.jsx | 4 ++-- src/components/views/Board.jsx | 4 ++-- src/components/views/Subscriptions.jsx | 4 ++-- src/components/views/Thread.jsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index cae6958e..c60f510b 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -750,7 +750,7 @@ const All = () => { commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url - } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} + }{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (  [ @@ -1457,7 +1457,7 @@ const All = () => { replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url - } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} + }{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (  [ diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 56c39a82..54e66208 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1690,7 +1690,7 @@ const Board = () => { commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url - } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} + }{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (  [ @@ -2394,7 +2394,7 @@ const Board = () => { replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url - } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} + }{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (  [ diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index d80a1c50..4e1e46fe 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -758,7 +758,7 @@ const Subscriptions = () => { commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url - } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} + }{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (  [ @@ -1465,7 +1465,7 @@ const Subscriptions = () => { replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url - } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} + }{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (  [ diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index c2c97942..eb0e8232 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -900,7 +900,7 @@ const Thread = () => { commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url - } {commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} + }{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (  [ @@ -1560,7 +1560,7 @@ const Thread = () => { replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url - } {replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} + }{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (  [ From 12c8bf5f8984d4be22fb7281ba3cc81ffd458b75 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 15 Sep 2023 11:03:19 +0200 Subject: [PATCH 12/12] update rules and description, remove share board --- src/components/views/Board.jsx | 26 -------------------------- src/components/views/Catalog.jsx | 6 ------ src/components/views/Description.jsx | 23 ++++++++++++++--------- src/components/views/Rules.jsx | 13 ++----------- 4 files changed, 16 insertions(+), 52 deletions(-) diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 54e66208..e6644b1d 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -1030,12 +1030,6 @@ const Board = () => { style={{ display: openMenuCid === "rules" ? 'block' : 'none' }} >