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/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 { 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/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; diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index d1d9ddd0..c60f510b 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(); @@ -722,10 +750,10 @@ 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)) && ( - [ +  [ {handleThumbnailClick(index, 'thread')}}> @@ -1263,8 +1291,8 @@ const All = () => {