Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Swage theme cleanup #4493

Merged
merged 61 commits into from
Aug 18, 2022
Merged

Swage theme cleanup #4493

merged 61 commits into from
Aug 18, 2022

Conversation

math-GH
Copy link
Contributor

@math-GH math-GH commented Aug 7, 2022

Login button, login screen, register form

before

grafik

grafik

grafik

After

much more beautiful. The login button is styled. Every page has the blue header banner. The form is clear styled now.

grafik

grafik

grafik

Form: <legend> <input> <select>

before

very grey. Grey inputs and selects looks like disabled elements.
grafik

select has not the same height like the input
grafik

after

highlighted <legend>, fresh inputs and selects with a grey border and same height.
(I personally would not highlight the <legend> but I wanted to keep the idea of the theme author
grafik

grafik

Mobile view: header

before

not fixed header. The width of the search input was not good. The user query button was on the left side, above the read button. The "mark as read" button was not visible
grafik

after

The header is sticky to the top of the page. The content scrolls below
grafik

Dropdown menus

before

grafik

grafik

grafik

after

The config icon is now on the right side. In the user query menu the config icon is now placed by position: absolute instead float: right. When hovering over the icon, the background gives feedback with a lighter blue background color.

grafik

grafik

grafik

Box layout (feed/category management, idle feeds)

before

Grey text on grey background. The config button of the feeds is weird (it is a white cog icon on grey background).
grafik

White category names of dark background. Dark feed config icon. The empty category "Add category" has now a better visible grey box border. Hover over the cog icons changes the color of the cog to orange.
grafik

Global view

before

the header of the overlay is behind the menu banner. And the width is wider than necessary.
grafik

after

grafik

aside navigation bar

before

grafik

after

a little bit is now a structure visible
grafik

About FreshRSS link (anonym. mode)

before

grafik

after

grafik

Changes proposed in this pull request:

  • mostly (S)CSS files
  • a little bit JS and phtml

How to test the feature manually:

  1. see the feature list above

Pull request checklist:

  • clear commit messages
  • code manually tested

@math-GH math-GH added this to the 1.20.0 milestone Aug 7, 2022
@Alkarex
Copy link
Member

Alkarex commented Aug 9, 2022

Have you tried make fix-all ?

@math-GH math-GH marked this pull request as ready for review August 13, 2022 20:57
@math-GH
Copy link
Contributor Author

math-GH commented Aug 13, 2022

Ready for review.
I guess I documented the important changes.

To fix/improve this theme was much more time consuming as I planned before.

@math-GH math-GH mentioned this pull request Aug 13, 2022
4 tasks
@Alkarex
Copy link
Member

Alkarex commented Aug 13, 2022

Ping @pattems if you are around. Any comment welcome :-)

@Alkarex
Copy link
Member

Alkarex commented Aug 13, 2022

This looks like a great work, well done @math-GH 👍🏻

const nav_menu = document.querySelector('.nav_menu');
let nav_menu_height = 0;

if (getComputedStyle(nav_menu).position === 'fixed' || getComputedStyle(nav_menu).position === 'sticky') {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have not tested yet. Any impact on the other themes?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it with Origine. So it should not have an negative impact on other themes.

Let me explain this lines:
The changes in the JS file are needed when the user navigates with the left, top, right arrow navigation through the feed list. An additional factor was needed to calculate the correct position of the opened article.

@Alkarex
Copy link
Member

Alkarex commented Aug 15, 2022

Ups, a few conflicts now

@pattems
Copy link
Contributor

pattems commented Aug 15, 2022

Thanks for the ping! I really like 99% of these changes; they definitely round out the rough edges. The one thing I will say I really dislike is moving the new article banner; being able to stick it in the sidebar where it made more sense to me was one of the main reasons I made this theme in the first place.

What I'd prefer to see happen would be using @media rules to dump the new article banner out of the sidebar and into the stream only if the sidebar's collapsed, but I can always tweak my local copy of the theme if that doesn't sound reasonable. I'd offer to make that change myself but I'm drowning in other projects at the minute and not in a position to set up a dev environment to do proper testing.

@math-GH
Copy link
Contributor Author

math-GH commented Aug 16, 2022

Thanks @pattems for your quick feedback and the insight that it is very important for you to have the banner on that place.

I reverted it. Now the banner is back on the place.

@Alkarex
Copy link
Member

Alkarex commented Aug 18, 2022

Let's merge and come back to it in another PR if @pattems has more comments

@Alkarex Alkarex merged commit ea0d924 into FreshRSS:edge Aug 18, 2022
@Alwaysin
Copy link
Contributor

I always come late but when you have a low-resolution screen, you can't access the whole admin menu:
chrome_2022-08-18_11-27-33

With the default menu which I think every other theme uses, when you scroll down, you can access the lower elements, but here it stays stuck. For example here I can't access what is below authentication and I have to zoom out (CTRL- minus sign) to see everything:
chrome_2022-08-18_11-30-56

@math-GH
Copy link
Contributor Author

math-GH commented Aug 18, 2022

@Alwaysin I cannot reproduce it. I can scroll. When you move with your mouse cursor over the dropdown menu a white scroll bar will appear

grafik

Which browser do you use?

@math-GH
Copy link
Contributor Author

math-GH commented Aug 18, 2022

ah ok. now I got it. It does not happen in the mobile view, it happens in the "desktop view". I checked the demo and it happens there too, so this issue is not new with this PR.

To be honest: If you have this small screen (bigger than mobile view, smaller than a normal screen) than we could have issues also on other places.

Please let me know your standard resolution.

@Alwaysin
Copy link
Contributor

My screen is 1920x1080, but zoomed at 150%. I'm on a 14" laptop.

ApplicationFrameHost_2022-08-18_21-32-59

From what I can say this is the standard Windows settings.

@math-GH
Copy link
Contributor Author

math-GH commented Aug 18, 2022

thanks for this information. I can confirm that 150% is the recommended zoom in Windows10 for a 14" notebook with this resolution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants