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

refactor(home): make boards list layout identical to 4chan

Browse Source
This commit is contained in:
plebeius
2025-11-05 20:14:11 +01:00
parent 8de4fba9ed
commit 43a46be904
2 changed files with 425 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/boards-list/boards-list.tsx
+410 -110
View File
@@ -97,173 +97,473 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<BoardsFilterModal />
</div>
<div className={`${styles.boxContent} ${styles.boardsContent}`}>
{/* Japanese Culture */}
{showJapaneseCulture && (
{/* Column 1: Japanese Culture + Video Games */}
{(showJapaneseCulture || showVideoGames) && (
<div className={styles.boardsColumn}>
<h3>Japanese Culture</h3>
<ul>
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Anime & Manga
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Anime/Cute
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Anime/Wallpapers
</Link>
</li>
</ul>
{/* Japanese Culture */}
{showJapaneseCulture && (
<>
<h3>Japanese Culture</h3>
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Anime & Manga
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Anime/Cute
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Anime/Wallpapers
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Mecha
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Cosplay & EGL
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Cute/Male
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Flash
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Transportation
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Otaku Culture
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Virtual YouTubers
</Link>
</li>
</ul>
</>
)}
{/* Video Games */}
{showVideoGames && (
<>
<h3>Video Games</h3>
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Game Generals
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Games/Multiplayer
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Games/Mobile
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Pokémon
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Retro Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Games/RPG
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Games/Strategy
</Link>
</li>
</ul>
</>
)}
</div>
)}
{/* Video Games */}
{showVideoGames && (
<div className={styles.boardsColumn}>
<h3>Video Games</h3>
<ul>
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Video Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Video Game Generals
</Link>
</li>
</ul>
</div>
)}
{/* Interests */}
{/* Column 2: Interests */}
{showInterests && (
<div className={styles.boardsColumn}>
<h3>Interests</h3>
<ul>
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Technology
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Comics & Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Technology
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Television & Film
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Weapons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Auto
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Animals & Nature
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Traditional Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Sports
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Extreme Sports
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Professional Wrestling
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Science & Math
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
History & Humanities
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
International
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Outdoors
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Toys
</Link>
</li>
</ul>
</div>
)}
{/* Creative */}
{/* Column 3: Creative */}
{showCreative && (
<div className={styles.boardsColumn}>
<h3>Creative</h3>
<ul>
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Oekaki
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Papercraft & Origami
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Photography
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Food & Cooking
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Artwork/Critique
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Wallpapers/General
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Literature
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Music
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Fashion
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
3DCG
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Graphic Design
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Do-It-Yourself
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Worksafe GIF
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Quests
</Link>
</li>
</ul>
</div>
)}
{/* Other - ACTIVE: biz */}
{showOther && (
{/* Column 4: Other + Misc. */}
{(showOther || showMisc) && (
<div className={styles.boardsColumn}>
<h3>Other</h3>
<ul>
{bizAddress && (
<li>
<Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}>
Business & Finance
</Link>
</li>
)}
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Travel
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Fitness
</Link>
</li>
</ul>
{/* Other */}
{showOther && (
<>
<h3>Other</h3>
<ul>
{bizAddress ? (
<li>
<Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}>
Business & Finance
</Link>
</li>
) : (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Business & Finance
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Travel
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Fitness
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Paranormal
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Advice
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
LGBT
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Pony
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Current News
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Worksafe Requests
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Very Important Posts
</Link>
</li>
</ul>
</>
)}
{/* Misc. (NSFW) */}
{showMisc && (
<>
<h3>Misc.</h3>
<NSFWBadge />
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
ROBOT9001
</Link>
</li>
{polAddress ? (
<li>
<Link to={getBoardLink(polAddress)} onClick={(e) => handleLinkClick(e, polAddress)}>
Politically Incorrect
</Link>
</li>
) : (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Politically Incorrect
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
International/Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Cams & Meetups
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Shit 4chan Says
</Link>
</li>
</ul>
</>
)}
</div>
)}
{/* Misc. (NSFW) - ACTIVE: pol */}
{showMisc && (
<div className={styles.boardsColumn}>
<h3>Misc.</h3>
<NSFWBadge />
<ul>
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
ROBOT9001
</Link>
</li>
{polAddress && (
<li>
<Link to={getBoardLink(polAddress)} onClick={(e) => handleLinkClick(e, polAddress)}>
Politically Incorrect
</Link>
</li>
)}
</ul>
</div>
)}
{/* Adult (NSFW) */}
{/* Column 5: Adult (NSFW) */}
{showAdult && (
<div className={styles.boardsColumn}>
<h3>Adult</h3>
<NSFWBadge />
<ul>
{/* Placeholder boards */}
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Sexy Beautiful Women
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()}>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Hardcore
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Handsome Men
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Hentai
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Ecchi
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Yuri
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Hentai/Alternative
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Yaoi
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Torrents
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
High Resolution
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Adult GIF
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Adult Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Adult Requests
</Link>
</li>
</ul>
</div>
)}
src/views/home/home.module.css
+15 -8
View File
@@ -247,18 +247,22 @@
}
.boardsContent {
display: flex;
flex-wrap: wrap;
gap: 20px;
display: block;
padding: 0.5em;
padding-top: 0.25em;
padding-bottom: 0;
}
.boardsContent::after {
content: "";
display: table;
clear: both;
}
.boardsColumn {
flex: 1;
min-width: 150px;
vertical-align: top;
display: block;
float: left;
width: 145px;
}
.boardsColumn h3:not(.nsfwBadge) {
@@ -293,13 +297,12 @@
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 15px;
}
.boardsColumn li {
margin: 0;
padding: 0;
line-height: 1.5em;
line-height: 130%;
}
.boardsColumn a {
@@ -312,6 +315,10 @@
text-decoration: underline;
}
.boardsColumn a.placeholder {
text-decoration: line-through;
}
@media (max-width: 640px) {
.content {
min-width: 0;