[web] Agama/Section fixes and improvements #892
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Because if called with undefined name Agama/Icon logs an error in the console.
A kind of rollback of #549 to avoid UI changes when a section without icon enters in a loading mode and renders the "section loading icon".
The purpuose is to keep a visual balance with the space reserved for the section / loading icon.
To make better use of space now that page sections are adding their own inline padding.
To make the section icons smaller by default, reducing the left gap generated when using sections without icons.
Changes in the --wrapper-padding make it being cut in the left side.
As a better way to avoid its content to be hidden or cut.
dgdavid
changed the title
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Lately, we use more and more the
Agama/Sectioncomponent, which make us realize about problems it has or improvements we can introduce. This PR is about both things.Details
After [web] Simplify code of Section component #839, there are a lot of Icon errors logged in the development console when visiting a page with sections without icons.
Fixed by 59ff592
There are sections that do not have a representative icon, but they can enter in loading mode. When so, the loading icon is used in the section header, moving the section header and content to the right as much as needed and putting it back when leaving the loading mode.
Solution has been to revert change done at [web] Do not reserve space for section icons #549 and reserve the icon space, 1672dbc
Screencast.from.2023-11-29.09-58-18.webm
Screencast.from.2023-11-29.09-59-54.webm
Because of the above, better to add padding to the end of the section for a visual balance of space at both sides ac74693
But there is too much wasted space, so the padding added by the
<main>element was reduced, c62976cStill too much space when sections do not have icons, so icons size was decreased too, 09961b8
Then the header had to be better aligned, 6cb6512
And finally ensuring that sidebar content keep always visible, 0927e87