Improved the design of the web debug toolbar #17109
Closed
Conversation
This file contains hidden or 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
| @@ -1,3 +1,5 @@ | |||
| {% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %} | |||
There was a problem hiding this comment.
I suggest adding a comment saying this should stay in sync with the variable defined in profiler.css.twig (and having a similar comment there, so that both sides are warning people). I will avoid mistakes where only one of them is updated
There was a problem hiding this comment.
Good idea! Done in 9335290. Thanks.
|
👍 |
1 similar comment
|
👍 |
|
Thank you @javiereguiluz. |
fabpot
added a commit
that referenced
this pull request
Dec 22, 2015
This PR was squashed before being merged into the 2.8 branch (closes #17109). Discussion ---------- Improved the design of the web debug toolbar | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - This PR contains three little improvements: ## 1) Icon size Somehow, the size of the icons wasn't limited properly. This makes them appear too big and unaligns text vertically: ### Before  ### After  ## 2) Status blocks It's very common to have single-digit and double-digit status blocks in some panels. Now they show a different width:   Now we set a minimum-width that looks good for single and double digit values:   Although this solution doesn't solve the case when some block displays three digits, I think we can safely ignore that edge case. ## 3) Colors The green/yellow/red colors of the toolbar were different from the green/yellow/red colors of the profiler. The reason is that we designed the toolbar first and separately from the profiler. The second (minor) issue is that green and yellow didn't have enough contrast (they didn't pass the WCAG accessibility check). So I propose to slightly change the green and yellow colors and to use the same colors in the toolbar and the profiler. ### Toolbar Before  ### Toolbar After  ### Profiler Before    ### Profiler After    The new colors pass the accessibility requirements:    Commits ------- 9859125 Improved the design of the web debug toolbar
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.
This PR contains three little improvements:
1) Icon size
Somehow, the size of the icons wasn't limited properly. This makes them appear too big and unaligns text vertically:
Before
After
2) Status blocks
It's very common to have single-digit and double-digit status blocks in some panels. Now they show a different width:
Now we set a minimum-width that looks good for single and double digit values:
Although this solution doesn't solve the case when some block displays three digits, I think we can safely ignore that edge case.
3) Colors
The green/yellow/red colors of the toolbar were different from the green/yellow/red colors of the profiler. The reason is that we designed the toolbar first and separately from the profiler. The second (minor) issue is that green and yellow didn't have enough contrast (they didn't pass the WCAG accessibility check).
So I propose to slightly change the green and yellow colors and to use the same colors in the toolbar and the profiler.
Toolbar Before
Toolbar After
Profiler Before
Profiler After
The new colors pass the accessibility requirements: