Adds proper styling for new Admin UI

This commit is contained in:
Andreas Gohr 2017-01-21 14:27:16 +01:00
parent 47d645c8ee
commit 713faa941b
4 changed files with 62 additions and 117 deletions

View File

@ -21,14 +21,14 @@ class Admin extends Ui {
*/
public function show() {
$this->menu = $this->getPluginList();
dbg($this->menu);
echo '<div class="UI-admin">';
echo p_locale_xhtml('admin');
$this->showSecurityCheck();
$this->showAdminMenu();
$this->showManagerMenu();
$this->showVersion();
$this->showPluginMenu();
echo '</div>';
}
/**

View File

@ -1,114 +0,0 @@
/**
* This file provides styles for the Administration overview
* (?do=admin).
*/
.dokuwiki ul.admin_tasks {
float: left;
width: 40%;
list-style-type: none;
font-size: 1.125em;
}
[dir=rtl] .dokuwiki ul.admin_tasks {
float: right;
}
.dokuwiki ul.admin_tasks li {
padding-left: 35px;
margin: 0 0 1em 0;
font-weight: bold;
list-style-type: none;
background: transparent none no-repeat scroll 0 0;
color: inherit;
}
[dir=rtl] .dokuwiki ul.admin_tasks li {
padding-left: 0;
padding-right: 35px;
background-position: right 0;
}
.dokuwiki ul.admin_tasks li.admin_acl {
background-image: url(../../images/admin/acl.png);
}
.dokuwiki ul.admin_tasks li.admin_usermanager {
background-image: url(../../images/admin/usermanager.png);
}
.dokuwiki ul.admin_tasks li.admin_plugin {
background-image: url(../../images/admin/plugin.png);
}
.dokuwiki ul.admin_tasks li.admin_config {
background-image: url(../../images/admin/config.png);
}
.dokuwiki ul.admin_tasks li.admin_styling {
background-image: url(../../images/admin/styling.png);
}
.dokuwiki ul.admin_tasks li.admin_revert {
background-image: url(../../images/admin/revert.png);
}
.dokuwiki ul.admin_tasks li.admin_popularity {
background-image: url(../../images/admin/popularity.png);
}
/* DokuWiki additional plugins below */
.dokuwiki ul.admin_plugins {
float: left;
list-style-type: none;
}
.dokuwiki ul.admin_plugins li {
margin: 0 0 0.4em 0;
color: inherit;
background: transparent none no-repeat scroll 0 0;
}
.dokuwiki ul.admin_plugins li div {
display: block;
height: 20px;
vertical-align: middle;
}
.dokuwiki ul.admin_plugins li div.admin_plugin_icon {
display: inline-block;
height: 20px;
width: 20px;
}
.dokuwiki ul.admin_plugins li div.admin_plugin_icon svg {
height: 20px;
width: 20px;
}
.dokuwiki ul.admin_plugins li div.admin_plugin_icon svg path {
fill: @ini_link;
}
.dokuwiki ul.admin_plugins li div.admin_plugin_name {
padding-left: 0.5em;
display: inline-block;
}
/*
.dokuwiki ul.admin_plugins li .admin_plugin_container div.admin_plugin_icon img {
height: 20px;
width: 20px;
}
.dokuwiki ul.admin_plugins li .admin_plugin_container div.admin_plugin_name {
vertical-align: middle;
display: inline-block;
text-align: center;
margin: 0 auto;
}
*/
/* DokuWiki version below */
.dokuwiki #admin__version {
clear: left;
float: right;
color: @ini_text_neu;
background-color: inherit;
}
[dir=rtl] .dokuwiki #admin__version {
clear: right;
float: left;
}

View File

@ -0,0 +1,59 @@
.dokuwiki div.UI-admin {
/* main task grouped in two columns */
ul.admin_tasks {
float: left;
width: 40%;
list-style-type: none;
font-size: 1.125em;
}
[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;
span {
width: 1.5em;
align-self: center;
svg {
width: 1.5em;
height: 1.5em;
fill: @ini_link;
}
}
a {
flex-grow: 1;
align-self: center;
margin: 0 0.5em;
}
}
}
/* DokuWiki version */
#admin__version {
clear: left;
float: right;
color: @ini_text_neu;
background-color: inherit;
}
[dir=rtl] #admin__version {
clear: right;
float: left;
}
}

View File

@ -31,7 +31,7 @@ css/_diff.css = screen
css/_edit.css = screen
css/_modal.css = screen
css/_forms.css = screen
css/_admin.css = screen
css/_admin.less = screen
css/structure.less = screen
css/design.less = screen
css/pagetools.less = screen