Login form layout changes

application/forms/Authentication/LoginForm.php

@@ -52,16 +52,18 @@ class LoginForm extends Form
             'text',
             'username',
             array(
-                'label'    => t('Username'),
+                'required' => true,
-                'required' => true
+                'placeholder' => t('Username'),
+                'class' => 'autofocus'
             )
+            
         );
 
         $this->addElement(
             'password',
             'password',
             array(
-                'label'    => t('Password'),
+                'placeholder'    => t('Password'),
                 'required' => true
             )
         );

application/views/scripts/authentication/login.phtml

@@ -2,17 +2,20 @@
  <div class="main">
   <div class="logo">
    <div class="image">
-    <img src="<?= $this->baseUrl('img/logo_icinga_big.png') ?>" width="400px">
+    <img src="<?= $this->baseUrl('img/logo_icinga_big.png') ?>" >
    </div>
   </div>
   <div class="form">
-   <?php if (isset($this->errorInfo)): ?>
+   <h1>Icinga Users Login</h1>
+   <?php
+   /* TODO: remove this as soon as notifications and forms are ready */
+   if (isset($this->errorInfo)): ?>
     <div class="error">
     <?= $this->errorInfo ?>
     </div>
    <?php endif ?>
    <?= $this->form ?>
-  </div>
    <div class="footer">Icinga Web 2 &copy; 2013-2014 Icinga Team</div>
   </div>
  </div>
+</div>

public/css/icinga/login.less

@@ -1,53 +1,67 @@
 
-.login {
+.login .logo {
- .logo {
+  background-color: #555;
-    background-color: #666666;
+  -moz-background-image: linear-gradient(to bottom, #333, #555);
-    background-image: linear-gradient(to bottom, #444444, #666666);
+  -ms-background-image: linear-gradient(to bottom, #333, #555);
-    -ms-background-image: linear-gradient(to bottom, #444444, #666666);
+  -o-background-image: linear-gradient(to bottom, #333, #555);
-    -webkit-background-image: linear-gradient(to bottom, #444444, #666666);
+  -webkit-background-image: linear-gradient(to bottom, #333, #555);
-    -moz-background-image: linear-gradient(to bottom, #444444, #666666);
+  background-image: linear-gradient(to bottom, #333, #555);
-    -o-background-image: linear-gradient(to bottom, #444444, #666666);
   position: absolute;
   top: 0;
   left: 0;
-    bottom:60%;
   right: 0;
-    border-bottom:1px solid black;
+  bottom: 60%;
+  border-bottom: 1px solid #333;
   text-align: center;
+}
 
-    .image {
+.login .image {
   position: absolute;
   bottom: 1em;
   left: 0px;
   right: 0px;
   text-align: center;
 }
+
+.login .image img {
+  width: 400px;
 }
 
-  .form {
+.login .form {
   position: absolute;
-    top:45%;
+  font-size: 0.9em;
+  top: 42%;
   left: 0;
   bottom: 0;
   right: 0;
-    overflow:auto;
-    overflow-x:hidden;
-    form {
-      margin-left: auto;
-      margin-right: auto;
-      width: 18em;
-    }
-    form input {
-      width: 16em;
-    }
 }
 
-  .footer {
+.login .form h1 {
-    position: absolute;
+  text-align: left;
-    bottom: 1em;
+  font-size: 1.5em;
-    left: 0;
+  margin-left: auto;
-    right: 0;
+  margin-right: auto;
-    font-size: 0.7em;
+  width: 12em;
+  color: @colorTextDefault;
+}
+
+.login .form label {
+  display: none;
+}
+
+.login form {
+  margin-left: auto;
+  margin-right: auto;
+  width: 20em;
+}
+
+.login form input {
+  width: 100%;
+  padding: 0.5em;
+}
+
+.login .footer {
+  font-size: 0.9em;
   text-align: center;
 }
-}
+