tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-30 09:14:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Redesign draft and implementation

Browse Source
This commit is contained in:
Bernd Erk 2015-09-22 17:33:02 +02:00
parent 7f6d5655f9
commit 2242f6192c
10 changed files with 101 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
application/forms/Authentication/LoginForm.php
View File

@ -41,7 +41,7 @@ class LoginForm extends Form
array( array(
'required' => true, 'required' => true,
'label' => $this->translate('Username'), 'label' => $this->translate('Username'),
'placeholder' => $this->translate('Please enter your username...'), 'placeholder' => $this->translate(''),
'class' => false === isset($formData['username']) ? 'autofocus' : '' 'class' => false === isset($formData['username']) ? 'autofocus' : ''
) )
); );
@ -51,7 +51,7 @@ class LoginForm extends Form
array( array(
'required' => true, 'required' => true,
'label' => $this->translate('Password'), 'label' => $this->translate('Password'),
'placeholder' => $this->translate('...and your password'), 'placeholder' => $this->translate(''),
'class' => isset($formData['username']) ? 'autofocus' : '' 'class' => isset($formData['username']) ? 'autofocus' : ''
) )
); );

10
application/views/scripts/authentication/login.phtml
View File

@ -5,7 +5,6 @@
</div> </div>
</div> </div>
<div class="form" data-base-target="layout"> <div class="form" data-base-target="layout">
<h1><?= $this->translate('Welcome to Icinga Web 2'); ?></h1>
<?php if ($requiresSetup): ?> <?php if ($requiresSetup): ?>
<p class="config-note"><?= sprintf( <p class="config-note"><?= sprintf(
$this->translate( $this->translate(
@ -19,6 +18,13 @@
); ?></p> ); ?></p>
<?php endif ?> <?php endif ?>
<?= $this->form ?> <?= $this->form ?>
<div class="footer">Icinga Web 2 &copy; 2013-2015<br><a href="https://www.icinga.org"><?= $this->translate('The Icinga Project'); ?></a></div> <div class="footer">
Icinga Web 2 &copy; 2013-2015<br><br>
<a href="https://www.icinga.org"><?= $this->translate('The Icinga Project'); ?></a>
&nbsp;|&nbsp;
<a href="http://www.twitter.com/icinga"><?= $this->translate('Icinga on Twitter'); ?></a>
&nbsp;|&nbsp;
<a href="http://www.facebook.com/icinga"><?= $this->translate('Icinga on Facebook'); ?></a>
</div>
</div> </div>
</div> </div>

2
modules/monitoring/application/views/scripts/list/servicegroups.phtml
View File

@ -85,7 +85,7 @@ foreach ($servicegroups as $s): ?>
<td class="total"> <td class="total">
<?= $s->services_total; ?> <?= $s->services_total; ?>
</td> </td>
<td class="state"> <td>
<?php if ($s->services_ok): ?> <?php if ($s->services_ok): ?>
<span class="state ok"> <span class="state ok">
<?= $this->qlink( <?= $this->qlink(

20
modules/monitoring/public/css/module.less
View File

@ -80,16 +80,18 @@ span.state {
font-weight: bold; font-weight: bold;
color: white; color: white;
font-weight: bold; font-weight: bold;
padding: 1px 2px; padding: 2px 3px;
margin-right: 5px; margin-right: 5px;
} }
span.state.active { span.state.active {
border: 2px solid #555; border: 2px solid #555;
padding: 2px 4px;
margin-right: 4px;
} }
span.state span.state { span.state span.state {
margin: 0 -3px 0 5px; margin: 0 -6px 0 5px;
} }
span.state.ok { span.state.ok {
@ -338,13 +340,11 @@ tr.state img.icon {
margin-right: 2px; margin-right: 2px;
} }
tr.state a {
color: #222;
}
/* Hostgroup badge quickfix */ /* Hostgroup badge quickfix */
tr.state span a { tr.state span a {
color: inherit; color: white;
font-size: 0.857em;
padding: 2px 5px;
} }
tr.state:hover a { tr.state:hover a {
@ -965,9 +965,11 @@ table.groupview {
border-spacing: 0.1em; border-spacing: 0.1em;
th { th {
font-size: 0.9em; font-size: 1.0em;
text-align: left; font-weight: normal;
text-align: center;
white-space: nowrap; white-space: nowrap;
border-bottom: 2px solid @gray-light;
} }
td { td {

2
public/css/icinga/header-elements.less
View File

@ -1,7 +1,7 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
#logo { #logo {
height: 3.6em; height: 4.0em;
width: 13em; width: 13em;
display: inline-block; display: inline-block;
} }

6
public/css/icinga/layout-colors.less
View File

@ -3,17 +3,13 @@
/* Layout colors */ /* Layout colors */
#sidebar { #sidebar {
background-color: #f9f9f9; background-color: @gray-lighter;
-moz-box-shadow: inset -0.3em 0 0.3em -0.3em #555;
-webkit-box-shadow: inset -0.3em 0 0.3em -0.3em #555;
box-shadow: inset -0.3em 0 0.3em -0.3em #555;
} }
#header { #header {
background-color: @icinga-blue; background-color: @icinga-blue;
color: #ddd; color: #ddd;
color: #d0d0d0; color: #d0d0d0;
border-bottom: solid 1px;
} }
#header input { #header input {

2
public/css/icinga/layout-structure.less
View File

@ -24,7 +24,7 @@ html {
width: 12em; width: 12em;
position: fixed; position: fixed;
left: 0; left: 0;
top: 3.6em; top: 4.6em;
bottom: 0; bottom: 0;
} }

67
public/css/icinga/login.less
View File

@ -1,21 +1,17 @@
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
#login { #login {
background-color: @icinga-blue;
width: 100%; width: 100%;
height: 100%; height: 100%;
.logo { .logo {
background-color: @colorPetrol;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 60%; bottom: 75%;
border-bottom: 1px solid #d9d9d9d;
text-align: center; text-align: center;
-webkit-box-shadow: 0 3px 7px -3px #000;
-moz-box-shadow: 0 3px 7px -3px #000;
box-shadow: 0 3px 7px -3px #000;
} }
.image { .image {
@ -38,7 +34,7 @@
.form { .form {
position: absolute; position: absolute;
font-size: 0.9em; font-size: 0.9em;
top: 45%; top: 30%;
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -49,7 +45,7 @@
font-size: 1.5em; font-size: 1.5em;
margin-left: 2.3em; margin-left: 2.3em;
border: none; border: none;
color: @colorTextDefault; color: @text-color-inverted;
font-variant: unset; font-variant: unset;
} }
@ -57,61 +53,78 @@
margin: 0; margin: 0;
ul.errors { ul.errors {
margin-left: 10.5em;
} }
} }
.form label { .form label {
color: @text-color-inverted;
font-weight: normal; font-weight: normal;
display: inline-block; display: block;
line-height: 2.5em; line-height: 2.5em;
width: 10em; width: 10em;
margin-right: 2.5em; margin-right: 2.5em;
text-align: right; text-align: left;
} }
form { form {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 35em; width: 19.5em;
font-size: 20px;
} }
form input { form input {
color: @text-color-inverted;
width: 18em; width: 18em;
padding: 0.5em; padding: 0.5em;
background: #ddd; background: rgba(255,255,255,0.2);
color: #333;
border: 1px solid #ddd;
margin-left: 0; margin-left: 0;
padding: 6px 10px;
border: none;
border-bottom: solid 3px @body-bg-color;
-webkit-transition: border 0.3s;
-moz-transition: border 0.3s;
-o-transition: border 0.3s;
transition: border 0.3s;
} }
form input:focus { form input:focus {
background: white; border-bottom: solid 3px @body-bg-color;
background: rgba(255,255,255,0.4);
} }
ul.errors { ul.errors {
} }
input[type=submit] { input[type=submit] {
color: #fff; color: @text-color-inverted;
border: 2px solid #ddd; background: none;
border-color: @colorPetrol; border: none;
background: @colorPetrol; margin-top: 3em;
margin-top: 1.5em; margin-right: 5px;
margin-left: 12.5em; border: solid 3px @body-bg-color;
-webkit-transition: border 0.3s;
-moz-transition: border 0.3s;
-o-transition: border 0.3s;
} }
input[type=submit]:hover, a.button:hover, input[type=submit]:focus { input[type=submit]:hover, a.button:hover, input[type=submit]:focus {
background-color: #333; background: @body-bg-color;
border-color: #333; color: @icinga-blue;
} }
.footer { .footer {
margin-top: 7em; color: @text-color-inverted;
margin-top: 5em;
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
margin-left: 5em; margin-left: 2em;
a {
color: @text-color-inverted;
font-weight: bold;
}
} }
p.config-note { p.config-note {
@ -123,7 +136,7 @@
background-color: @colorCritical; background-color: @colorCritical;
a { a {
color: white; color: @text-color-inverted;
font-weight: bold; font-weight: bold;
} }
} }

56
public/css/icinga/menu.less
View File

@ -15,7 +15,7 @@
} }
#menu a { #menu a {
color: black; color: @text-color-default;
} }
#menu .separator { #menu .separator {
@ -47,12 +47,13 @@
} }
#menu > nav > ul > li > a { #menu > nav > ul > li > a {
color: @icinga-blue;
font-size: 0.9em; font-size: 0.9em;
text-shadow: none; text-shadow: none;
} }
#menu > nav > ul > li.active > a { #menu > nav > ul > li.active > a {
color: @colorTextDefault; color: @icinga-blue;
text-shadow: none; text-shadow: none;
} }
@ -65,7 +66,6 @@
} }
#menu > nav > ul > li { #menu > nav > ul > li {
border-bottom: 1px solid #d9d9d9;
} }
#menu > nav > ul > li li { #menu > nav > ul > li li {
@ -75,7 +75,8 @@
/* Collapsed menu item color */ /* Collapsed menu item color */
#menu > nav > ul > li > a { #menu > nav > ul > li > a {
color: @colorTextDefault; color: @text-color-light;
font-weight: 500;
} }
/* Sub item color */ /* Sub item color */
@ -90,7 +91,7 @@
#menu ul li a { #menu ul li a {
display: block; display: block;
line-height: 2.2em; line-height: 2.8em;
padding-left: 0.7em; padding-left: 0.7em;
text-decoration: none; text-decoration: none;
overflow: hidden; overflow: hidden;
@ -105,12 +106,16 @@
} }
#menu ul ul li a { #menu ul ul li a {
line-height: 1.2em; line-height: 1.5em;
padding-bottom: 1em; padding-bottom: 1em;
} }
#menu > nav > ul > li { #menu > nav > ul > li {
margin-left: 5px; border-left: solid 5px @gray-lighter;
}
#menu > nav > ul > li > a {
color: @text-color;
} }
#menu > nav > ul > li.active { #menu > nav > ul > li.active {
@ -118,14 +123,18 @@
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
border-left: solid 5px @icinga-blue; border-left: solid 5px @icinga-blue;
-webkit-transition: border 0.5s;
-moz-transition: border 0.5s;
-o-transition: border 0.5s;
transition: border 0.5s;
} }
/* BEGIN OF Hoverable menu */ /* BEGIN OF Hoverable menu */
#menu li.hover { #menu li.hover {
width: 26em; width: 28em;
padding-left: 0.0em; padding-left: 0.0em;
margin-left: 5px; margin-left: 0px;
margin-right: 5; margin-right: 5;
position: relative; position: relative;
} }
@ -133,25 +142,27 @@
#menu li.hover > ul { #menu li.hover > ul {
position: absolute; position: absolute;
display: block; display: block;
left: 11.5em; left: 10.9em;
right: 0; right: 0;
top: -0.5em; top: -0.5em;
padding-top: 1em; padding-top: 1em;
padding-left: 1em; padding-left: 1em;
padding-bottom: 0.5em; padding-bottom: 0.5em;
height: auto; height: auto;
background-color: #222222; background-color: @text-color;
font-size:15px;
} }
#menu li.hover > a { #menu li.hover > a {
color: black; color: @icinga-blue;
overflow: visible; overflow: visible;
} }
#menu li.hover > ul a { #menu li.hover > ul a {
width: 95%; width: 95%;
display: block; display: block;
color: white; color: @text-color-light;
color: @text-color-inverted;
} }
#menu li.hover > ul a:hover { #menu li.hover > ul a:hover {
@ -164,7 +175,7 @@
#menu li.hover > ul > li.active > a { #menu li.hover > ul > li.active > a {
font-weight: bold; font-weight: bold;
color: white; color: @text-color-light;
} }
#menu li.hover li { #menu li.hover li {
@ -205,7 +216,7 @@
border: none; border: none;
width: 100%; width: 100%;
border-radius: 0; border-radius: 0;
height: 2.2em; height: 2.7em;
display: block; display: block;
outline: none; outline: none;
background-color: transparent; background-color: transparent;
@ -213,30 +224,33 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 1.2em center; background-position: 1.2em center;
color: @colorTextDefault; color: @colorTextDefault;
border-bottom: 1px solid #d9d9d9;
} }
html.ie8 #menu input.search { html.ie8 #menu input.search {
line-height: 2.5em; line-height: 2.8em;
} }
#menu input.search:-ms-input-placeholder { #menu input.search:-ms-input-placeholder {
color: @colorTextDefault; color: @text-color;
} }
#menu input.search::-webkit-input-placeholder { #menu input.search::-webkit-input-placeholder {
color: @colorTextDefault; color: @text-color;
} }
#menu input.search::-moz-placeholder { #menu input.search::-moz-placeholder {
color: @colorTextDefault; color: @text-color;
opacity: 1;
} }
#menu input.search.active { #menu input.search.active {
background-color: white; background-color: white;
color: #121212; color: #121212;
text-shadow: none; text-shadow: none;
border-left: solid 5px @icinga-blue;
-webkit-transition: border 0.5s;
-moz-transition: border 0.5s;
-o-transition: border 0.5s;
transition: border 0.5s;
} }
#menu input.search.active::-moz-placeholder { #menu input.search.active::-moz-placeholder {

2
public/css/icinga/widgets.less
View File

@ -241,7 +241,7 @@ li li .badge-container {
#menu nav ul .badge { #menu nav ul .badge {
margin-right: 0em; margin-right: 0em;
top: 0.3em; top: 0.5em;
} }
#menu nav > ul > li.active > .badge-container { #menu nav > ul > li.active > .badge-container {