CSS fixes for Swage by Inverle · Pull Request #7608 · FreshRSS/FreshRSS

Inverle · 2025-05-23T18:11:00Z

Fixes for Swage
- Buttons not showing correctly [Bug] Sort button with Swage disappears on small screen #7465
- Dropdown placement (some dropdowns couldn't fit in viewport)
- Icons not appearing in some places due to color i.e. label management and subscription management page
- Made .form-group and button inside search dropdown hover colors slightly darker, for better visibility
- Nav menu style improvements on mobile
  - Smaller if not on main page
  - Align settings icon on configuration pages to the right
  - Support nav menu for feed statistics page
- Text alignment in search dropdown
- Ensure input, select, textarea don't overflow the page
- Login link placement in anonymous view
- Other fixes for
  - Add via bookmarklet page
  - About page
  - Shared HTML query page
  - Register page
- Text visibility for debug log
Provide classes layout.phtml within <html>:
- logged_in if applicable
- controller_$NAME if applicable
- file_$NAME if applicable
Some other fixes

Moved to #7616

the PR is still dependent on these changes, and isn't complete without them

~~Named some elements with IDs in nav_menu.phtml to make them easier selectable in Swage~~
~~Fixes for frss.css~~
- ~~It wasn't possible to scroll fully to the bottom in aside menu and configure menu on mobile~~
- ~~Align text on expandable sections to the left on mobile~~
- ~~Show not-allowed cursor on disabled buttons instead of a pointer~~

Tested on Chrome, Firefox and GNOME Web

Inverle · 2025-05-23T18:32:04Z

QuickCollapse button for example is still broken though, but only on mobile

Alkarex · 2025-05-23T20:25:31Z

For Swage, the changes need to be done in https://github.com/FreshRSS/FreshRSS/blob/edge/p/themes/Swage/swage.scss
and then run:

sass swage.scss:swage.css

As a side note, I would like to get rid of SCSS at some point to use only standard CSS, using CSS nesting. It should be possible to make an automatic conversion from our current SCSS files used by some of our themes. Help welcome.

Inverle · 2025-05-23T23:33:59Z

make dropdowns full width on mobile

turns out I didn't fix them correctly

app/layout/nav_menu.phtml

math-GH · 2025-05-24T08:18:42Z

p/themes/Swage/swage.css

-	--color-text-light: #fcfcfc;
-	--color-text-light-darker: #969696;
-	--color-text-dark: #181621;
-	--color-text-nav: rgb(0, 71.6947368421, 139);
-	--color-text-aside: #22303d;


Please check the text indentation and respect the given.

I'm not sure why that happened

math-GH · 2025-05-24T08:20:59Z

p/themes/Swage/swage.css

+  --color-text-shadow-light: #f5f3f3;
+  --color-box-shadow-light: rgb(221.8181818182, 215.1818181818, 215.1818181818);
+  --color-border-light: #f5f3f3;
+  --color-border-light-darker: rgb(221.8181818182, 215.1818181818, 215.1818181818);
+  --color-border-grey: #e3e3e3;


Could you please give examples why you change so many colors?
Would it be possible to have cleaner numbers instead of having 10 positions after decimal point?

I think that is due to the current SASS default conversion when running sass swage.scss:swage.css. It may require an option to the command line. Suggestion welcome

By the way, as written above:

As a side note, I would like to get rid of SCSS at some point to use only standard CSS, using CSS nesting. It should be possible to make an automatic conversion from our current SCSS files used by some of our themes. Help welcome.

which would also solve such issues

Yes, it is due to SASS, I changed one color variable inside the .scss file, and that changed more colors.
It may be enough to just change the color --color-background-light in .form-group:hover, where I specifically need it:

FreshRSS/p/themes/Swage/swage.scss

Lines 235 to 243 in 37fa681

.form-group {

padding: 5px;

border: 1px solid transparent;

&:hover {

background-color: var(--color-background-light);

border: 1px solid var(--color-border-light);

}

I think it's fine as is though.

yes ,I agree to get rid of SCSS (it is a task outside this PR). But before we should check the compatibility with older devices and browser. CSS nesting is quite new

Yes for another PR.
CSS nesting is "Baseline 2023", so I think it is good enough to migrate some of our non-default themes. In case of problem, a user can fall back to another theme

[Feature] Get rid of SCSS - just use plain CSS #7611

p/themes/Swage/swage.css

Inverle · 2025-05-24T11:29:58Z

I broke the actualize button from appearing after moving changes from css to scss, so I'll have to fix that too.

Inverle · 2025-05-24T14:31:51Z

todo:

~~sign in button is incorrectly positioned on anonymous view~~
~~the search is hidden for some reason (on anonymous view)~~
~~about page is broken~~
~~add feed via bookmarklet page is broken~~

math-GH · 2025-05-24T20:12:10Z

to be honest: this PR blewed up to much more than just CSS fixes for Swage.

I would suggest to split the PR and keep the focus here on Swage

Inverle · 2025-05-25T10:30:55Z

to be honest: this PR blewed up to much more than just CSS fixes for Swage.

Yes.

Fixes for Swage
Fixes for frss.css that also affect Swage
Added necessary ids and class names in layout.phtml and nav_menu.phtml to use them in Swage
- also moved an if block in nav_menu.phtml

I would suggest to split the PR and keep the focus here on Swage

Which parts?

math-GH · 2025-05-25T10:59:14Z

This parts could be a separate PR because it will affect also the other themes or the other themes could be benefit from it too:

* Provide `logged_in` class within `<html>` if applicable, and a controller class

* Fixes for frss.css
  
  * It wasn't possible to scroll fully to the bottom in aside menu and configure menu on mobile
  * Align text on expandable sections to the left on mobile
  * Show `not-allowed` cursor on disabled buttons instead of a `pointer`

* Some other fixes

* Made more navigation buttons accessible within anonymous view

Inverle · 2025-05-25T14:00:59Z

Provide logged_in class within <html> if applicable, and a controller class

It doesn't look like any other themes aside from Swage can benefit from those changes

Fixes for frss.css

I guess this does affect all themes, not just Swage

Some other fixes

Those are just for Swage (adding borders, margins and paddings in some places)

Made more navigation buttons accessible within anonymous view

Yes, this part would make sense, but I will also make the user queries dropdown visible (I haven't made it visible yet, I'll have to also hide the bookmark current query button inside the user queries dropdown)

Before:

After (still have to make user queries visible):

Inverle · 2025-05-25T15:57:35Z

Done #7616

Inverle · 2025-08-14T23:00:06Z

Anonymous view when more buttons were shown (mobile view)

Now:

A little empty

Inverle · 2025-08-15T11:01:45Z

I consider it ready but testing welcome

Alkarex · 2025-08-15T11:43:12Z

Yes, I would like to take time to look a bit closer to the changes in layout.phtml but would first like to release FreshRSS 1.27.0.
This PR can land in a minor 1.27.1 or whichever is the next release.

Inverle · 2025-08-15T14:30:11Z

Yes, I would like to take time to look a bit closer to the changes in layout.phtml

I did just find one issue, fixing it right now

Inverle · 2025-08-15T14:48:57Z

Resolves the same x dropdown-menu issue as in #7722 (tested with darkMode field from user config)

Inverle · 2025-08-15T16:02:01Z

What's the specific concern with layout.phtml?
@Alkarex

math-GH · 2025-08-28T21:23:20Z

It looks now ok for me.

Alkarex · 2025-09-01T21:45:15Z

The SCSS annoyances will vanish when we get to implement:

[Feature] Get rid of SCSS - just use plain CSS #7611

CSS fixes for Swage + some in frss.css

14b0d2c

Inverle mentioned this pull request May 23, 2025

[Bug] Sort button with Swage disappears on small screen #7465

Closed

Alkarex added this to the 1.27.0 milestone May 23, 2025

Alkarex linked an issue May 23, 2025 that may be closed by this pull request

[Bug] Sort button with Swage disappears on small screen #7465

Closed

Alkarex added UI 🎨 User Interfaces Theme 🖌 labels May 23, 2025

Alkarex modified the milestones: 1.27.0, 1.26.3 May 23, 2025

Use SASS and make dropdowns full width on mobile

37fa681

Merge branch 'edge' into swage-css-fixes

b11a55d

math-GH requested changes May 24, 2025

View reviewed changes

app/layout/nav_menu.phtml Outdated Show resolved Hide resolved

math-GH requested changes May 24, 2025

View reviewed changes

Fixes and suggested changes

3c5181f

Inverle requested a review from math-GH May 24, 2025 12:56

Inverle added 3 commits May 24, 2025 20:41

Further fixes

a4eb3ef

Further fixes v2

823bcfa

make fix-all

b12e221

Inverle mentioned this pull request May 25, 2025

Fix remove last share #7613

Merged

Inverle mentioned this pull request May 25, 2025

Fixes for frss.css #7616

Merged

Inverle changed the title ~~CSS fixes for Swage + some in frss.css~~ CSS fixes for Swage May 25, 2025

More fixes

927c4fe

Inverle added 2 commits August 15, 2025 01:23

Fix login button in anonymous view

19ef3c3

stylelint fix

6ad231e

Inverle marked this pull request as ready for review August 14, 2025 23:30

Merge branch 'edge' into swage-css-fixes

cdafb4a

Alkarex modified the milestones: 1.27.0, 1.28.0 Aug 15, 2025

Make header UI consistent on bookmarklet page

d73ba66

Remove whitespace from classes

e462e08

Inverle added 2 commits August 15, 2025 17:43

Simplify giant selector for header style

586a5e0

Remove leftover moved CSS

76e2f56

Merge branch 'edge' into swage-css-fixes

d32fd92

math-GH approved these changes Aug 28, 2025

View reviewed changes

Inverle requested a review from Alkarex August 29, 2025 06:17

Inverle mentioned this pull request Aug 30, 2025

fix: Mapco/Ansum theme: read all button in mobile view #7873

Merged

Alkarex added 2 commits September 1, 2025 23:41

Minor whitespace

aa45225

Merge branch 'edge' into pr/Inverle/7608

397aa0c

Alkarex approved these changes Sep 1, 2025

View reviewed changes

Alkarex merged commit 335adda into FreshRSS:edge Sep 1, 2025
1 check passed

Inverle deleted the swage-css-fixes branch September 2, 2025 04:48

Alkarex modified the milestones: 1.28.0, 1.27.1 Sep 2, 2025

	.form-group {
	padding: 5px;
	border: 1px solid transparent;

	&:hover {
	background-color: var(--color-background-light);
	border: 1px solid var(--color-border-light);
	}

Uh oh!

Conversation

Inverle commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Moved to #7616

the PR is still dependent on these changes, and isn't complete without them

Uh oh!

Inverle commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Alkarex commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Inverle commented May 23, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Inverle commented May 24, 2025

Uh oh!

Inverle commented May 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

math-GH commented May 24, 2025

Uh oh!

Inverle commented May 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

math-GH commented May 25, 2025

Uh oh!

Inverle commented May 25, 2025

Uh oh!

Inverle commented May 25, 2025

Uh oh!

Inverle commented Aug 14, 2025

Uh oh!

Inverle commented Aug 15, 2025

Uh oh!

Alkarex commented Aug 15, 2025

Uh oh!

Inverle commented Aug 15, 2025

Uh oh!

Inverle commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Inverle commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

math-GH commented Aug 28, 2025

Uh oh!

Alkarex commented Sep 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Inverle commented May 23, 2025 •

edited

Loading

Inverle commented May 23, 2025 •

edited

Loading

Alkarex commented May 23, 2025 •

edited

Loading

Inverle commented May 24, 2025 •

edited

Loading

Inverle commented May 25, 2025 •

edited

Loading

Inverle commented Aug 15, 2025 •

edited

Loading

Inverle commented Aug 15, 2025 •

edited

Loading