Skip to content

css changes#2908

Merged
MichMich merged 7 commits into
MagicMirrorOrg:developfrom
BKeyport:develop
Sep 18, 2022
Merged

css changes#2908
MichMich merged 7 commits into
MagicMirrorOrg:developfrom
BKeyport:develop

Conversation

@BKeyport

@BKeyport BKeyport commented Sep 8, 2022

Copy link
Copy Markdown
Contributor
  1. Include these infos in the description:
  • Does the pull request solve a related issue?

Not that I've found

  • What does the pull request accomplish? Use a list if needed.

Adjusts font tree for consistent behavior - uses rem sizing throughout, uses variables throughout.

Partially implementing variables is silly, noticed font sizes weren't implemented fully. Corrected this in my custom, decided it should be in main. Feel free to adjust REM factors to match defaults you like.
Partially implementing variables is silly, noticed font sizes weren't implemented fully. Corrected this in my custom, decided it should be in main. Feel free to adjust REM factors to match defaults you like.

@rejas rejas left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I do like adding more variables, but why change the actual sizes (for example .medium shrinks from 1.5rem to 1rem)? That would mean that my mirror suddenly displays everything smaller, wouldnt it?

@BKeyport

BKeyport commented Sep 8, 2022 via email

Copy link
Copy Markdown
Contributor Author

@rejas

rejas commented Sep 9, 2022

Copy link
Copy Markdown
Collaborator

I am not sure if most users would read the changelog and immeditaly know what to do (which would lead to a lot of questions on the forum and here on github).

Yes, sometimes stuff breaks on releases but there must be a more valid reason than just a naming issue...

In the end its up to @MichMich to decide...

@MichMich

Copy link
Copy Markdown
Collaborator

I like the idea, but just as @rejas I'm not a big fan of breaking changes if it doesn't add any impactful value. What might be an idea is to put this new size tree onder a specific class and let users opt in for using the new size tree (although that might complicate things without any real added value)...

@BKeyport

Copy link
Copy Markdown
Contributor Author

Set font sizes to original, now only change is addition of variables to make custom CSS easier.

@rejas

rejas commented Sep 13, 2022

Copy link
Copy Markdown
Collaborator

This is better but unfortunatly will still break existing layouts: Those that use the --font-size-small variable will now get a different rem (1rem instead of 0.75rem)

Yes, I know its a bad naming at the moment (css selector "xsmall" uses "small" variable) but thats somethign we have to live with :-(

@BKeyport

BKeyport commented Sep 13, 2022

Copy link
Copy Markdown
Contributor Author

I don't think we're going to get a full compatibility with this and the logic you're using, then.

The simple fact is using "small" in the extra small layout point is an error and should be treated as such.

This corrects that, as well as adding the rest of the variables. On my screen, the change is VERY minor in look, while still maintaining everything, even if I rename my custom.css to default everything back to the new main.css file.

I will leave it up to Michael to approve or deny.

To sum up changes as it's now written:

  1. the use of --font-size-small in .xsmall appears to be an error, and inconsistent with sizing. This fixes that.
  2. addition of variables for the remainder of the sizes for consistency.

@rejas

rejas commented Sep 13, 2022

Copy link
Copy Markdown
Collaborator

I understand your reasoning, like you say: in the end @MichMich will have the final say :-) Thx for the PR in any case!

@MichMich

Copy link
Copy Markdown
Collaborator

Being a bit busy (lazy🤫), could you post a screenshot of the difference?

@BKeyport

BKeyport commented Sep 16, 2022

Copy link
Copy Markdown
Contributor Author

As you can see, there's no visual difference between new and old, IMO.

image

@KristjanESPERANTO KristjanESPERANTO left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

The current status looks good to me 🙂

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

Merging #2908 (02201d9) into develop (d3e5358) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop    #2908   +/-   ##
========================================
  Coverage    63.82%   63.82%           
========================================
  Files            9        9           
  Lines          293      293           
========================================
  Hits           187      187           
  Misses         106      106           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

@rejas

rejas commented Sep 17, 2022

Copy link
Copy Markdown
Collaborator

On my current setup the sizes of the header changes:

Bildschirmfoto 2022-09-17 um 08 31 32

@BKeyport

Copy link
Copy Markdown
Contributor Author

On my current setup the sizes of the header changes:

Not any longer. missed that the header used the --font-size-small - now uses --font-size-xsmall to match intent.

@rejas rejas left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Since you are a quick fixer I approve :-)

@MichMich

Copy link
Copy Markdown
Collaborator

Unfortunately the tests are failing.

@rejas

rejas commented Sep 17, 2022

Copy link
Copy Markdown
Collaborator

maybe just a hiccup during npm install? Can you trigger the tests again?

@khassel

khassel commented Sep 17, 2022

Copy link
Copy Markdown
Collaborator

from the failed tests:

Checking formatting...
[warn] CHANGELOG.md
[warn] css/main.css
[warn] Code style issues found in 2 files. Forgot to run Prettier?

@BKeyport

BKeyport commented Sep 17, 2022 via email

Copy link
Copy Markdown
Contributor Author

@rejas

rejas commented Sep 17, 2022

Copy link
Copy Markdown
Collaborator

just run "npm run lint:prettier" and commit the changes :-)

@BKeyport BKeyport changed the title css changes see note below. css changes Sep 18, 2022
@MichMich MichMich merged commit e917f40 into MagicMirrorOrg:develop Sep 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants