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
+342 -42
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}`}>
{/* Column 1: Japanese Culture + Video Games */}
{(showJapaneseCulture || showVideoGames) && (
<div className={styles.boardsColumn}>
{/* Japanese Culture */} {/* Japanese Culture */}
{showJapaneseCulture && ( {showJapaneseCulture && (
<div className={styles.boardsColumn}> <>
<h3>Japanese Culture</h3> <h3>Japanese Culture</h3>
<ul> <ul>
{/* Placeholder boards */}
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Anime & Manga Anime & Manga
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Anime/Cute Anime/Cute
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Anime/Wallpapers Anime/Wallpapers
</Link> </Link>
</li> </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> </ul>
</div> </>
)} )}
{/* Video Games */} {/* Video Games */}
{showVideoGames && ( {showVideoGames && (
<div className={styles.boardsColumn}> <>
<h3>Video Games</h3> <h3>Video Games</h3>
<ul> <ul>
{/* Placeholder boards */}
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Games Video Games
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Video Game Generals Video Game Generals
</Link> </Link>
</li> </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> </ul>
</>
)}
</div> </div>
)} )}
{/* Interests */} {/* Column 2: 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}>
{/* Other */}
{showOther && (
<>
<h3>Other</h3> <h3>Other</h3>
<ul> <ul>
{bizAddress && ( {bizAddress ? (
<li> <li>
<Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}> <Link to={getBoardLink(bizAddress)} onClick={(e) => handleLinkClick(e, bizAddress)}>
Business & Finance Business & Finance
</Link> </Link>
</li> </li>
)} ) : (
{/* Placeholder boards */}
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Business & Finance
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Travel Travel
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Fitness Fitness
</Link> </Link>
</li> </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> </ul>
</div> </>
)} )}
{/* Misc. (NSFW) - ACTIVE: pol */} {/* Misc. (NSFW) */}
{showMisc && ( {showMisc && (
<div className={styles.boardsColumn}> <>
<h3>Misc.</h3> <h3>Misc.</h3>
<NSFWBadge /> <NSFWBadge />
<ul> <ul>
{/* Placeholder boards */}
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
Random Random
</Link> </Link>
</li> </li>
<li> <li>
<Link to='#' onClick={(e) => e.preventDefault()}> <Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
ROBOT9001 ROBOT9001
</Link> </Link>
</li> </li>
{polAddress && ( {polAddress ? (
<li> <li>
<Link to={getBoardLink(polAddress)} onClick={(e) => handleLinkClick(e, polAddress)}> <Link to={getBoardLink(polAddress)} onClick={(e) => handleLinkClick(e, polAddress)}>
Politically Incorrect Politically Incorrect
</Link> </Link>
</li> </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> </ul>
</>
)}
</div> </div>
)} )}
{/* Adult (NSFW) */} {/* Column 5: 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;