# HG changeset patch
# User domruf <dominikruf@gmail.com>
# Date 2017-06-26 21:49:26
# Node ID 919cebd1073c46aca6738c9f45cd71389ca6254c
# Parent  c0ff58abe049d6c89b542d8db1896793d3b8be23

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
@@ -497,12 +497,6 @@ div.form div.form-group div.highlight,
   margin: 6px 0 0;
   padding: 0;
 }
-#login,
-#register {
-  width: 520px;
-  margin: 10% auto 0;
-  padding: 0;
-}
 .ac .match {
   font-weight: 700;
   padding-top: 5px;
@@ -702,9 +696,10 @@ div.comment-prev-next-links div.next-com
   .make-xs-column(11);
 }
 
-/* use bootstrap grid columns for centered forms */
-#login,
-#register {
+/* use bootstrap grid columns for centered columns */
+.centered-column {
+  .make-sm-column-offset(3);
+  .make-sm-column(6);
   .form {
     .form-horizontal;
     .form-group > label {
diff --git a/kallithea/templates/login.html b/kallithea/templates/login.html
--- a/kallithea/templates/login.html
+++ b/kallithea/templates/login.html
@@ -6,6 +6,9 @@
 </%block>
 
 <%include file="/base/flash_msg.html"/>
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="login" class="panel panel-primary">
     <div class="panel-heading">
       <h5>
@@ -68,3 +71,6 @@
         </script>
     </div>
 </div>
+</div>
+</div>
+</div>
diff --git a/kallithea/templates/password_reset.html b/kallithea/templates/password_reset.html
--- a/kallithea/templates/password_reset.html
+++ b/kallithea/templates/password_reset.html
@@ -6,6 +6,9 @@
 </%block>
 
 <%include file="/base/flash_msg.html"/>
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
@@ -62,3 +65,6 @@
         </script>
     </div>
 </div>
+</div>
+</div>
+</div>
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,6 +7,9 @@
 
 <%include file="/base/flash_msg.html"/>
 
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
@@ -52,3 +55,6 @@
         ${h.end_form()}
     </div>
    </div>
+</div>
+</div>
+</div>
diff --git a/kallithea/templates/register.html b/kallithea/templates/register.html
--- a/kallithea/templates/register.html
+++ b/kallithea/templates/register.html
@@ -7,6 +7,9 @@
 
 <%include file="/base/flash_msg.html"/>
 
+<div class="container">
+<div class="row">
+<div class="centered-column">
 <div id="register" class="panel panel-primary">
     <div class="panel-heading">
         %if c.site_name:
@@ -100,3 +103,6 @@
         </script>
     </div>
  </div>
+ </div>
+ </div>
+ </div>