Skip to content

Comments

[web] UI fixes#401

Merged
dgdavid merged 10 commits intomasterfrom
css-adjustments
Jan 22, 2023
Merged

[web] UI fixes#401
dgdavid merged 10 commits intomasterfrom
css-adjustments

Conversation

@dgdavid
Copy link
Contributor

@dgdavid dgdavid commented Jan 19, 2023

  • Use a height: 100vh fallback for the layout since Chromium < 108 browsers do not support the Dynamic viewport units.

    Click to show/hide screenshots
    Before After
    localhost_9090_cockpit_@localhost_d-installer_index html localhost_9090_cockpit_@localhost_d-installer_index html (1)
  • Fix fieldset legend missalignment introduced in f5775f4

    Click to show/hide screenshots
    Before After
    Screen Shot 2023-01-19 at 16 09 15-fullpage Screen Shot 2023-01-19 at 16 09 39-fullpage
  • Use the .stack CSS class for fieldsets by default. It creates a good flow between elements.

    Click to show/hide screenshots
    Before After
    Screen Shot 2023-01-19 at 17 26 47-fullpage Screen Shot 2023-01-19 at 17 26 23
  • Fix sidebar position by setting layout as relative positioning (forgotten in 0661e10)

    Click to show/hide screenshots
    Before After
    Screen Shot 2023-01-19 at 14 38 10-fullpage Screen Shot 2023-01-19 at 14 38 41-fullpage
  • Fix missing software section icon. It was using a former icon prop for a section instead of the new iconName.

    Click to show/hide screenshots
    Before After
    Screen Shot 2023-01-20 at 01 33 43 Screen Shot 2023-01-20 at 01 33 14-fullpage
  • Fix the fonts loading once more.

    No screenshots available, just read the commit description addcac7

By setting layout as realtive positioning, which makes it the sidebar closest
positioned ancestor.

* https://www.w3.org/TR/css-position-3/#valdef-position-relative
* https://developer.mozilla.org/en-US/docs/Web/CSS/position
@coveralls
Copy link

coveralls commented Jan 19, 2023

Coverage Status

Coverage: 75.836% (+0.01%) from 75.821% when pulling 1998de4 on css-adjustments into 386df79 on master.

It affects to last-child/margin-block-end now, which helps to exclude the
legend element too. Reasoning: using the first-child/margin-block-start makes
not possible (ATM, at least) to avoid adding the margin at the first-child
which is not a legend in a fieldset.
Unfortunately, some relatively "recents" versions of major browsers do not
support "Small, Large, and Dynamic viewport units" yet.

* https://www.w3.org/TR/css-values-4/#viewport-variants
* https://caniuse.com/?search=dvb
@dgdavid dgdavid requested a review from joseivanlopez January 19, 2023 17:52
In commit f9e0437 a browser complain was fixed
by importing the fonts.scss in the src/index.js file to allow webpack to follow
the fonts urls and place them in dist/fonts.

Later, commit 5cf689d dropped the `@use
"@assets/styles/fonts.scss"` at-rule from the styles/index.scss file for
considering it kind of redundant.

And finally, the fonts.scss file was renamed to fonts.css in
c0a64af because it was no longer needed to
preprocess it with Sass due to the mentioned changes.

All the above led to the situation in which fonts were available at dist/fonts
but the browser were not loading the fonts.css file and, consequently, not
loading the fonts (this time, silently, without complaining).

To fix it once and for all, the following changes have been applied:

  * Rename back the file to fonts.scss to be able to import it with the @use
    at-rule from styles/index.scss.
  * Remove the specific rule for the fonts.scss file from webpack.config.js and, instead
  * -- Stop excluding it from the genral (s)css webpack rule
  * -- Change the css-loader's url option to a filter to tell webpack to only
       follow urls including "./fonts/"
  * -- Move assets/fonts to assets/styles/fonts for making webpack able to
       follow the url.
@dgdavid dgdavid marked this pull request as ready for review January 20, 2023 09:00
@dgdavid dgdavid changed the title [web] Visual adjustments [web] UI fixes Jan 20, 2023
@dgdavid dgdavid merged commit 04cc0fb into master Jan 22, 2023
@dgdavid dgdavid deleted the css-adjustments branch January 22, 2023 19:04
@imobachgs imobachgs mentioned this pull request Feb 13, 2023
bmwiedemann pushed a commit to bmwiedemann/openSUSE that referenced this pull request Feb 16, 2023
https://build.opensuse.org/request/show/1066106
by user IGonzalezSosa + dimstar_suse
- Version 0.7
- Do not use a proxy to get the errors lists
  (gh#agama-project/agama#424).

- Add live reloading feature for easing the front-end development
  process (gh#agama-project/agama#419).

- Fix storage section crashing when proposal is not ready
  (gh#agama-project/agama#418).

- Better handling of software repositories
  (gh#agama-project/agama#414):
  * Report issues when reading the software repositories.
  * Inform the user about the software proposal progress.
  * Add a button to reload the repositories
    (gh#agama-project/agama#388).

- Added a button for displaying the YaST logs
  (related to gh#agama-project/agama#379)

- UI fixes (gh#agama-project/agama#401):
  * Add a fallback height for the layout
  * Fix some miss-alignments
  * Add missing icon
  * Ensure tooling serving and loading fo
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.

3 participants