WIP: Login page styles

lib/views/login.html

@@ -25,17 +25,18 @@
 <div class="main container-fluid">
 
   <div class="row">
-    <div class="login-header col-sm-offset-4 col-sm-4 text-center">
+    <div class="login-header col-sm-offset-4 col-sm-4">
       <div class="logo">{% include 'widget/logo.html' %}</div>
       <h1>
         {{ config.crowi['app:title'] || 'GROWI' }}
       </h1>
 
-      <div id="login-form-errors">
+      <div class="login-form-errors">
         {% if isLdapSetupFailed() %}
-        <div class="alert alert-warning">
-          LDAP is enabled but the configuration has something wrong.<br>
-          <small>(set the environment variables <code>DEBUG=crowi:service:PassportService</code> and get the logs)</small>
+        <div class="alert alert-warning small">
+          <strong><i class="icon-fw icon-info"></i>LDAP is enabled but the configuration has something wrong.</strong>
+          <br>
+          (Please set the environment variables <code>DEBUG=crowi:service:PassportService</code> to get the logs)
         </div>
         {% endif %}
 
@@ -45,9 +46,8 @@
         #}
         {% set isDuplicatedUsernameExceptionOccured = req.flash('isDuplicatedUsernameExceptionOccured') %}
         {% if isDuplicatedUsernameExceptionOccured != null %}
-        <div class="alert alert-warning">
-          <i class="fa fa-fw fa-info-circle"></i>
-          <strong>DuplicatedUsernameException occured</strong>
+        <div class="alert alert-warning small">
+          <p><strong><i class="icon-fw icon-ban"></i>DuplicatedUsernameException occured</strong></p>
           <p>
             Your LDAP authentication was succeess, but a new user could not be created.
             See the issue <a href="https://github.com/weseek/crowi-plus/issues/193">#193</a>.
@@ -111,8 +111,8 @@
             <input type="text" class="form-control" placeholder="Username or E-mail" name="loginForm[username]">
             {% if isLdapSetup() %}
             <span class="input-group-addon">
-              <small class="text-primary">
-                <i class="fa fa-fw fa-check-circle"></i> LDAP
+              <small class="text-success">
+                <i class="icon-fw icon-check"></i> LDAP
               </small>
             </span>
             {% endif %}

resource/styles/scss/_login.scss

@@ -30,21 +30,36 @@
 
         @media(min-width: 480px) {
           .col-sm-offset-4 {
-            margin-left: calc(50% - 150px);
+            margin-left: calc(50% - 170px);
           }
           .col-sm-4 {
-            width: 300px;
+            width: 340px;
           }
         }
 
         .login-header {
-          padding: 30px 30px 10px;
+          padding-top: 30px;
+          padding-bottom: 10px;
 
           display: flex;
           flex-direction: column;
           align-items: center;
         }
 
+        .login-form-errors {
+          width: 100%;
+
+          .alert {
+            margin-top: 10px;
+            margin-bottom: 0;
+            padding: 5px;
+
+            ul {
+              padding-left: 1.5em;
+            }
+          }
+        }
+
         .link-growi-org {
           position: absolute;
           bottom: 9px;
@@ -123,7 +138,7 @@
   }
 
   // button style
-  .btn-login, .btn-register {
+  .btn-login.fcbtn, .btn-register.fcbtn {
     border: none;
     color: white;
     background-color: rgba(lighten(black, 20%), 0.4);
@@ -136,7 +151,7 @@
       border: none;
     }
   }
-  .btn-login {
+  .btn-login.fcbtn {
     .btn-label {
       background-color: rgba($danger, 0.4);
     }
@@ -144,7 +159,7 @@
       background-color: #7e4153;
     }
   }
-  .btn-register {
+  .btn-register.fcbtn {
     .btn-label {
       background-color: rgba($success, 0.4);
     }