From 43a46be904c89f33e5d66adbc48335ae9e99fadc Mon Sep 17 00:00:00 2001 From: plebeius Date: Wed, 5 Nov 2025 20:14:11 +0100 Subject: [PATCH] refactor(home): make boards list layout identical to 4chan --- src/views/home/boards-list/boards-list.tsx | 520 ++++++++++++++++----- src/views/home/home.module.css | 23 +- 2 files changed, 425 insertions(+), 118 deletions(-) diff --git a/src/views/home/boards-list/boards-list.tsx b/src/views/home/boards-list/boards-list.tsx index 6d4d634d..7a9b53ad 100644 --- a/src/views/home/boards-list/boards-list.tsx +++ b/src/views/home/boards-list/boards-list.tsx @@ -97,173 +97,473 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
- {/* Japanese Culture */} - {showJapaneseCulture && ( + {/* Column 1: Japanese Culture + Video Games */} + {(showJapaneseCulture || showVideoGames) && (
-

Japanese Culture

-
    - {/* Placeholder boards */} -
  • - e.preventDefault()}> - Anime & Manga - -
    • -
  • - e.preventDefault()}> - Anime/Cute - -
    • -
  • - e.preventDefault()}> - Anime/Wallpapers - -
    • -
+ {/* Japanese Culture */} + {showJapaneseCulture && ( + <> +

Japanese Culture

+
    +
  • + e.preventDefault()} className={styles.placeholder}> + Anime & Manga + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Anime/Cute + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Anime/Wallpapers + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Mecha + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Cosplay & EGL + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Cute/Male + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Flash + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Transportation + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Otaku Culture + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Virtual YouTubers + +
    • +
+ + )} + + {/* Video Games */} + {showVideoGames && ( + <> +

Video Games

+
    +
  • + e.preventDefault()} className={styles.placeholder}> + Video Games + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Video Game Generals + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Video Games/Multiplayer + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Video Games/Mobile + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Pokémon + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Retro Games + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Video Games/RPG + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Video Games/Strategy + +
    • +
+ + )}
)} - {/* Video Games */} - {showVideoGames && ( -
-

Video Games

-
    - {/* Placeholder boards */} -
  • - e.preventDefault()}> - Video Games - -
    • -
  • - e.preventDefault()}> - Video Game Generals - -
    • -
-
- )} - - {/* Interests */} + {/* Column 2: Interests */} {showInterests && (

Interests

    - {/* Placeholder boards */}
  • - e.preventDefault()}> - Technology - -
    • -
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> Comics & Cartoons
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> + Technology + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> Television & Film
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Weapons + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Auto + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Animals & Nature + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Traditional Games + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Sports + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Extreme Sports + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Professional Wrestling + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Science & Math + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + History & Humanities + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + International + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Outdoors + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Toys + +
)} - {/* Creative */} + {/* Column 3: Creative */} {showCreative && (

Creative

    - {/* Placeholder boards */}
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> + Oekaki + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Papercraft & Origami + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> Photography
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> + Food & Cooking + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Artwork/Critique + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Wallpapers/General + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> Literature
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> Music
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Fashion + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + 3DCG + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Graphic Design + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Do-It-Yourself + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Worksafe GIF + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Quests + +
)} - {/* Other - ACTIVE: biz */} - {showOther && ( + {/* Column 4: Other + Misc. */} + {(showOther || showMisc) && (
-

Other

-
    - {bizAddress && ( -
  • - handleLinkClick(e, bizAddress)}> - Business & Finance - -
    • - )} - {/* Placeholder boards */} -
  • - e.preventDefault()}> - Travel - -
    • -
  • - e.preventDefault()}> - Fitness - -
    • -
+ {/* Other */} + {showOther && ( + <> +

Other

+
    + {bizAddress ? ( +
  • + handleLinkClick(e, bizAddress)}> + Business & Finance + +
    • + ) : ( +
  • + e.preventDefault()} className={styles.placeholder}> + Business & Finance + +
    • + )} +
  • + e.preventDefault()} className={styles.placeholder}> + Travel + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Fitness + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Paranormal + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Advice + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + LGBT + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Pony + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Current News + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Worksafe Requests + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Very Important Posts + +
    • +
+ + )} + + {/* Misc. (NSFW) */} + {showMisc && ( + <> +

Misc.

+ +
    +
  • + e.preventDefault()} className={styles.placeholder}> + Random + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + ROBOT9001 + +
    • + {polAddress ? ( +
  • + handleLinkClick(e, polAddress)}> + Politically Incorrect + +
    • + ) : ( +
  • + e.preventDefault()} className={styles.placeholder}> + Politically Incorrect + +
    • + )} +
  • + e.preventDefault()} className={styles.placeholder}> + International/Random + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Cams & Meetups + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Shit 4chan Says + +
    • +
+ + )}
)} - {/* Misc. (NSFW) - ACTIVE: pol */} - {showMisc && ( -
-

Misc.

- -
    - {/* Placeholder boards */} -
  • - e.preventDefault()}> - Random - -
    • -
  • - e.preventDefault()}> - ROBOT9001 - -
    • - {polAddress && ( -
  • - handleLinkClick(e, polAddress)}> - Politically Incorrect - -
    • - )} -
-
- )} - - {/* Adult (NSFW) */} + {/* Column 5: Adult (NSFW) */} {showAdult && (

Adult

    - {/* Placeholder boards */}
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> Sexy Beautiful Women
  • - e.preventDefault()}> + e.preventDefault()} className={styles.placeholder}> Hardcore
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Handsome Men + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Hentai + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Ecchi + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Yuri + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Hentai/Alternative + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Yaoi + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Torrents + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + High Resolution + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Adult GIF + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Adult Cartoons + +
    • +
  • + e.preventDefault()} className={styles.placeholder}> + Adult Requests + +
)} diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css index 3c3b1541..9556507c 100644 --- a/src/views/home/home.module.css +++ b/src/views/home/home.module.css @@ -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;