cottongin/reddit-tweaks-ffe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update card layout spec after adversarial review

Browse Source 
- Move isDarkMode/getColorPrefix to settings.js as shared infra
- Add align-items: flex-start to #siteTable flex container
- Add width: 100% to .rt-card for flex-start compatibility
- Clarify scope: old.reddit.com only

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
cottongin
2026-08-26 20:55:08 -04:00
parent 6c017f688d
commit cab7c61c07
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/superpowers/specs/2026-08-26-card-layout-design.md
View File

@@ -9,6 +9,8 @@ Replace old Reddit's flat post list with individual cards styled to match shadcn
Cards are a separate toggle from badges. Either can be enabled independently.
**Scope:** old.reddit.com only. New Reddit (www.reddit.com) is out of scope for this extension.
## Approach
Class injection + scoped CSS overrides. Each `.thing.link` receives an `rt-card` class via JS. All card styling is scoped under `.rt-card` in CSS. The existing DOM tree stays intact — no element relocation or wrapper injection. The internal float-based layout is overridden to flexbox within the `.rt-card` scope.
@@ -107,6 +109,7 @@ The card overrides this to flexbox:
display: flex;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
overflow: hidden;
}
@@ -189,11 +192,14 @@ The `#siteTable` (parent of all `.thing.link` elements) is converted to a flex c
html.rt-card-enabled #siteTable {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--rt-card-gap, 1rem);
}
```
Non-post children of `#siteTable` (ads, "next page" links, clearfix divs) participate in the flex flow. Ads and clearfix divs that add unwanted gaps are hidden:
`align-items: flex-start` preserves block-layout behavior — non-post children (pagination links, RES markers, empty-state messages) keep their intrinsic width instead of stretching to fill the container. Posts (`.rt-card`) are set to full width explicitly.
Non-post children of `#siteTable` (ads, "next page" links, clearfix divs) participate in the flex flow. Clearfix divs that add unwanted gaps are hidden:
```css
html.rt-card-enabled #siteTable > .clearleft {
@@ -229,7 +235,7 @@ html.rt-card-bg-shadcn.rt-dark .content[role="main"] {
| File | Change |
|---|---|
| `manifest.json` | Add `content/styles/cards.css` to CSS array, add `content/tweaks/cards.js` to JS array (before `main.js`) |
| `lib/settings.js` | Add `badgeLayout`, `cardLayout`, `cardBackground`, `cardGap` to `DEFAULTS` |
| `lib/settings.js` | Add `badgeLayout`, `cardLayout`, `cardBackground`, `cardGap` to `DEFAULTS`. Move `isDarkMode()` and `getColorPrefix()` here from `badges.js` as shared utilities. |
| `content/main.js` | Gate badge tweak behind `settings.badgeLayout`. Call `cardTweak.apply(settings)` when `settings.cardLayout` is true. Add `rt-badges-enabled` class only when badges are on. Wire `storage.onChanged` to update card settings live. |
| `content/styles/badges.css` | Change FOUC selectors from `html.rt-enabled` to `html.rt-badges-enabled` |
| `popup/popup.html` | Add "Card Layout" section with toggle, background dropdown, spacing dropdown. Add badge toggle to existing section. |
@@ -272,7 +278,9 @@ Cards and badges are fully independent:
### Dark Mode
The card tweak respects the same dark mode setting (`auto`/`light`/`dark`) as badges. The `rt-dark` class on the card container (already managed by `badges.js` for badge containers) is extended to also apply to the `<html>` element so card CSS can reference it. The `cards.js` module reads the dark mode state from the shared `badgeTweak.isDarkMode()` utility.
The card tweak respects the same dark mode setting (`auto`/`light`/`dark`) as badges. The `rt-dark` class is applied to the `<html>` element so both card and badge CSS can reference it.
`isDarkMode(settings)` and `getColorPrefix(settings)` are moved from `badges.js` into `settings.js` as shared infrastructure, exposed as `window.RedditTweaks.isDarkMode` and `window.RedditTweaks.getColorPrefix`. Both `badges.js`, `cards.js`, and `color-popover.js` reference these shared functions. This eliminates the card module's dependency on the badge module for dark mode detection.
---