From b6f38b532a5ed51e74c6b3a623b208a1f2efa0cc Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 26 Mar 2024 21:12:29 +0100 Subject: [PATCH 01/11] fix(board stats): table warning, margin --- src/components/board-stats/board-stats.module.css | 4 ++-- src/components/board-stats/board-stats.tsx | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css index 137eed71..ed05ae50 100644 --- a/src/components/board-stats/board-stats.module.css +++ b/src/components/board-stats/board-stats.module.css @@ -1,14 +1,14 @@ .content hr { min-width: 468px; margin-left: -4px; - margin-bottom: 5px; + margin-bottom: 6px; } .blotter { min-width: 468px; margin: auto; line-height: 1; - margin-top: -2px; + margin-top: -1px; } .blotter tr { diff --git a/src/components/board-stats/board-stats.tsx b/src/components/board-stats/board-stats.tsx index 2d0f43a8..61302d82 100644 --- a/src/components/board-stats/board-stats.tsx +++ b/src/components/board-stats/board-stats.tsx @@ -24,7 +24,13 @@ const BoardStats = ({ address, createdAt }: BoardStatsProps) => { return (
-
+ + + + + {showStats && ( From 38b3793dc98a1eb38c3ae19a540d37fd0253d4cd Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 27 Mar 2024 14:16:47 +0100 Subject: [PATCH 02/11] chore(package.json): upgrade plebbit-react-hooks --- package.json | 2 +- yarn.lock | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 169b463f..309a6431 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dependencies": { "@capacitor/app": "1.1.1", "@floating-ui/react": "0.26.1", - "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#63833e978ca25f9846544d32b9c67810af0daf19", + "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#00aabcce2276c671c0f4a371d459c93eb39c936a", "@testing-library/jest-dom": "5.14.1", "@testing-library/react": "13.0.0", "@testing-library/user-event": "13.2.1", diff --git a/yarn.lock b/yarn.lock index abfa4e1e..5c1a1e6d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3413,6 +3413,22 @@ dependencies: debug "4.3.4" +"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#00aabcce2276c671c0f4a371d459c93eb39c936a": + version "0.0.1" + resolved "https://github.com/plebbit/plebbit-react-hooks.git#00aabcce2276c671c0f4a371d459c93eb39c936a" + dependencies: + "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#073d5f501ccf9521942d93f6522d1125058c196a" + "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" + assert "2.0.0" + ethers "5.6.9" + localforage "1.10.0" + lodash.isequal "4.5.0" + memoizee "0.4.15" + quick-lru "5.1.1" + uint8arrays "3.1.1" + uuid "8.3.2" + zustand "4.0.0" + "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#63833e978ca25f9846544d32b9c67810af0daf19": version "0.0.1" resolved "https://github.com/plebbit/plebbit-react-hooks.git#63833e978ca25f9846544d32b9c67810af0daf19" From 311896d1220477e2979b9bb8bd09afb0688d1639 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 27 Mar 2024 15:10:58 +0100 Subject: [PATCH 03/11] perf(app): optimize subs loading as much as possible --- src/app.tsx | 43 +++++---- src/components/board-nav/board-nav.tsx | 33 +++---- src/components/markdown/markdown.tsx | 1 - src/components/post/post.module.css | 20 +++- src/components/post/post.tsx | 125 +++++++++++++++---------- src/views/home/home.tsx | 28 ++++-- src/views/subplebbit/subplebbit.tsx | 14 ++- 7 files changed, 163 insertions(+), 101 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 7183a6ba..8b5841d1 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,33 +1,39 @@ import { useEffect } from 'react'; import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'; import { isHomeView } from './lib/utils/view-utils'; -import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; -import styles from './app.module.css'; +import { Subplebbit as SubplebbitType, useSubplebbits } from '@plebbit/plebbit-react-hooks'; +import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits'; import useTheme from './hooks/use-theme'; +import styles from './app.module.css'; import Home from './views/home'; import Settings from './views/settings'; import Subplebbit from './views/subplebbit'; import BoardNav from './components/board-nav'; import BoardBanner from './components/board-banner'; +import { DesktopBoardButtons } from './components/board-buttons'; +import { MobileBoardButtons } from './components/board-buttons'; import BoardStats from './components/board-stats'; import PostForm from './components/post-form'; -import { MobileBoardButtons } from './components/board-buttons'; -import { DesktopBoardButtons } from './components/board-buttons'; -const BoardLayout = () => { +interface BoardLayoutProps { + subplebbits: (SubplebbitType | undefined)[]; +} + +const BoardLayout = ({ subplebbits }: BoardLayoutProps) => { const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); - const subplebbit = useSubplebbit({ subplebbitAddress }); + const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress); + const { address, createdAt, title } = subplebbit || {}; return ( <> - {subplebbitAddress && ( + {address && ( <> - - - - - - + + + + + + )} @@ -40,6 +46,11 @@ const App = () => { const location = useLocation(); const isInHomeView = isHomeView(location.pathname); + const subplebbitAddresses = useDefaultSubplebbitAddresses(); + const { subplebbits } = useSubplebbits({ subplebbitAddresses }); + + console.log(subplebbits); + useEffect(() => { document.body.classList.forEach((className) => document.body.classList.remove(className)); document.body.classList.add(theme); @@ -55,9 +66,9 @@ const App = () => { return (
- } /> - }> - } /> + } /> + }> + } /> } /> diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 309ceb7e..459e1bc1 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -1,11 +1,11 @@ import { Link, useNavigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import useDefaultSubplebbits from '../../hooks/use-default-subplebbits'; +import { Subplebbit } from '@plebbit/plebbit-react-hooks'; import styles from './board-nav.module.css'; interface BoardNavProps { address?: string | undefined; - subplebbits?: any; + subplebbits: (Subplebbit | undefined)[]; currentSubplebbit?: string | undefined; } @@ -16,15 +16,18 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => {
[ - {subplebbits.map((subplebbit: any, index: number) => ( - - {index === 0 ? null : ' '} - - {subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')} - - {index !== subplebbits.length - 1 ? ' /' : null} - - ))} + {subplebbits.map((subplebbit: any, index: number) => { + const { address, title } = subplebbit; + return ( + + {index === 0 ? null : ' '} + + {address.includes('.') ? address : title || address.slice(0, 10).concat('...')} + + {index !== subplebbits.length - 1 ? ' /' : null} + + ); + })} ] @@ -72,13 +75,11 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => { ); }; -const BoardNav = ({ address }: BoardNavProps) => { - const defaultSubplebbits = useDefaultSubplebbits(); - +const BoardNav = ({ address, subplebbits }: BoardNavProps) => { return ( <> - - + + ); }; diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx index 05885d65..091798ea 100644 --- a/src/components/markdown/markdown.tsx +++ b/src/components/markdown/markdown.tsx @@ -4,7 +4,6 @@ import ReactMarkdown from 'react-markdown'; import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'; import remarkGfm from 'remark-gfm'; import supersub from 'remark-supersub'; -import { visit } from 'unist-util-visit'; interface MarkdownProps { content: string; diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index a518f3d0..c0362a5e 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -2,11 +2,11 @@ clear: both; } -.hrWrapper hr { +.postDesktop .hrWrapper hr { margin: 0; /* margin bugs Virtuoso scrolling */ } -.hrWrapper { +.postDesktop .hrWrapper { padding-top: 0.5em; /* instead of using margin, wrap with padding */ padding-bottom: 0.5em; } @@ -89,8 +89,24 @@ padding: 1em 40px; } +.postMobile hr { + padding-bottom: 30px; +} + +.postMobile .thread { + border-top: none; + margin: 0; + clear: both; +} + @media (max-width: 640px) { .postDesktop { display: none; } +} + +@media (min-width: 641px) { + .postMobile { + display: none; + } } \ No newline at end of file diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index c33cd6c3..fc301ceb 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -7,7 +7,7 @@ import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; import Markdown from '../markdown'; -const Post = ({ post }: Comment) => { +const PostDesktop = ({ post }: Comment) => { const { t } = useTranslation(); const { author, cid, content, link, locked, pinned, postCid, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; @@ -15,64 +15,85 @@ const Post = ({ post }: Comment) => { const linkMediaInfo = getLinkMediaInfoMemoized(link); return ( -
-
-
-
-
-
- {linkMediaInfo?.url && ( - - )} -
- {title && {title.length > 75 ? title.slice(0, 75) + '...' : title}}{' '} - - {displayName || 'Anonymous'} - (u/{shortAddress}) +
+
+
+
+ {linkMediaInfo?.url && ( + + )} +
+ {title && {title.length > 75 ? title.slice(0, 75) + '...' : title}}{' '} + + {displayName || 'Anonymous'} + (u/{shortAddress}) + + {getFormattedDate(timestamp)} + + + + c/ + + + {shortCid} - {getFormattedDate(timestamp)} - - - - c/ - - - {shortCid} - - - {pinned && ( - - - - )} - {locked && ( - - - - )} - - [{t('reply')}] - + + {pinned && ( + + - ▶ -
- {content && ( -
-
- -
-
)} + {locked && ( + + + + )} + + [{t('reply')}] + + + ▶ +
+ {content && ( +
+
+ +
+
+ )} +
+ ); +}; + +const PostMobile = ({ post }: Comment) => { + return ( +
+
+
+
+
+
); }; +const Post = ({ post }: Comment) => { + return ( +
+
+ + +
+
+ ); +}; + export default Post; diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx index d344385b..69b902b1 100644 --- a/src/views/home/home.tsx +++ b/src/views/home/home.tsx @@ -2,9 +2,13 @@ import { useRef } from 'react'; import styles from './home.module.css'; import { Link, useNavigate } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; -import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; +import { Subplebbit } from '@plebbit/plebbit-react-hooks'; import packageJson from '../../../package.json'; +interface HomeProps { + subplebbits: (Subplebbit | undefined)[]; +} + const isValidAddress = (address: string): boolean => { if (address.includes('/') || address.includes('\\') || address.includes(' ')) { return false; @@ -65,9 +69,8 @@ const InfoBox = () => { ); }; -const Boards = () => { +const Boards = ({ subplebbits }: HomeProps) => { const { t } = useTranslation(); - const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses(); return (
@@ -79,11 +82,16 @@ const Boards = () => {

Default SFW

- {defaultSubplebbitAddresses.map((address) => ( -
- {address} -
- ))} + {subplebbits + .filter((subplebbit): subplebbit is Subplebbit => subplebbit !== undefined) + .map((subplebbit) => { + const address = subplebbit.address; + return ( +
+ {address} +
+ ); + })}
@@ -193,7 +201,7 @@ const Footer = () => { ); }; -const Home = () => { +const Home = ({ subplebbits }: HomeProps) => { return (
@@ -203,7 +211,7 @@ const Home = () => { - +
diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx index d2bff18f..eb72b819 100644 --- a/src/views/subplebbit/subplebbit.tsx +++ b/src/views/subplebbit/subplebbit.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo, useRef } from 'react'; import { useParams } from 'react-router-dom'; -import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { useTranslation } from 'react-i18next'; import styles from './subplebbit.module.css'; @@ -9,12 +9,18 @@ import LoadingEllipsis from '../../components/loading-ellipsis'; import Post from '../../components/post'; const lastVirtuosoStates: { [key: string]: StateSnapshot } = {}; -const Subplebbit = () => { +interface SubplebbitProps { + subplebbits: (SubplebbitType | undefined)[]; +} + +const Subplebbit = ({ subplebbits }: SubplebbitProps) => { const { t } = useTranslation(); + const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); + const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress); const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[]; - const subplebbit = useSubplebbit({ subplebbitAddress }); - const { createdAt, description, roles, rules, shortAddress, state, title, updatedAt, settings } = subplebbit || {}; + const { shortAddress, state, title } = subplebbit || {}; + const sortType = 'active'; const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType }); const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); From b3353a28f56ffb42a2d95793f5abf1025b4e1e55 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 28 Mar 2024 09:31:28 +0100 Subject: [PATCH 04/11] fix undefined --- src/app.tsx | 2 -- src/components/board-nav/board-nav.tsx | 12 +++++++----- src/components/markdown/markdown.tsx | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 8b5841d1..b86c0056 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -49,8 +49,6 @@ const App = () => { const subplebbitAddresses = useDefaultSubplebbitAddresses(); const { subplebbits } = useSubplebbits({ subplebbitAddresses }); - console.log(subplebbits); - useEffect(() => { document.body.classList.forEach((className) => document.body.classList.remove(className)); document.body.classList.add(theme); diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 459e1bc1..d36488f2 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -17,9 +17,10 @@ const BoardNavDesktop = ({ subplebbits }: BoardNavProps) => { [ {subplebbits.map((subplebbit: any, index: number) => { - const { address, title } = subplebbit; + const address = subplebbit?.address || ''; + const title = subplebbit?.title || ''; return ( - + {index === 0 ? null : ' '} {address.includes('.') ? address : title || address.slice(0, 10).concat('...')} @@ -50,10 +51,11 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => { {subplebbits.map((subplebbit: any, index: number) => { - const { address, title } = subplebbit; - const subplebbitAddress = address.includes('.') ? address : title || address.slice(0, 10).concat('...'); + const address = subplebbit?.address || ''; + const title = subplebbit?.title || ''; + const subplebbitAddress = address?.includes('.') ? address : title || address?.slice(0, 10).concat('...'); return ( - ); diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx index 091798ea..740156dc 100644 --- a/src/components/markdown/markdown.tsx +++ b/src/components/markdown/markdown.tsx @@ -37,7 +37,7 @@ const blockquoteToGreentext = () => (tree: any) => { const Markdown = ({ content }: MarkdownProps) => { const remarkPlugins: any[] = [[supersub]]; - if (content.length <= MAX_LENGTH_FOR_GFM) { + if (content && content.length <= MAX_LENGTH_FOR_GFM) { remarkPlugins.push([remarkGfm, { singleTilde: false }]); } From 2add4fe2bd7c5b3c3a16d5a0727974d741483da4 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 28 Mar 2024 12:41:40 +0100 Subject: [PATCH 05/11] add mobile feed posts --- src/components/post-form/post-form.module.css | 1 + src/components/post/post.module.css | 79 ++++++++++++++++++- src/components/post/post.tsx | 48 ++++++++++- src/lib/utils/comment-utils.ts | 19 +++++ src/themes.css | 22 ++++++ 5 files changed, 162 insertions(+), 7 deletions(-) create mode 100644 src/lib/utils/comment-utils.ts diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index 3453e4c0..f524da91 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -7,6 +7,7 @@ .postFormButtonMobile { text-align: center; padding-top: 9px; + padding-bottom: 0.5em; } @media (max-width: 640px) { diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index c0362a5e..4f2ebf9e 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -2,13 +2,12 @@ clear: both; } -.postDesktop .hrWrapper hr { +.hrWrapper hr { margin: 0; /* margin bugs Virtuoso scrolling */ } .postDesktop .hrWrapper { - padding-top: 0.5em; /* instead of using margin, wrap with padding */ - padding-bottom: 0.5em; + padding: 0.5em 0; /* instead of using margin, wrap with padding */ } .postDesktop .link a { @@ -97,6 +96,80 @@ border-top: none; margin: 0; clear: both; + padding-bottom: 30px; +} + +.postMobile .postContainer { + background-color: var(--post-mobile-background-color); +} + +.postMobile .postOp { + display: inline; +} + +.postMobile .postInfo { + overflow: hidden; + border-bottom: var(--post-mobile-info-border-bottom); + background-color: var(--post-mobile-info-background-color); + padding: 5px; + clear: left; +} + +.postMobile .postMenuBtn { + color: var(--post-mobile-menu-button-color); + line-height: 1em; + width: 10px; + 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; +} + +.postMobile .nameBlock .name { + color: var(--post-mobile-name-text-color); + font-weight: var(--post-mobile-name-font-weight); +} + +.postMobile .nameBlock .subject { + color: var(--post-mobile-subject-text-color); + font-weight: var(--post-mobile-subject-font-weight); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; +} + +.postMobile .dateTimePostNum { + display: block; + text-align: right; +} + +.postMobile .postMessage { + padding: 10px; + font-size: 11pt; +} + +.postMobile .postLink { + clear: both; + background-color: var(--post-mobile-link-background-color); + border-top: var(--post-mobile-link-border-top); + padding: 5px; + overflow: hidden; + display: flex; + justify-content: space-between; + align-items: center; +} + +.postMobile .postLink .info { + color: var(--post-mobile-link-info-text-color); } @media (max-width: 640px) { diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index fc301ceb..4539ad01 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -6,6 +6,7 @@ import useReplies from '../../hooks/use-replies'; import { getLinkMediaInfoMemoized } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; import Markdown from '../markdown'; +import { countLinksInCommentReplies } from '../../lib/utils/comment-utils'; const PostDesktop = ({ post }: Comment) => { const { t } = useTranslation(); @@ -13,6 +14,7 @@ const PostDesktop = ({ post }: Comment) => { const { displayName, shortAddress } = author || {}; const replies = useReplies(post); const linkMediaInfo = getLinkMediaInfoMemoized(link); + const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title; return (
@@ -29,7 +31,7 @@ const PostDesktop = ({ post }: Comment) => {
)}
- {title && {title.length > 75 ? title.slice(0, 75) + '...' : title}}{' '} + {title && {displayTitle}}{' '} {displayName || 'Anonymous'} (u/{shortAddress}) @@ -72,13 +74,51 @@ const PostDesktop = ({ post }: Comment) => { }; const PostMobile = ({ post }: Comment) => { + const { author, cid, content, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; + const { address, displayName, shortAddress } = author || {}; + const linkCount = countLinksInCommentReplies(post); + const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title; + return (
-
+
+
+
-
-
+
+
+ + ... + + + {displayName || 'Anonymous'} + (u/{shortAddress || address.slice(0, 12) + '...'}) + {title && ( + <> +
+ {displayTitle} + + )} + + + {getFormattedDate(timestamp)} c/ + {shortCid} + +
+
+ +
+
+
+ + {replyCount} Replies + {linkCount > 0 && ` / ${linkCount} Links`} + + + View Thread + +
diff --git a/src/lib/utils/comment-utils.ts b/src/lib/utils/comment-utils.ts new file mode 100644 index 00000000..75b500e9 --- /dev/null +++ b/src/lib/utils/comment-utils.ts @@ -0,0 +1,19 @@ +import { Comment } from '@plebbit/plebbit-react-hooks'; + +export const countLinksInCommentReplies = (comment: Comment) => { + let linkCount = 0; + + if (comment.replyCount > 0) { + for (let reply of comment.replies.pages.topAll.comments) { + if (reply.link) { + linkCount++; + } + + if (reply.replyCount > 0) { + linkCount += countLinksInCommentReplies(reply); + } + } + } + + return linkCount; +}; diff --git a/src/themes.css b/src/themes.css index 1852d2f2..0cdcfb36 100644 --- a/src/themes.css +++ b/src/themes.css @@ -74,6 +74,17 @@ --post-menu-button-color: #000080; --post-menu-button-color-hover: red; --post-greentext-color: #789922; + --post-mobile-background-color: #f5e9e1; + --post-mobile-info-border-bottom: 1px solid #d9bfb7; + --post-mobile-info-background-color: #ead6ca; + --post-mobile-menu-button-color: #00e; + --post-mobile-name-text-color: #117743; + --post-mobile-name-font-weight: 700; + --post-mobile-subject-text-color: #cc1105; + --post-mobile-subject-font-weight: 700; + --post-mobile-link-background-color: #ead6ca; + --post-mobile-link-border-top: 1px solid #d9bfb7; + --post-mobile-link-info-text-color: #800; /* post form */ --post-form-toggle-font-size: 22px; @@ -157,6 +168,17 @@ --post-menu-button-color: #34345c; --post-menu-button-color-hover: #d00; --post-greentext-color: #789922; + --post-mobile-background-color: #d6daf0; + --post-mobile-info-border-bottom: 1px solid #b7c5d9; + --post-mobile-info-background-color: #c9cde8; + --post-mobile-menu-button-color: #34345c; + --post-mobile-name-text-color: purple; + --post-mobile-name-font-weight: 700; + --post-mobile-subject-text-color: #0f0c5d; + --post-mobile-subject-font-weight: 700; + --post-mobile-link-background-color: #c9cde8; + --post-mobile-link-border-top: 1px solid #b7c5d9; + --post-mobile-link-info-text-color: #34345c; /* post form */ --post-form-toggle-font-size: 22px; From 4abd08df7b14ad6c4fb109e434e24aba3bf2a72c Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 28 Mar 2024 17:21:27 +0100 Subject: [PATCH 06/11] update themes, limit post content length, fix undefined --- src/components/board-nav/board-nav.module.css | 10 ++++ src/components/board-nav/board-nav.tsx | 2 +- src/components/markdown/markdown.module.css | 4 +- src/components/post/post.module.css | 37 ++++++++++++-- src/components/post/post.tsx | 30 +++++++++--- src/index.css | 5 ++ src/themes.css | 49 ++++++++++++++++--- 7 files changed, 117 insertions(+), 20 deletions(-) diff --git a/src/components/board-nav/board-nav.module.css b/src/components/board-nav/board-nav.module.css index 41e5a8dd..a44ffacf 100644 --- a/src/components/board-nav/board-nav.module.css +++ b/src/components/board-nav/board-nav.module.css @@ -28,6 +28,16 @@ font-size: var(--boardnav-mobile-font-size); } +.boardNavMobile .pageJump a { + color: var(--button-text-color-mobile); + text-decoration: var(--button-text-decoration-mobile); +} + +.boardNavMobile .pageJump a:hover { + color: var(--button-text-color-hover-mobile); + text-decoration: var(--button-text-decoration-hover-mobile); +} + .boardNavMobile strong { text-transform: capitalize; padding-right: 5px; diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index d36488f2..3c7dd92f 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -43,7 +43,7 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => { const navigate = useNavigate(); const displaySubplebbitAddress = currentSubplebbit && currentSubplebbit.length > 30 ? currentSubplebbit.slice(0, 30).concat('...') : currentSubplebbit; - const currentSubplebbitIsInList = subplebbits.some((subplebbit: any) => subplebbit.address === currentSubplebbit); + const currentSubplebbitIsInList = subplebbits.some((subplebbit: any) => subplebbit?.address === currentSubplebbit); const boardSelect = (
+
+