improve admin styling

* use inline-block instead of flexbox
* fix RTL alignments
This commit is contained in:
Andreas Gohr 2017-01-31 19:06:29 +01:00
parent 6dfd365d04
commit 220b8a2086
2 changed files with 30 additions and 29 deletions

View File

@ -118,11 +118,13 @@ class Admin extends Ui {
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>';
}

View File

@ -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;
ul {
padding: 0;
li {
margin: 0 0 1em 0;
font-weight: bold;
list-style-type: none;
white-space: nowrap;
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;
a span {
display: inline-block;
span {
width: 1.5em;
align-self: center;
svg {
&.icon {
width: 1.5em;
height: 1.5em;
fill: @ini_link;
}
}
min-height: 1.5em;
margin: 0 0.5em;
vertical-align: top;
a {
flex-grow: 1;
align-self: center;
margin: 0 0.5em;
svg {
width: 1.5em;
height: 1.5em;
fill: @ini_link;
display: inline-block;
}
}
&.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;
}