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

add desktop topnav, update themes

Browse Source
This commit is contained in:
plebeius.eth
2024-03-18 15:04:30 +01:00
parent 7f8a996eec
commit ec20767e13
8 changed files with 191 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.module.css
+3 -1
View File
@@ -1,6 +1,8 @@
.app {
background: var(--background-base-color) var(--background-pattern-image) top center repeat-x;
font: 13px/1.231 arial, helvetica, sans-serif;
font-size: var(--body-font-size);
font-family: var(--body-font-family);
color: var(--body-font-color);
z-index: 1;
min-height: 100%;
overflow-y: hidden;
src/app.tsx
+14 -11
View File
@@ -1,10 +1,11 @@
import { useEffect } from 'react';
import { Route, Routes, useLocation } from 'react-router-dom';
import { Outlet, Route, Routes, useLocation } from 'react-router-dom';
import Home from './views/home';
import styles from './app.module.css';
import useTheme from './hooks/use-theme';
import Subplebbit from './views/subplebbit';
import { isHomeView } from './lib/utils/view-utils';
import TopNav from './components/topnav';
const App = () => {
const [theme] = useTheme();
@@ -23,21 +24,23 @@ const App = () => {
// </>
// );
// const boardLayout = (
// <>
// <TopNav />
// <ImageBanner />
// <PostForm />
// <Stats />
// <Outlet />
// </>
// );
const boardLayout = (
<>
<TopNav />
{/* <ImageBanner />
<PostForm />
<Stats /> */}
<Outlet />
</>
);
return (
<div className={`${styles.app} ${isInHomeView ? 'yotsuba' : theme}`}>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
<Route element={boardLayout}>
<Route path='/p/:subplebbitAddress' element={<Subplebbit />} />
</Route>
</Routes>
</div>
);
src/components/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './topnav';
src/components/topnav.module.css
+27
View File
@@ -0,0 +1,27 @@
.boardNavDesktop {
padding: 5px;
font-size: var(--topnav-font-size);
}
.boardNavDesktop a {
color: var(--internal-link-text-color);
text-decoration: var(--internal-link-text-decoration);
}
.boardNavDesktop a:hover {
color: var(--internal-link-text-color-hover);
text-decoration: var(--internal-link-text-decoration-hover);
}
@media (max-width: 640px) {
.boardNavDesktop {
display: none;
}
}
@media (min-width: 640px) {
.boardNavMobile {
display: none;
}
}
src/components/topnav.tsx
+42
View File
@@ -0,0 +1,42 @@
import { Link } from 'react-router-dom';
import useDefaultSubplebbits from '../hooks/use-default-subplebbits';
import styles from './topnav.module.css';
const BoardNavDesktop = ({ subplebbits }: { subplebbits: any }) => {
return (
<div className={styles.boardNavDesktop}>
[
{subplebbits.map((subplebbit: any, index: number) => (
<span key={subplebbit.address}>
{index === 0 ? null : ' '}
<Link to={`/p/${subplebbit.address}`} title={subplebbit.title || ''}>
{subplebbit.address.includes('.') ? subplebbit.address : subplebbit.title || subplebbit.address.slice(0, 10).concat('...')}
</Link>
{index !== subplebbits.length - 1 ? ' /' : null}
</span>
))}
]
</div>
);
};
const BoardNavMobile = ({ subplebbits }: { subplebbits: any }) => {
return (
<div className={styles.boardNavMobile}>
<h1>BoardNavMobile</h1>
</div>
);
};
const TopNav = () => {
const defaultSubplebbits = useDefaultSubplebbits();
return (
<>
<BoardNavDesktop subplebbits={defaultSubplebbits} />
<BoardNavMobile subplebbits={defaultSubplebbits} />
</>
);
};
export default TopNav;
src/themes.css
+102 -17
View File
@@ -1,57 +1,142 @@
:root .yotsuba {
--background-base-color: #ffe;
--background-pattern-image: url("/public/assets/background-fade.png");
--background-text-color: #fff;
--body-font-color: maroon;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
--box-border-color: #800;
--color1: #800;
--color2: #fca;
--color3: #fed;
--text-color: maroon;
--text-color-on-color1: #fff;
--text-color-on-color2: #800;
--text-color-on-color2-hover: #c63;
--text-color-standard: #000;
--text-color-inverse: #fff;
--background-text-color: #fff;
--external-link-text-color: #00f;
--external-link-text-decoration: underline;
--internal-link-text-color: #800;
--internal-link-text-color-hover: #e00;
--internal-link-text-decoration: none;
--internal-link-text-decoration-hover: underline;
--box-border-color: #800;
--text-color: maroon;
--text-color-on-color1: #fff;
--text-color-on-color2: #800;
--text-color-on-color2-hover: #c63;
--text-color-standard: #000;
--text-color-inverse: #fff;
--topnav-font-size: 9pt;
--topnav-separator-color: #b86;
}
:root .yotsuba-b {
--background-base-color: #eef2ff;
--background-pattern-image: url("/public/assets/background-fade-blue.png");
--background-text-color: #fff;
--body-font-color: #000;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
--box-border-color: #000;
--color1: #98e;
--color2: #98e;
--color3: #eef2ff;
--text-color: #000;
--text-color-on-color1: #000;
--text-color-on-color2: #000;
--text-color-on-color2-hover: #fff;
--text-color-standard: #000;
--text-color-inverse: #fff;
--background-text-color: #fff;
--external-link-text-color: #00f;
--external-link-text-decoration: underline;
--internal-link-text-color: #34345c;
--internal-link-text-color-hover: #d00;
--internal-link-text-decoration: none;
--internal-link-text-decoration-hover: underline;
--text-color: #000;
--text-color-on-color1: #000;
--text-color-on-color2: #000;
--text-color-on-color2-hover: #fff;
--text-color-standard: #000;
--text-color-inverse: #fff;
--topnav-font-size: 9pt;
--topnav-separator-color: #89a;
}
:root .futaba {
--background-base-color: #ffe;
--background-pattern-image: none;
--background-text-color: #fff;
--body-font-color: maroon;
--body-font-family: times new roman, serif;
--body-font-size: 12pt;
--box-border-color: #800;
--color1: #800;
--color2: #fca;
--color3: #fed;
--external-link-text-color: #00f;
--external-link-text-decoration: underline;
--internal-link-text-color: #00e;
--internal-link-text-color-hover: #e00;
--internal-link-text-decoration: underline;
--internal-link-text-decoration-hover: underline;
--text-color: maroon;
--text-color-on-color1: #fff;
--text-color-on-color2: #800;
--text-color-on-color2-hover: #c63;
--text-color-standard: #000;
--text-color-inverse: #fff;
--topnav-font-size: 11pt;
--topnav-separator-color: #89a;
}
:root .burichan {
--background-base-color: #eef2ff;
--background-pattern-image: none;
--background-text-color: #fff;
--body-font-color: #000;
--body-font-family: times new roman, serif;
--body-font-size: 12pt;
--box-border-color: #000;
--color1: #98e;
--color2: #98e;
--color3: #eef2ff;
--external-link-text-color: #00f;
--external-link-text-decoration: underline;
--internal-link-text-color: #34345c;
--internal-link-text-color-hover: #d00;
--internal-link-text-decoration: underline;
--internal-link-text-decoration-hover: underline;
--text-color: #000;
--text-color-on-color1: #000;
--text-color-on-color2: #000;
--text-color-on-color2-hover: #fff;
--text-color-standard: #000;
--text-color-inverse: #fff;
--topnav-font-size: 11pt;
--topnav-separator-color: #89a;
}
:root .tomorrow {
--background-base-color: #1d1f21;
--background-pattern-image: none;
--background-text-color: #282a2e;
--body-font-color: #c5c8c6;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
--box-border-color: rgb(45, 47, 51);
--color1: rgb(33, 35, 38);
--color2: rgb(33, 35, 38);
--internal-link-text-color: #81a2be;
--internal-link-text-color-hover: #5f89ac;
--text-color: #c5c8c6;
--text-color-standard: #c5c8c6;
--text-color-on-color1: #c5c8c6;
--text-color-on-color2: #c5c8c6;
--text-color-on-color3: #c5c8c6;
--background-text-color: #282a2e;
--box-border-color: rgb(45, 47, 51);
--topnav-font-size: 9pt;
--topnav-separator-color: #89a;
}
:root .photon {
--background-base-color: #eee;
--background-pattern-image: none;
--body-font-color: #333;
--body-font-family: arial, helvetica, sans-serif;
--body-font-size: 10pt;
--internal-link-text-color: #f60;
--internal-link-text-color-hover: #f30;
--text-color: #333;
--topnav-font-size: 9pt;
--topnav-separator-color: #333;
}
src/views/home/home.module.css
+1 -1
View File
@@ -147,7 +147,7 @@
text-transform: capitalize;
}
@media (max-width: 768px) {
@media (max-width: 640px) {
.content {
min-width: 0;
width: auto;
src/views/subplebbit/subplebbit.module.css
+1 -1
View File
@@ -7,4 +7,4 @@
.debug select {
margin: 2px;
}
}