Redesign draft and implementation

Icinga · Sep 22, 2015 · 2242f61 · 2242f61
1 parent 7f6d565
commit 2242f61
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 70 deletions.
diff --git a/application/forms/Authentication/LoginForm.php b/application/forms/Authentication/LoginForm.php
@@ -41,7 +41,7 @@ public function createElements(array $formData)
             array(
                 'required'      => true,
                 'label'         => $this->translate('Username'),
-                'placeholder'   => $this->translate('Please enter your username...'),
+                'placeholder'   => $this->translate(''),
                 'class'         => false === isset($formData['username']) ? 'autofocus' : ''
             )
         );
@@ -51,7 +51,7 @@ public function createElements(array $formData)
             array(
                 'required'      => true,
                 'label'         => $this->translate('Password'),
-                'placeholder'   => $this->translate('...and your password'),
+                'placeholder'   => $this->translate(''),
                 'class'         => isset($formData['username']) ? 'autofocus' : ''
             )
         );

diff --git a/application/views/scripts/authentication/login.phtml b/application/views/scripts/authentication/login.phtml
@@ -5,7 +5,6 @@
    </div>
   </div>
   <div class="form" data-base-target="layout">
-    <h1><?= $this->translate('Welcome to Icinga Web 2'); ?></h1>
     <?php if ($requiresSetup): ?>
     <p class="config-note"><?= sprintf(
       $this->translate(
@@ -19,6 +18,13 @@
     ); ?></p>
     <?php endif ?>
     <?= $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>
diff --git a/modules/monitoring/application/views/scripts/list/servicegroups.phtml b/modules/monitoring/application/views/scripts/list/servicegroups.phtml
@@ -85,7 +85,7 @@ foreach ($servicegroups as $s): ?>
         <td class="total">
           <?= $s->services_total; ?>
         </td>
-        <td class="state">
+        <td>
         <?php if ($s->services_ok): ?>
           <span class="state ok">
             <?= $this->qlink(

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

diff --git a/public/css/icinga/header-elements.less b/public/css/icinga/header-elements.less
@@ -1,7 +1,7 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
 #logo {
-  height: 3.6em;
+  height: 4.0em;
   width: 13em;
   display: inline-block;
 }

diff --git a/public/css/icinga/layout-colors.less b/public/css/icinga/layout-colors.less
@@ -3,17 +3,13 @@
 /* Layout colors */
 
 #sidebar {
-  background-color: #f9f9f9;
-  -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;
+  background-color: @gray-lighter;
 }
 
 #header {
   background-color: @icinga-blue;
   color: #ddd;
   color: #d0d0d0;
-  border-bottom: solid 1px;
 }
 
 #header input {

diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
@@ -24,7 +24,7 @@ html {
   width: 12em;
   position: fixed;
   left: 0;
-  top: 3.6em;
+  top: 4.6em;
   bottom: 0;
 }
 

diff --git a/public/css/icinga/login.less b/public/css/icinga/login.less
@@ -1,21 +1,17 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
 #login {
+  background-color: @icinga-blue;
   width: 100%;
   height: 100%;
 
   .logo {
-    background-color: @colorPetrol;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
-    bottom: 60%;
-    border-bottom: 1px solid #d9d9d9d;
+    bottom: 75%;
     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 {
@@ -38,7 +34,7 @@
   .form {
     position: absolute;
     font-size: 0.9em;
-    top: 45%;
+    top: 30%;
     left: 0;
     bottom: 0;
     right: 0;
@@ -49,69 +45,86 @@
     font-size: 1.5em;
     margin-left: 2.3em;
     border: none;
-    color: @colorTextDefault;
+    color: @text-color-inverted;
     font-variant: unset;
   }
 
   .form div.element {
     margin: 0;
 
     ul.errors {
-      margin-left: 10.5em;
     }
   }
 
   .form label {
+    color: @text-color-inverted;
     font-weight: normal;
-    display: inline-block;
+    display: block;
     line-height: 2.5em;
     width: 10em;
     margin-right: 2.5em;
-    text-align: right;
+    text-align: left;
 
   }
 
   form {
     margin-left: auto;
     margin-right: auto;
-    width: 35em;
+    width: 19.5em;
+    font-size: 20px;
   }
 
   form input {
+    color: @text-color-inverted;
     width: 18em;
     padding: 0.5em;
-    background: #ddd;
-    color: #333;
-    border: 1px solid #ddd;
+    background: rgba(255,255,255,0.2);
     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 {
-    background: white;
+    border-bottom: solid 3px @body-bg-color;
+    background: rgba(255,255,255,0.4);
   }
 
   ul.errors {
   }
 
   input[type=submit] {
-    color: #fff;
-    border: 2px solid #ddd;
-    border-color: @colorPetrol;
-    background: @colorPetrol;
-    margin-top: 1.5em;
-    margin-left: 12.5em;
+    color: @text-color-inverted;
+    background: none;
+    border: none;
+    margin-top: 3em;
+    margin-right: 5px;
+    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 {
-    background-color: #333;
-    border-color: #333;
+    background: @body-bg-color;
+    color: @icinga-blue;
   }
 
   .footer {
-    margin-top: 7em;
+    color: @text-color-inverted;
+    margin-top: 5em;
     font-size: 0.9em;
     text-align: center;
-    margin-left: 5em;
+    margin-left: 2em;
+
+    a {
+      color: @text-color-inverted;
+      font-weight: bold;
+    }
   }
 
   p.config-note {
@@ -123,7 +136,7 @@
     background-color: @colorCritical;
 
     a {
-      color: white;
+      color: @text-color-inverted;
       font-weight: bold;
     }
   }