# HG changeset patch
# User domruf <dominikruf@gmail.com>
# Date 2017-06-26 23:49:26
# Node ID 18a19c7d5145797a3b537021cdd73d9dfb94496b
# Parent  4749158e7d1c2abc9c9a68aa271276b9a0bf6f0b

templates: use bootstrap grid system for centered panels (login page etc.)

The bootstrap grid system rearranges the elements so that the pages look
good an small screens as well. (i.e. no vertical scrolling)

diff --git a/kallithea/public/less/style.less b/kallithea/public/less/style.less
--- a/kallithea/public/less/style.less
+++ b/kallithea/public/less/style.less
@@ -256,21 +256,7 @@ div.panel-primary {
   color: @kallithea-theme-inverse-color;
   padding-bottom: 3px;
 }
-#register div.form div.form-group > label {
-  width: 135px;
-  float: left;
-  text-align: right;
-  margin: 2px 10px 0 0;
-  padding: 5px 0 0 5px;
-}
-#register div.form div.form-group > div input {
-  width: 300px;
-}
-#register div.form div.buttons {
-  border-top: 1px solid #DDD;
-  margin: 0;
-  padding: 10px 0 0 145px;
-}
+
 #journal .journal_user {
   color: #747474;
   font-size: 14px;
@@ -716,6 +702,24 @@ div.comment-prev-next-links div.next-com
   .make-xs-column(11);
 }
 
+/* use bootstrap grid columns for centered forms */
+#login,
+#register {
+  .form {
+    .form-horizontal;
+    .form-group > label {
+      .make-sm-column(4);
+    }
+    .form-group > div {
+      .make-sm-column(8);
+    }
+    .form-group > div:first-child { /* in case there is no label */
+      .make-sm-column-offset(4);
+      .make-sm-column(8);
+    }
+  }
+}
+
 /* use columns and form-horizontal for settings pages ... on wide screens */
 @media (min-width: @screen-sm-min) {
   .settings {
diff --git a/kallithea/templates/password_reset_confirmation.html b/kallithea/templates/password_reset_confirmation.html
--- a/kallithea/templates/password_reset_confirmation.html
+++ b/kallithea/templates/password_reset_confirmation.html
@@ -7,7 +7,7 @@
 
 <%include file="/base/flash_msg.html"/>
 
-<div class="panel panel-primary">
+<div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
             <h5>${_('Reset Your Password to %s') % c.site_name}</h5>