dashboard: make the login form more responsive

circle/templates/registration/base.html

@@ -11,10 +11,6 @@
     body {
       margin-top: 40px;
     }
-    .container {
-      width: 600px;
-    }
-
     ul, li {
       list-style: none;
       margin: 0;
@@ -22,6 +18,8 @@
     }
 
     .container > .content {
+      max-width: 570px;
+      margin: auto;
       background-color: #fff;
       padding: 20px;
       -webkit-border-radius: 10px 10px 10px 10px;
@@ -38,8 +36,10 @@
     }
 
     .login-form {
-      margin-top: 40px;
+      margin: 20px auto 0 auto;
       padding: 0 10px;
+      max-width: 250px;
+
     }
 
     .login-form form {
@@ -79,3 +79,10 @@
     <img src="{{ STATIC_URL}}dashboard/img/logo.png" style="height: 25px;"/>
   </a>
 {% endblock %}
+
+
+{% block content %}
+  <div class="content">
+    {% block content_box %}{% endblock %}
+  </div>
+{% endblock %}

circle/templates/registration/login.html

@@ -11,15 +11,14 @@
   </a>
 {% endblock %}
 
-{% block content %}
-<div class="content">
+{% block content_box %}
   <div class="row">
     {% if form.password.errors or form.username.errors %}
       <div class="login-form-errors">
         {% include "display-form-errors.html" %}
       </div>
     {% endif %}
-    <div class="col-sm-{% if saml2 %}6{% else %}12{% endif %}">
+    <div class="col-xs-{% if saml2 %}6{% else %}12{% endif %}">
       <div class="login-form">
         <form action="" method="POST">
           {% csrf_token %}
@@ -28,8 +27,8 @@
       </div>
     </div>
     {% if saml2 %}
-    <div class="col-sm-6">
-      <h4 style="padding-top: 0; margin-top: 0;">{% trans "Login with SSO" %}</h4>
+    <div class="col-xs-6">
+      <h4 style="padding-top: 0; margin-top: 20px;">{% trans "Login with SSO" %}</h4>
       <a href="{% url "saml2_login" %}">{% trans "Click here!" %}</a>
     </div>
     {% endif %}

circle/templates/registration/password_reset_complete.html

@@ -5,9 +5,8 @@
 
 {% block title-page %}{% trans "Password reset complete" %}{% endblock %}
 
-{% block content %}
-<div class="content">
-  <div class="row">
+{% block content_box %}
+<div class="row">
   <div class="login-form-errors">
     {% include "display-form-errors.html" %}
   </div>
@@ -17,6 +16,5 @@
       <a href="{% url "accounts.login" %}">{% trans "Click here to login" %}</a>
     </div>
   </div>
-  </div>
 </div>
 {% endblock %}

circle/templates/registration/password_reset_confirm.html

@@ -5,15 +5,16 @@
 
 {% block title-page %}{% trans "Password reset confirm" %}{% endblock %}
 
-{% block content %}
-<div>
-  <div class="row">
+{% block content_box %}
+<div class="row">
   <div class="login-form-errors">
     {% include "display-form-errors.html" %}
   </div>
   <div class="col-sm-12">
-      <div style="margin: 0 0 25px 0;">
-        {% blocktrans %}Please enter your new password twice so we can verify you typed it in correctly!{% endblocktrans %}
+    <div>
+      {% blocktrans %}
+      Please enter your new password twice so we can verify you typed it in correctly.
+      {% endblocktrans %}
     </div>
 
     {% if form %}
@@ -21,10 +22,9 @@
     {% else %}
       <div class="alert alert-warning">
         {% url "accounts.password-reset" as url %}
-          {% blocktrans with url=url %}This token is expired, please <a href="{{ url }}">request</a> a new password reset link again!{% endblocktrans %}
+        {% blocktrans with url=url %}This token is expired, please <a href="{{ url }}">request</a> a new password reset link again.{% endblocktrans %}
       </div>
     {% endif %}
   </div>
-  </div>
 </div>
 {% endblock %}

circle/templates/registration/password_reset_done.html

@@ -5,16 +5,14 @@
 
 {% block title-page %}{% trans "Password reset done" %}{% endblock %}
 
-{% block content %}
-<div class="content">
-  <div class="row">
+{% block content_box %}
+<div class="row">
   <div class="login-form-errors">
     {% include "display-form-errors.html" %}
   </div>
   <div class="col-sm-12">
     <div class="pull-right"><a href="{% url "accounts.login" %}">{% trans "Back to login" %}</a></div>
-      {% trans "We have sent you an email about your next steps!" %}
-    </div>
+    {% trans "We have sent you an email about your next steps." %}
   </div>
 </div>
 {% endblock %}

circle/templates/registration/password_reset_form.html

@@ -5,20 +5,20 @@
 
 {% block title-page %}{% trans "Password reset" %}{% endblock %}
 
-{% block content %}
-<div class="content">
-  <div class="row">
+{% block content_box %}
+<div class="row">
   <div class="login-form-errors">
     {% include "display-form-errors.html" %}
   </div>
   <div class="col-sm-12">
     <div class="pull-right"><a href="{% url "accounts.login" %}">{% trans "Back to login" %}</a></div>
-      <h4 style="margin: 0 0 25px 0;">{% blocktrans %}Enter your email address to reset your password!{% endblocktrans %}</h4>
+    <h4 style="margin: 0 0 25px 0;">
+      {% blocktrans %}Enter your email address to reset your password.{% endblocktrans %}
+    </h4>
     <form action="" method="POST">
         {% csrf_token %}
         {% crispy form %}
     </form>
   </div>
-  </div>
 </div>
 {% endblock %}