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 PendingPost from './views/pending-post';
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 BoardNav from './components/board-nav';
import TopBar from './components/topbar';
import ChallengeModal from './components/challenge-modal';
import SubplebbitStats from './components/subplebbit-stats';
import PostForm from './components/post-form';
@@ -33,8 +33,8 @@ const BoardLayout = () => {
return (
<div className={styles.boardLayout}>
<BoardNav />
<BoardBanner />
<TopBar />
<BoardHeader />
<MobileBoardButtons />
<PostForm key={key} />
{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 { useAccountComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
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';
const totalBanners = 57;
@@ -16,7 +16,7 @@ const ImageBanner = () => {
return <img src={imagePath} alt='' />;
};
const BoardBanner = () => {
const BoardHeader = () => {
const location = useLocation();
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 {
font-size: var(--boardnav-font-size);
color: var(--boardnav-separator-color);
font-size: var(--topbar-font-size);
color: var(--topbar-separator-color);
}
.boardNavDesktop a {
color: var(--boardnav-desktop-link-text-color);
text-decoration: var(--boardnav-desktop-link-text-decoration);
color: var(--topbar-desktop-link-text-color);
text-decoration: var(--topbar-desktop-link-text-decoration);
}
.boardNavDesktop a:hover {
color: var(--boardnav-desktop-link-text-color-hover);
text-decoration: var(--boardnav-desktop-link-text-decoration-hover);
color: var(--topbar-desktop-link-text-color-hover);
text-decoration: var(--topbar-desktop-link-text-decoration-hover);
}
.navTopRight {
@@ -21,9 +21,9 @@
.boardNavMobile {
padding: 2px 4px;
background-color: var(--boardnav-mobile-background-color);
border-bottom: var(--boardnav-mobile-border-bottom);
font-size: var(--boardnav-mobile-font-size);
background-color: var(--topbar-mobile-background-color);
border-bottom: var(--topbar-mobile-border-bottom);
font-size: var(--topbar-mobile-font-size);
position: fixed;
width: 100%;
z-index: 3;
@@ -43,7 +43,7 @@
}
.boardNavMobile select {
font-size: var(--boardnav-mobile-font-size);
font-size: var(--topbar-mobile-font-size);
border: var(--select-border, revert);
background-color: var(--select-background-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 { useTranslation } from 'react-i18next';
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 { debounce } from 'lodash';
const BoardNavDesktop = () => {
const TopBarDesktop = () => {
const { t } = useTranslation();
const location = useLocation();
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 navigate = useNavigate();
const subplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -101,17 +101,17 @@ const BoardNavMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) =>
);
};
const BoardNav = () => {
const TopBar = () => {
const params = useParams();
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
return (
<>
<BoardNavDesktop />
<BoardNavMobile subplebbitAddress={subplebbitAddress} />
<TopBarDesktop />
<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 nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #b86;
--boardnav-desktop-link-text-color: #800;
--boardnav-desktop-link-text-color-hover: #e00;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: navy;
--topbar-font-size: 9pt;
--topbar-separator-color: #b86;
--topbar-desktop-link-text-color: #800;
--topbar-desktop-link-text-color-hover: #e00;
--topbar-desktop-link-text-decoration: none;
--topbar-desktop-link-text-decoration-hover: underline;
--topbar-mobile-background-color: #f0e0d6;
--topbar-mobile-border-bottom: 2px solid #d9c5b7;
--topbar-mobile-font-size: 10px;
--topbar-mobile-button-text-color: navy;
/* body */
--body-background-base-color: #ffe;
@@ -192,16 +192,16 @@
--board-address-text-color: #af0a0f;
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #89a;
--boardnav-desktop-link-text-color: #34345c;
--boardnav-desktop-link-text-color-hover: #d00;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: #34345c;
--topbar-font-size: 9pt;
--topbar-separator-color: #89a;
--topbar-desktop-link-text-color: #34345c;
--topbar-desktop-link-text-color-hover: #d00;
--topbar-desktop-link-text-decoration: none;
--topbar-desktop-link-text-decoration-hover: none;
--topbar-mobile-background-color: #d6daf0;
--topbar-mobile-border-bottom: 2px solid #b7c5d9;
--topbar-mobile-font-size: 10px;
--topbar-mobile-button-text-color: #34345c;
/* body */
--body-background-base-color: #eef2ff;
@@ -375,16 +375,16 @@
--body-font-size: 16px;
/* board nav */
--boardnav-font-size: 11pt;
--boardnav-separator-color: none;
--boardnav-desktop-link-text-color: #00e;
--boardnav-desktop-link-text-color-hover: red;
--boardnav-desktop-link-text-decoration: underline;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #f0e0d6;
--boardnav-mobile-border-bottom: 2px solid #d9c5b7;
--boardnav-mobile-font-size: 9pt;
--boardnav-mobile-button-text-color: #00f;
--topbar-font-size: 11pt;
--topbar-separator-color: none;
--topbar-desktop-link-text-color: #00e;
--topbar-desktop-link-text-color-hover: red;
--topbar-desktop-link-text-decoration: underline;
--topbar-desktop-link-text-decoration-hover: underline;
--topbar-mobile-background-color: #f0e0d6;
--topbar-mobile-border-bottom: 2px solid #d9c5b7;
--topbar-mobile-font-size: 9pt;
--topbar-mobile-button-text-color: #00f;
/* board title */
--board-title-font-size: 32px;
@@ -526,16 +526,16 @@
--board-address-text-color: #af0a0f;
/* board nav */
--boardnav-font-size: 11pt;
--boardnav-separator-color: none;
--boardnav-desktop-link-text-color: #34345c;
--boardnav-desktop-link-text-color-hover: #d00;
--boardnav-desktop-link-text-decoration: underline;
--boardnav-desktop-link-text-decoration-hover: underline;
--boardnav-mobile-background-color: #d6daf0;
--boardnav-mobile-border-bottom: 2px solid #b7c5d9;
--boardnav-mobile-font-size: 9pt;
--boardnav-mobile-button-text-color: #34345c;
--topbar-font-size: 11pt;
--topbar-separator-color: none;
--topbar-desktop-link-text-color: #34345c;
--topbar-desktop-link-text-color-hover: #d00;
--topbar-desktop-link-text-decoration: underline;
--topbar-desktop-link-text-decoration-hover: underline;
--topbar-mobile-background-color: #d6daf0;
--topbar-mobile-border-bottom: 2px solid #b7c5d9;
--topbar-mobile-font-size: 9pt;
--topbar-mobile-button-text-color: #34345c;
/* body */
--body-background-base-color: #eef2ff;
@@ -689,16 +689,16 @@
--body-font-size: 13px;
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #c5c8c6;
--boardnav-desktop-link-text-color: #81a2be;
--boardnav-desktop-link-text-color-hover: #5f89ac;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #1d1f21;
--boardnav-mobile-border-bottom: 2px solid #282a2e;
--boardnav-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: #81a2be;
--topbar-font-size: 9pt;
--topbar-separator-color: #c5c8c6;
--topbar-desktop-link-text-color: #81a2be;
--topbar-desktop-link-text-color-hover: #5f89ac;
--topbar-desktop-link-text-decoration: none;
--topbar-desktop-link-text-decoration-hover: none;
--topbar-mobile-background-color: #1d1f21;
--topbar-mobile-border-bottom: 2px solid #282a2e;
--topbar-mobile-font-size: 10px;
--topbar-mobile-button-text-color: #81a2be;
/* board title */
--board-title-font-size: 28px;
@@ -875,16 +875,16 @@
--body-font-size: 13px;
/* board nav */
--boardnav-font-size: 9pt;
--boardnav-separator-color: #333;
--boardnav-desktop-link-text-color: #f60;
--boardnav-desktop-link-text-color-hover: #f30;
--boardnav-desktop-link-text-decoration: none;
--boardnav-desktop-link-text-decoration-hover: none;
--boardnav-mobile-background-color: #ddd;
--boardnav-mobile-border-bottom: 2px solid #ccc;
--boardnav-mobile-font-size: 10px;
--boardnav-mobile-button-text-color: #f60;
--topbar-font-size: 9pt;
--topbar-separator-color: #333;
--topbar-desktop-link-text-color: #f60;
--topbar-desktop-link-text-color-hover: #f30;
--topbar-desktop-link-text-decoration: none;
--topbar-desktop-link-text-decoration-hover: none;
--topbar-mobile-background-color: #ddd;
--topbar-mobile-border-bottom: 2px solid #ccc;
--topbar-mobile-font-size: 10px;
--topbar-mobile-button-text-color: #f60;
/* board title */
--board-title-font-size: 28px;