# HG changeset patch
# User Andrew Shadura <andrew@shadura.me>
# Date 2015-05-12 23:32:41
# Node ID 7a5db341a942a4bea1c433846ad040e8ae0d8a68
# Parent  43ad9c3b7d5dee9a237adadac0eac4553385949d

style: make the login page Bootstrap-ready

Change the template to use CSS classes names compatible with what
Bootstrap provides. That would allow the login page to have sane
appearance with Bootstrap CSS immediately.

The template changes also remove extra vertical space between
the ‘Log in’ button and extra links at the bottom for the sake
of having a simpler markup.

diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -1872,7 +1872,7 @@ a.metatag[tag="license"]:hover {
     padding: 20px;
 }
 
-#login div.form div.fields div.field div.label {
+#login div.form div.form-horizontal div.form-group > label {
     width: 173px;
     float: left;
     text-align: right;
@@ -1880,7 +1880,7 @@ a.metatag[tag="license"]:hover {
     padding: 5px 0 0 5px;
 }
 
-#login div.form div.fields div.field div.input input {
+#login div.form div.form-horizontal div.form-group div input {
     background: #FFF;
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
@@ -1892,20 +1892,16 @@ a.metatag[tag="license"]:hover {
     padding: 7px 7px 6px;
 }
 
-#login div.form div.fields div.buttons {
-    clear: both;
-    overflow: hidden;
-    border-top: 1px solid #DDD;
-    text-align: right;
-    margin: 0;
-    padding: 10px 0 0;
+#login div.form .buttons {
+    float: right;
 }
 
 #login div.form div.links {
     clear: both;
     overflow: hidden;
     margin: 10px 0 0;
-    padding: 0 0 2px;
+    border-top: 1px solid #DDD;
+    padding: 10px 0 0;
 }
 
 .user-menu {
@@ -3756,8 +3752,8 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields,
-#login div.form,
-#login div.form div.fields,
+#login div.form-horizontal,
+#login div.form-horizontal div.form-group,
 #register div.form,
 #register div.form div.fields {
     clear: both;
@@ -3767,7 +3763,7 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields div.field div.label span,
-#login div.form div.fields div.field div.label span,
+#login div.form div.form-horizontal div.form-group div.label span,
 #register div.form div.fields div.field div.label span {
     height: 1%;
     display: block;
@@ -3777,7 +3773,7 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields div.field div.input input.error,
-#login div.form div.fields div.field div.input input.error,
+#login div.form div.form-horizontal div.form-group div.input input.error,
 #register div.form div.fields div.field div.input input.error {
     background: #FBE3E4;
     border-top: 1px solid #e1b2b3;
@@ -3787,7 +3783,7 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields div.field div.input input.success,
-#login div.form div.fields div.field div.input input.success,
+#login div.form div.form-horizontal div.form-group div.input input.success,
 #register div.form div.fields div.field div.input input.success {
     background: #E6EFC2;
     border-top: 1px solid #cebb98;
@@ -3889,7 +3885,7 @@ div.box-right div.form div.fields div.bu
 }
 
 #content div.box div.action div.button,
-#login div.form div.fields div.field div.input div.link,
+#login div.form div.form-horizontal div.form-group div.input div.link,
 #register div.form div.fields div.field div.input div.link {
     text-align: right;
     margin: 6px 0 0;
@@ -3958,7 +3954,7 @@ div.box-right div.form div.fields div.bu
     padding: 0;
 }
 
-#login div.form div.fields div.field,
+#login div.form div.form-horizontal div.form-group,
 #register div.form div.fields div.field {
     clear: both;
     overflow: hidden;
@@ -3966,7 +3962,7 @@ div.box-right div.form div.fields div.bu
     padding: 0 0 10px;
 }
 
-#login div.form div.fields div.field span.error-message,
+#login div.form div.form-horizontal div.form-group span.error-message,
 #register div.form div.fields div.field span.error-message {
     height: 1%;
     display: block;
@@ -3976,36 +3972,36 @@ div.box-right div.form div.fields div.bu
     max-width: 320px;
 }
 
-#login div.form div.fields div.field div.label label,
+#login div.form div.form-horizontal div.form-group label,
 #register div.form div.fields div.field div.label label {
     color: #000;
     font-weight: 700;
 }
 
-#login div.form div.fields div.field div.input,
+#login div.form div.form-horizontal div.form-group div,
 #register div.form div.fields div.field div.input {
     float: left;
     margin: 0;
     padding: 0;
 }
 
-#login div.form div.fields div.field div.input input.large {
+#login div.form div.form-horizontal div.form-group div input.large {
     width: 250px;
 }
 
-#login div.form div.fields div.field div.checkbox,
+#login div.form div.form-horizontal div.form-group div.checkbox,
 #register div.form div.fields div.field div.checkbox {
     margin: 0 0 0 184px;
     padding: 0;
 }
 
-#login div.form div.fields div.field div.checkbox label,
+#login div.form div.form-horizontal div.form-group div.checkbox label,
 #register div.form div.fields div.field div.checkbox label {
     color: #565656;
     font-weight: 700;
 }
 
-#login div.form div.fields div.buttons input,
+#login div.form div.buttons input,
 #register div.form div.fields div.buttons input {
     color: #000;
     font-size: 1em;
diff --git a/kallithea/templates/login.html b/kallithea/templates/login.html
--- a/kallithea/templates/login.html
+++ b/kallithea/templates/login.html
@@ -5,50 +5,47 @@
     ${_('Log In')}
 </%block>
 
-<div id="login">
+<div id="login" class="panel panel-default">
     <%include file="/base/flash_msg.html"/>
     <!-- login -->
-    <div class="title withlogo">
+    <div class="panel-heading title withlogo">
         %if c.site_name:
             <h5>${_('Log In to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Log In')}</h5>
         %endif
     </div>
-    <div class="inner">
+    <div class="panel-body inner">
         ${h.form(h.url.current(came_from=c.came_from))}
         <div class="form">
             <i class="icon-lock"></i>
             <!-- fields -->
 
-            <div class="fields">
-                <div class="field">
-                    <div class="label">
-                        <label for="username">${_('Username')}:</label>
-                    </div>
-                    <div class="input">
-                        ${h.text('username',class_='focus large')}
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label class="control-label col-sm-5" for="username">${_('Username')}:</label>
+                    <div class="input col-sm-7">
+                        ${h.text('username',class_='form-control focus large')}
                     </div>
 
                 </div>
-                <div class="field">
-                    <div class="label">
-                        <label for="password">${_('Password')}:</label>
-                    </div>
-                    <div class="input">
-                        ${h.password('password',class_='focus large')}
+                <div class="form-group">
+                    <label class="control-label col-sm-5" for="password">${_('Password')}:</label>
+                    <div class="input col-sm-7">
+                        ${h.password('password',class_='form-control focus large')}
                     </div>
 
                 </div>
-                <div class="field">
-                    <div class="checkbox">
-                        <input type="checkbox" id="remember" name="remember" />
-                        <label for="remember">${_('Remember me')}</label>
+                <div class="form-group">
+                    <div class="col-sm-offset-5 col-sm-7">
+                        <div class="checkbox">
+                            <label for="remember">
+                                <input type="checkbox" id="remember" name="remember"/>
+                                ${_('Remember me')}
+                            </label>
+                        </div>
                     </div>
                 </div>
-                <div class="buttons">
-                    ${h.submit('sign_in',_('Sign In'),class_="btn")}
-                </div>
             </div>
             <!-- end fields -->
             <!-- links -->
@@ -58,6 +55,9 @@
                   /
                  ${h.link_to(_("Don't have an account ?"),h.url('register'))}
                 %endif
+                <span class="buttons">
+                    ${h.submit('sign_in',_('Sign In'),class_="btn btn-default")}
+                </span>
             </div>
 
             <!-- end links -->