Login form layout changes

application/forms/Authentication/LoginForm.php

@@ -52,21 +52,23 @@ 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
             )
         );
 
-            $this->setSubmitLabel('Login');
+        $this->setSubmitLabel('Login');
 
     }
 }

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 class="footer">Icinga Web 2 &copy; 2013-2014 Icinga Team</div>
   </div>
-  <div class="footer">Icinga Web 2 &copy; 2013-2014 Icinga Team</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;
-    position:absolute;
+  top: 0;
-    top: 0;
+  left: 0;
-    left: 0;
+  right: 0;
-    bottom:60%;
+  bottom: 60%;
-    right: 0;
+  border-bottom: 1px solid #333;
-    border-bottom:1px solid black;
+  text-align: center;
-    text-align: center;
-
-    .image {
-      position:absolute;
-      bottom:1em;
-      left:0px;
-      right:0px;
-      text-align:center;
-    }
-  }
-
-  .form {
-    position: absolute;
-    top:45%;
-    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 {
-    position: absolute;
-    bottom: 1em;
-    left: 0;
-    right: 0;
-    font-size: 0.7em;
-    text-align: center;
-  }
 }
+
+.login .image {
+  position: absolute;
+  bottom: 1em;
+  left: 0px;
+  right: 0px;
+  text-align: center;
+}
+
+.login .image img {
+  width: 400px;
+}
+
+.login .form {
+  position: absolute;
+  font-size: 0.9em;
+  top: 42%;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.login .form h1 {
+  text-align: left;
+  font-size: 1.5em;
+  margin-left: auto;
+  margin-right: auto;
+  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;
+}
+