Преглед изворни кода

refactor(themes): centralize sidebar width via --width-aside token (#8761)

## Summary

`--width-aside` already existed in `base-theme/frss.css` but only as a fallback inside the narrow-viewport rule from #8749. Desktop `.aside`, `#nav_entries`, `.reader .aside.visible`, and `.header > .item.title` hardcoded `300px` independently. This PR makes `--width-aside` the canonical token for the navigation drawer / left column width, so theme overrides apply everywhere consistently.

## Changes

`p/themes/base-theme/frss.css`:
- Define `--width-aside: 300px` in `:root`.
- `.aside`, `#nav_entries`, `.reader .aside.visible`, `.header > .item.title`: replace hardcoded `300px` with `var(--width-aside)`.
- Narrow-viewport `.aside.visible`: drop the now-redundant `320px` fallback in `min(...)`.

`p/themes/Swage/swage.css`:
- Remove the now-redundant `width: var(--width-aside)` overrides on `.aside`, `#nav_entries`, and `.header > .item.title` (inherited from base now). Swage's `--width-aside: 231px` declaration stays in place, so `#nav_entries`, the header `.title` block, and the reader-view sidebar now resolve to 231 via the token (previously stuck at 300 from base hardcodes), aligning them with Swage's other column elements.

RTL mirrors regenerated via `npm run rtlcss`.

## Why 300px

300px is the existing FreshRSS desktop sidebar value, so default themes see no visible change. The narrow-viewport cap previously used 320 as a fallback, but on actual phones the `calc(100vw - 56px)` cap dominates, so the change has near-zero practical effect on phone UX. Tablet and narrow-desktop sidebars become slightly narrower, more in line with typical desktop conventions.

## Tested

- Origine, Flat, Swage at desktop widths
- Origine and Swage at narrow viewports: sidebar slide, open, close
- Reader view in Origine and Swage
- Header title block: Swage 231, default themes 300

Co-authored-by: Bjørn A. Andersen <polybjorn@users.noreply.github.com>
polybjorn пре 2 недеља
родитељ
комит
80a93a994f

+ 0 - 3
p/themes/Swage/swage.css

@@ -758,7 +758,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 		vertical-align: middle;
 
 		&.title {
-			width: var(--width-aside);
 			position: absolute;
 			text-align: center;
 
@@ -812,7 +811,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 .aside {
 	background-color: var(--color-background-aside);
 	padding-top: 2.5rem;
-	width: var(--width-aside);
 
 	&.aside_feed {
 		.tree {
@@ -1124,7 +1122,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 }
 
 #nav_entries {
-	width: var(--width-aside);
 	background-color: var(--color-background-aside);
 }
 

+ 0 - 3
p/themes/Swage/swage.rtl.css

@@ -758,7 +758,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 		vertical-align: middle;
 
 		&.title {
-			width: var(--width-aside);
 			position: absolute;
 			text-align: center;
 
@@ -812,7 +811,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 .aside {
 	background-color: var(--color-background-aside);
 	padding-top: 2.5rem;
-	width: var(--width-aside);
 
 	&.aside_feed {
 		.tree {
@@ -1124,7 +1122,6 @@ main.post .drop-section li.item.feed a:hover .icon {
 }
 
 #nav_entries {
-	width: var(--width-aside);
 	background-color: var(--color-background-aside);
 }
 

+ 8 - 6
p/themes/base-theme/frss.css

@@ -44,6 +44,8 @@
 	--frss-padding-flux-items: 0.75rem;
 	--frss-padding-top-bottom: 0.5rem;
 
+	--width-aside: 300px;
+
 	line-height: 1.5;
 }
 
@@ -1280,7 +1282,7 @@ li.drag-hover {
 }
 
 .header > .item.title {
-	width: 300px;
+	width: var(--width-aside);
 	text-align: center;
 	white-space: nowrap;
 }
@@ -1328,7 +1330,7 @@ input[type="search"] {
 
 .aside {
 	display: table-cell;
-	width: 300px;
+	width: var(--width-aside);
 	vertical-align: top;
 }
 
@@ -1935,7 +1937,7 @@ a.website:hover .favicon {
 	display: flex;
 	position: fixed;
 	bottom: 0; left: 0;
-	width: 300px;
+	width: var(--width-aside);
 	padding-bottom: env(safe-area-inset-bottom);
 	z-index: 50;
 }
@@ -2414,7 +2416,7 @@ html.slider-active {
 
 .reader .aside.visible {
 	display: table-cell;
-	width: 300px;
+	width: var(--width-aside);
 }
 
 .reader .flux {
@@ -2499,9 +2501,9 @@ html.slider-active {
 		display: none;
 	}
 
-	/* Material navigation drawer: theme override or 320px cap, with 56px touch-peek */
+	/* Material navigation drawer: theme width, capped at viewport minus 56px touch-peek */
 	.aside.visible {
-		width: min(var(--width-aside, 320px), calc(100vw - 56px));
+		width: min(var(--width-aside), calc(100vw - 56px));
 		height: 100vh;
 		box-shadow: 3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}

+ 8 - 6
p/themes/base-theme/frss.rtl.css

@@ -44,6 +44,8 @@
 	--frss-padding-flux-items: 0.75rem;
 	--frss-padding-top-bottom: 0.5rem;
 
+	--width-aside: 300px;
+
 	line-height: 1.5;
 }
 
@@ -1280,7 +1282,7 @@ li.drag-hover {
 }
 
 .header > .item.title {
-	width: 300px;
+	width: var(--width-aside);
 	text-align: center;
 	white-space: nowrap;
 }
@@ -1328,7 +1330,7 @@ input[type="search"] {
 
 .aside {
 	display: table-cell;
-	width: 300px;
+	width: var(--width-aside);
 	vertical-align: top;
 }
 
@@ -1935,7 +1937,7 @@ a.website:hover .favicon {
 	display: flex;
 	position: fixed;
 	bottom: 0; right: 0;
-	width: 300px;
+	width: var(--width-aside);
 	padding-bottom: env(safe-area-inset-bottom);
 	z-index: 50;
 }
@@ -2414,7 +2416,7 @@ html.slider-active {
 
 .reader .aside.visible {
 	display: table-cell;
-	width: 300px;
+	width: var(--width-aside);
 }
 
 .reader .flux {
@@ -2499,9 +2501,9 @@ html.slider-active {
 		display: none;
 	}
 
-	/* Material navigation drawer: theme override or 320px cap, with 56px touch-peek */
+	/* Material navigation drawer: theme width, capped at viewport minus 56px touch-peek */
 	.aside.visible {
-		width: min(var(--width-aside, 320px), calc(100vw - 56px));
+		width: min(var(--width-aside), calc(100vw - 56px));
 		height: 100vh;
 		box-shadow: -3px 3px 5px var(--frss-box-shadow-color-transparent);
 	}