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

rename board-banner to board-header, board-nav to topbar

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-05-29 21:00:13 +02:00
parent 90161182d1
commit 75a1b716f8
10 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.tsx
+4 -4
View File
@@ -9,9 +9,9 @@ import Home from './views/home';
import NotFound from './views/not-found'; import NotFound from './views/not-found';
import PendingPost from './views/pending-post'; import PendingPost from './views/pending-post';
import PostPage from './views/post-page'; import PostPage from './views/post-page';
import BoardBanner from './components/board-banner'; import BoardHeader from './components/board-header';
import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons'; import { DesktopBoardButtons, MobileBoardButtons } from './components/board-buttons';
import BoardNav from './components/board-nav'; import TopBar from './components/topbar';
import ChallengeModal from './components/challenge-modal'; import ChallengeModal from './components/challenge-modal';
import SubplebbitStats from './components/subplebbit-stats'; import SubplebbitStats from './components/subplebbit-stats';
import PostForm from './components/post-form'; import PostForm from './components/post-form';
@@ -33,8 +33,8 @@ const BoardLayout = () => {
return ( return (
<div className={styles.boardLayout}> <div className={styles.boardLayout}>
<BoardNav /> <TopBar />
<BoardBanner /> <BoardHeader />
<MobileBoardButtons /> <MobileBoardButtons />
<PostForm key={key} /> <PostForm key={key} />
{subplebbitAddress && isValidSubplebbitAddress && <SubplebbitStats />} {subplebbitAddress && isValidSubplebbitAddress && <SubplebbitStats />}
src/components/board-banner/index.ts
-1
View File
@@ -1 +0,0 @@
export { default } from './board-banner';
src/components/board-banner/board-banner.module.css → src/components/board-header/board-header.module.css
View File
src/components/board-banner/board-banner.tsx → src/components/board-header/board-header.tsx
+3 -3
View File
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { useLocation, useParams } from 'react-router-dom'; import { useLocation, useParams } from 'react-router-dom';
import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
import styles from './board-banner.module.css'; import styles from './board-header.module.css';
import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; import { useMultisubMetadata } from '../../hooks/use-default-subplebbits';
const totalBanners = 57; const totalBanners = 57;
@@ -16,7 +16,7 @@ const ImageBanner = () => {
return <img src={imagePath} alt='' />; return <img src={imagePath} alt='' />;
}; };
const BoardBanner = () => { const BoardHeader = () => {
const location = useLocation(); const location = useLocation();
const params = useParams(); const params = useParams();
@@ -46,4 +46,4 @@ const BoardBanner = () => {
); );
}; };
export default BoardBanner; export default BoardHeader;
src/components/board-header/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './board-header';
src/components/board-nav/index.ts
-1
View File
@@ -1 +0,0 @@
export { default } from './board-nav';
src/components/topbar/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './topbar';
src/components/board-nav/board-nav.module.css → src/components/topbar/topbar.module.css
+10 -10
View File
@@ -1,17 +1,17 @@
.boardNavDesktop { .boardNavDesktop {
font-size: var(--boardnav-font-size); font-size: var(--topbar-font-size);
color: var(--boardnav-separator-color); color: var(--topbar-separator-color);
} }
.boardNavDesktop a { .boardNavDesktop a {
color: var(--boardnav-desktop-link-text-color); color: var(--topbar-desktop-link-text-color);
text-decoration: var(--boardnav-desktop-link-text-decoration); text-decoration: var(--topbar-desktop-link-text-decoration);
} }
.boardNavDesktop a:hover { .boardNavDesktop a:hover {
color: var(--boardnav-desktop-link-text-color-hover); color: var(--topbar-desktop-link-text-color-hover);
text-decoration: var(--boardnav-desktop-link-text-decoration-hover); text-decoration: var(--topbar-desktop-link-text-decoration-hover);
} }
.navTopRight { .navTopRight {
@@ -21,9 +21,9 @@
.boardNavMobile { .boardNavMobile {
padding: 2px 4px; padding: 2px 4px;
background-color: var(--boardnav-mobile-background-color); background-color: var(--topbar-mobile-background-color);
border-bottom: var(--boardnav-mobile-border-bottom); border-bottom: var(--topbar-mobile-border-bottom);
font-size: var(--boardnav-mobile-font-size); font-size: var(--topbar-mobile-font-size);
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 3; z-index: 3;
@@ -43,7 +43,7 @@
} }
.boardNavMobile select { .boardNavMobile select {
font-size: var(--boardnav-mobile-font-size); font-size: var(--topbar-mobile-font-size);
border: var(--select-border, revert); border: var(--select-border, revert);
background-color: var(--select-background-color, revert); background-color: var(--select-background-color, revert);
color: var(--select-color, revert); color: var(--select-color, revert);
src/components/board-nav/board-nav.tsx → src/components/topbar/topbar.tsx
+7 -7
View File
@@ -3,11 +3,11 @@ import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'; import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
import styles from './board-nav.module.css'; import styles from './topbar.module.css';
import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
const BoardNavDesktop = () => { const TopBarDesktop = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const location = useLocation(); const location = useLocation();
const isInCatalogView = isCatalogView(location.pathname); const isInCatalogView = isCatalogView(location.pathname);
@@ -39,7 +39,7 @@ const BoardNavDesktop = () => {
); );
}; };
const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => { const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const navigate = useNavigate(); const navigate = useNavigate();
const subplebbitAddresses = useDefaultSubplebbitAddresses(); const subplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -101,17 +101,17 @@ const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) =>
); );
}; };
const BoardNav = () => { const TopBar = () => {
const params = useParams(); const params = useParams();
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any }); const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress; const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
return ( return (
<> <>
<BoardNavDesktop /> <TopBarDesktop />
<BoardNavMobile subplebbitAddress={subplebbitAddress} /> <TopBarMobile subplebbitAddress={subplebbitAddress} />
</> </>
); );
}; };
export default BoardNav; export default TopBar;
src/themes.css
+60 -60
View File
@@ -6,16 +6,16 @@
--board-address-font-size: x-small; --board-address-font-size: x-small;
/* board nav */ /* board nav */
--boardnav-font-size: 9pt; --topbar-font-size: 9pt;
--boardnav-separator-color: #b86; --topbar-separator-color: #b86;
--boardnav-desktop-link-text-color: #800; --topbar-desktop-link-text-color: #800;
--boardnav-desktop-link-text-color-hover: #e00; --topbar-desktop-link-text-color-hover: #e00;
--boardnav-desktop-link-text-decoration: none; --topbar-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: underline; --topbar-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #f0e0d6; --topbar-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7; --topbar-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 10px; --topbar-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: navy; --topbar-mobile-button-text-color: navy;
/* body */ /* body */
--body-background-base-color: #ffe; --body-background-base-color: #ffe;
@@ -192,16 +192,16 @@
--board-address-text-color: #af0a0f; --board-address-text-color: #af0a0f;
/* board nav */ /* board nav */
--boardnav-font-size: 9pt; --topbar-font-size: 9pt;
--boardnav-separator-color: #89a; --topbar-separator-color: #89a;
--boardnav-desktop-link-text-color: #34345c; --topbar-desktop-link-text-color: #34345c;
--boardnav-desktop-link-text-color-hover: #d00; --topbar-desktop-link-text-color-hover: #d00;
--boardnav-desktop-link-text-decoration: none; --topbar-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none; --topbar-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #d6daf0; --topbar-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9; --topbar-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 10px; --topbar-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: #34345c; --topbar-mobile-button-text-color: #34345c;
/* body */ /* body */
--body-background-base-color: #eef2ff; --body-background-base-color: #eef2ff;
@@ -375,16 +375,16 @@
--body-font-size: 16px; --body-font-size: 16px;
/* board nav */ /* board nav */
--boardnav-font-size: 11pt; --topbar-font-size: 11pt;
--boardnav-separator-color: none; --topbar-separator-color: none;
--boardnav-desktop-link-text-color: #00e; --topbar-desktop-link-text-color: #00e;
--boardnav-desktop-link-text-color-hover: red; --topbar-desktop-link-text-color-hover: red;
--boardnav-desktop-link-text-decoration: underline; --topbar-desktop-link-text-decoration: underline;
--boardnav-desktop-link-text-decoration-hover: underline; --topbar-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #f0e0d6; --topbar-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7; --topbar-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 9pt; --topbar-mobile-font-size: 9pt;
--boardnav-mobile-button-text-color: #00f; --topbar-mobile-button-text-color: #00f;
/* board title */ /* board title */
--board-title-font-size: 32px; --board-title-font-size: 32px;
@@ -526,16 +526,16 @@
--board-address-text-color: #af0a0f; --board-address-text-color: #af0a0f;
/* board nav */ /* board nav */
--boardnav-font-size: 11pt; --topbar-font-size: 11pt;
--boardnav-separator-color: none; --topbar-separator-color: none;
--boardnav-desktop-link-text-color: #34345c; --topbar-desktop-link-text-color: #34345c;
--boardnav-desktop-link-text-color-hover: #d00; --topbar-desktop-link-text-color-hover: #d00;
--boardnav-desktop-link-text-decoration: underline; --topbar-desktop-link-text-decoration: underline;
--boardnav-desktop-link-text-decoration-hover: underline; --topbar-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #d6daf0; --topbar-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9; --topbar-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 9pt; --topbar-mobile-font-size: 9pt;
--boardnav-mobile-button-text-color: #34345c; --topbar-mobile-button-text-color: #34345c;
/* body */ /* body */
--body-background-base-color: #eef2ff; --body-background-base-color: #eef2ff;
@@ -689,16 +689,16 @@
--body-font-size: 13px; --body-font-size: 13px;
/* board nav */ /* board nav */
--boardnav-font-size: 9pt; --topbar-font-size: 9pt;
--boardnav-separator-color: #c5c8c6; --topbar-separator-color: #c5c8c6;
--boardnav-desktop-link-text-color: #81a2be; --topbar-desktop-link-text-color: #81a2be;
--boardnav-desktop-link-text-color-hover: #5f89ac; --topbar-desktop-link-text-color-hover: #5f89ac;
--boardnav-desktop-link-text-decoration: none; --topbar-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none; --topbar-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #1d1f21; --topbar-mobile-background-color: #1d1f21;
--boardnav-mobile-border-bottom: 2px solid #282a2e; --topbar-mobile-border-bottom: 2px solid #282a2e;
--boardnav-mobile-font-size: 10px; --topbar-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: #81a2be; --topbar-mobile-button-text-color: #81a2be;
/* board title */ /* board title */
--board-title-font-size: 28px; --board-title-font-size: 28px;
@@ -875,16 +875,16 @@
--body-font-size: 13px; --body-font-size: 13px;
/* board nav */ /* board nav */
--boardnav-font-size: 9pt; --topbar-font-size: 9pt;
--boardnav-separator-color: #333; --topbar-separator-color: #333;
--boardnav-desktop-link-text-color: #f60; --topbar-desktop-link-text-color: #f60;
--boardnav-desktop-link-text-color-hover: #f30; --topbar-desktop-link-text-color-hover: #f30;
--boardnav-desktop-link-text-decoration: none; --topbar-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none; --topbar-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #ddd; --topbar-mobile-background-color: #ddd;
--boardnav-mobile-border-bottom: 2px solid #ccc; --topbar-mobile-border-bottom: 2px solid #ccc;
--boardnav-mobile-font-size: 10px; --topbar-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: #f60; --topbar-mobile-button-text-color: #f60;
/* board title */ /* board title */
--board-title-font-size: 28px; --board-title-font-size: 28px;