?
avatar C-Lodder
C-Lodder
3 Mar 2020

What needs to be fixed

Why is there so much space between the toolbar button icon and text?

buttons

If the space is reduced, there will be less chance of wrapping on smaller devices

avatar C-Lodder C-Lodder - open - 3 Mar 2020
avatar joomla-cms-bot joomla-cms-bot - change - 3 Mar 2020
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - labeled - 3 Mar 2020
avatar brianteeman
brianteeman - comment - 3 Mar 2020

hover on them and you will see why

avatar C-Lodder
C-Lodder - comment - 3 Mar 2020

Yes, I know about the hover. Still doesn't explain the need for such a big space and why the icons need their own "container" (so to speak)

avatar jwaisner jwaisner - change - 5 Mar 2020
Priority Medium Low
Status New Discussion
Build staging 4.0-dev
avatar infograf768
infograf768 - comment - 8 Mar 2020

Also, why lose all that space to the right of the text?
As a proof of concept, I did this patch (for LTR only) using existing variables.
It is even more important when the text is longer than en-GB

diff --git a/administrator/templates/atum/scss/blocks/_toolbar.scss b/administrator/templates/atum/scss/blocks/_toolbar.scss
index 24fe50a..14bcc87 100644
--- a/administrator/templates/atum/scss/blocks/_toolbar.scss
+++ b/administrator/templates/atum/scss/blocks/_toolbar.scss
@@ -53,5 +53,5 @@
 
   .btn {
-    padding: $input-btn-padding-y-sm-submenu $input-btn-padding-x-sm-submenu;
+    padding: $input-btn-padding-y-sm-submenu $badge-padding-x $input-btn-padding-y-sm-submenu $input-btn-padding-x-sm-submenu;
     font-size: 1rem;
     line-height: $atum-toolbar-line-height;
@@ -71,5 +71,5 @@
       width: 2.438rem;
       height: 100%;
-      margin: $input-btn-padding-y-sm-submenu $input-btn-submenu-icon-distance $input-btn-padding-y-sm-submenu -#{$input-btn-padding-x-sm-submenu};
+      margin: $input-btn-padding-y-sm-submenu $input-btn-padding-y-sm-submenu $input-btn-padding-y-sm-submenu -#{$input-btn-padding-x-sm-submenu};
       line-height: $atum-toolbar-line-height;
       color: var(--atum-text-dark);

before patch

Screen Shot 2020-03-08 at 09 29 43

after patch

Screen Shot 2020-03-08 at 09 34 32

avatar infograf768
infograf768 - comment - 8 Mar 2020

That patch would break the actions button, but easy to correct separately

avatar brianteeman
brianteeman - comment - 8 Mar 2020

Personally speaking it looks too busy and on small buttons like "help" it looks unbalanced. Also all other buttons would need to be updated as well such as "clear". The only real way to have a balanced view would be to abandon the two tone highlighting

avatar brianteeman
brianteeman - comment - 20 Mar 2020

??

image

avatar brianteeman
brianteeman - comment - 8 Apr 2020

This is fixed with #28607

avatar brianteeman brianteeman - change - 8 Apr 2020
Status Discussion Closed
Closed_Date 0000-00-00 00:00:00 2020-04-08 10:27:47
Closed_By brianteeman
avatar brianteeman brianteeman - close - 8 Apr 2020

Add a Comment

Login with GitHub to post a comment