improve admin styling

* use inline-block instead of flexbox * fix RTL alignments
dokuwiki · Jan 31, 2017 · 220b8a2 · 220b8a2
1 parent 6dfd365
commit 220b8a2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 28 deletions.
diff --git a/inc/Ui/Admin.php b/inc/Ui/Admin.php
@@ -118,11 +118,13 @@ protected function showMenuItem($item) {
         global $ID;
         if(blank($item['prompt'])) return;
         echo '<li><div class="li">';
-        echo '<span>';
+        echo '<a href="' . wl($ID, 'do=admin&amp;page=' . $item['plugin']) . '">';
+        echo '<span class="icon">';
         embedSVG($item['icon']);
         echo '</span>';
-        echo '<a href="' . wl($ID, 'do=admin&amp;page=' . $item['plugin']) . '">';
+        echo '<span class="prompt">';
         echo $item['prompt'];
+        echo '</span>';
         echo '</a>';
         echo '</div></li>';
     }

diff --git a/lib/tpl/dokuwiki/css/_admin.less b/lib/tpl/dokuwiki/css/_admin.less
@@ -7,40 +7,39 @@
         list-style-type: none;
         font-size: 1.125em;
     }
-    [dir=rtl] ul.admin_tasks {
+    [dir=rtl] & ul.admin_tasks {
         float: right;
     }
 
     /* general menu item styling */
-    ul li {
-        margin: 0 0 1em 0;
-        font-weight: bold;
-        list-style-type: none;
-
-        div {
-            // flexbox takes care of RTL alignment
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            justify-content: flex-start;
-            align-content: flex-start;
-            align-items: flex-start;
+    ul {
+        padding: 0;
+        li {
+            margin: 0 0 1em 0;
+            font-weight: bold;
+            list-style-type: none;
+            white-space: nowrap;
 
-            span {
-                width: 1.5em;
-                align-self: center;
+            a span {
+                display: inline-block;
 
-                svg {
+                &.icon {
                     width: 1.5em;
-                    height: 1.5em;
-                    fill: @ini_link;
+                    min-height: 1.5em;
+                    margin: 0 0.5em;
+                    vertical-align: top;
+
+                    svg {
+                        width: 1.5em;
+                        height: 1.5em;
+                        fill: @ini_link;
+                        display: inline-block;
+                    }
                 }
-            }
 
-            a {
-                flex-grow: 1;
-                align-self: center;
-                margin: 0 0.5em;
+                &.prompt {
+                    white-space: normal;
+                }
             }
         }
     }
@@ -52,7 +51,7 @@
         color: @ini_text_neu;
         background-color: inherit;
     }
-    [dir=rtl] #admin__version {
+    [dir=rtl] & #admin__version {
         clear: right;
         float: left;
     }