changeset 7208:18a19c7d5145

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 4749158e7d1c
children 45a281a0f36f
files kallithea/public/less/style.less kallithea/templates/password_reset_confirmation.html
diffstat 2 files changed, 20 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/less/style.less	Sun Oct 29 23:22:18 2017 +0100
+++ b/kallithea/public/less/style.less	Mon Jun 26 23:49:26 2017 +0200
@@ -256,21 +256,7 @@
   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 @@
   .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 {
--- a/kallithea/templates/password_reset_confirmation.html	Sun Oct 29 23:22:18 2017 +0100
+++ b/kallithea/templates/password_reset_confirmation.html	Mon Jun 26 23:49:26 2017 +0200
@@ -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>