changeset 7217:919cebd1073c

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)
author domruf <dominikruf@gmail.com>
date Mon, 26 Jun 2017 23:49:26 +0200
parents c0ff58abe049
children fd617959732d
files kallithea/public/less/style.less kallithea/templates/login.html kallithea/templates/password_reset.html kallithea/templates/password_reset_confirmation.html kallithea/templates/register.html
diffstat 5 files changed, 28 insertions(+), 9 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/less/style.less	Fri Mar 16 22:07:14 2018 +0100
+++ b/kallithea/public/less/style.less	Mon Jun 26 23:49:26 2017 +0200
@@ -497,12 +497,6 @@
   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 @@
   .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 {
--- a/kallithea/templates/login.html	Fri Mar 16 22:07:14 2018 +0100
+++ b/kallithea/templates/login.html	Mon Jun 26 23:49:26 2017 +0200
@@ -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>
--- a/kallithea/templates/password_reset.html	Fri Mar 16 22:07:14 2018 +0100
+++ b/kallithea/templates/password_reset.html	Mon Jun 26 23:49:26 2017 +0200
@@ -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>
--- a/kallithea/templates/password_reset_confirmation.html	Fri Mar 16 22:07:14 2018 +0100
+++ b/kallithea/templates/password_reset_confirmation.html	Mon Jun 26 23:49:26 2017 +0200
@@ -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>
--- a/kallithea/templates/register.html	Fri Mar 16 22:07:14 2018 +0100
+++ b/kallithea/templates/register.html	Mon Jun 26 23:49:26 2017 +0200
@@ -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>