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 /> <BoardsFilterModal />
</div> </div>
<div className={`${styles.boxContent} ${styles.boardsContent}`}> <div className={`${styles.boxContent} ${styles.boardsContent}`}>
{/* Japanese Culture */} {/* Column 1: Japanese Culture + Video Games */}
{showJapaneseCulture && ( {(showJapaneseCulture || showVideoGames) && (
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Japanese Culture</h3> {/* Japanese Culture */}
<ul> {showJapaneseCulture && (
{/* Placeholder boards */} <>
<li> <h3>Japanese Culture</h3>
<Link to='#' onClick={(e) => e.preventDefault()}> <ul>
Anime & Manga <li>
</Link> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
</li> Anime & Manga
<li> </Link>
<Link to='#' onClick={(e) => e.preventDefault()}> </li>
Anime/Cute <li>
</Link> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
</li> Anime/Cute
<li> </Link>
<Link to='#' onClick={(e) => e.preventDefault()}> </li>
Anime/Wallpapers <li>
</Link> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
</li> Anime/Wallpapers
</ul> </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> </div>
)} )}
{/* Video Games */} {/* Column 2: Interests */}
{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 */}
{showInterests && ( {showInterests && (
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Interests</h3> <h3>Interests</h3>
<ul> <ul>
{/* Placeholder boards */}
<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()}>
Comics & Cartoons Comics & Cartoons
</Link> </Link>
</li> </li>
<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 Television & Film
</Link> </Link>
</li> </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> </ul>
</div> </div>
)} )}
{/* Creative */} {/* Column 3: Creative */}
{showCreative && ( {showCreative && (
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Creative</h3> <h3>Creative</h3>
<ul> <ul>
{/* Placeholder boards */}
<li> <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 Photography
</Link> </Link>
</li> </li>
<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 Literature
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Music Music
</Link> </Link>
</li> </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> </ul>
</div> </div>
)} )}
{/* Other - ACTIVE: biz */} {/* Column 4: Other + Misc. */}
{showOther && ( {(showOther || showMisc) && (
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Other</h3> {/* Other */}
<ul> {showOther && (
{bizAddress && ( <>
<li> <h3>Other</h3>
<Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}> <ul>
Business & Finance {bizAddress ? (
</Link> <li>
</li> <Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}>
)} Business & Finance
{/* Placeholder boards */} </Link>
<li> </li>
<Link to='#' onClick={(e) => e.preventDefault()}> ) : (
Travel <li>
</Link> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
</li> Business & Finance
<li> </Link>
<Link to='#' onClick={(e) => e.preventDefault()}> </li>
Fitness )}
</Link> <li>
</li> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
</ul> 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> </div>
)} )}
{/* Misc. (NSFW) - ACTIVE: pol */} {/* Column 5: Adult (NSFW) */}
{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) */}
{showAdult && ( {showAdult && (
<div className={styles.boardsColumn}> <div className={styles.boardsColumn}>
<h3>Adult</h3> <h3>Adult</h3>
<NSFWBadge /> <NSFWBadge />
<ul> <ul>
{/* Placeholder boards */}
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Sexy Beautiful Women Sexy Beautiful Women
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Hardcore Hardcore
</Link> </Link>
</li> </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> </ul>
</div> </div>
)} )}
src/views/home/home.module.css
+15 -8
View File
@@ -247,18 +247,22 @@
} }
.boardsContent { .boardsContent {
display: flex; display: block;
flex-wrap: wrap;
gap: 20px;
padding: 0.5em; padding: 0.5em;
padding-top: 0.25em; padding-top: 0.25em;
padding-bottom: 0; padding-bottom: 0;
} }
.boardsContent::after {
content: "";
display: table;
clear: both;
}
.boardsColumn { .boardsColumn {
flex: 1; display: block;
min-width: 150px; float: left;
vertical-align: top; width: 145px;
} }
.boardsColumn h3:not(.nsfwBadge) { .boardsColumn h3:not(.nsfwBadge) {
@@ -293,13 +297,12 @@
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
margin-bottom: 15px;
} }
.boardsColumn li { .boardsColumn li {
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 1.5em; line-height: 130%;
} }
.boardsColumn a { .boardsColumn a {
@@ -312,6 +315,10 @@
text-decoration: underline; text-decoration: underline;
} }
.boardsColumn a.placeholder {
text-decoration: line-through;
}
@media (max-width: 640px) { @media (max-width: 640px) {
.content { .content {
min-width: 0; min-width: 0;