Redesigned some forms

misago/forms/__init__.py

@@ -112,7 +112,7 @@ class Form(forms.Form):
         for index, repeat in enumerate(self.validate_repeats):
             # Check empty fields
             for field in repeat:
-                if not self.data[field]:
+                if not field in self.data:
                     try:
                         if len(repeat) == 2:
                             self.errors['_'.join(repeat)] = [self.repeats_errors[index]['fill_both']]

static/cranefly/css/cranefly.css

@@ -880,6 +880,8 @@ footer .breadcrumb li.active{color:#555555;}
 .form-container{background:#ffffff;border:1px solid #e7e7e7;border-radius:3px;margin:0px -21px;margin-bottom:20px;padding:20px;padding-top:-15px;}.form-container .form-header{border-bottom:1px solid #e7e7e7;margin-top:-20px;margin-bottom:20px;padding:10px 0px;}.form-container .form-header h1{margin:0px;padding:0px;font-size:17.5px;}
 .form-container form{margin:0px;}.form-container form fieldset{border-top:1px solid #e7e7e7;padding-top:10px;}.form-container form fieldset.first{border-top:none;padding-top:0px;}
 .form-container form .control-label{font-weight:bold;}
+.form-container form.form-horizontal fieldset.last .control-group:last-child{margin-bottom:0px;padding-bottom:0px;}
+.form-container form.form-horizontal .form-actions{padding-left:200px;}
 .form-container .form-actions{border-radius:0px 0px 3px 3px;margin:-20px;margin-top:10px;}
 .btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}
 .btn.btn-primary{background-color:#3c85a3;border-color:#357690;text-shadow:0px 1px 0px #27576b;}.btn.btn-primary:hover,.btn.btn-primary:active{background-color:#268eb9;border-color:#217ea4;}
@@ -894,7 +896,7 @@ footer .breadcrumb li.active{color:#555555;}
 .btn.btn-danger i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-inverse{background-color:#333333;border-color:#262626;text-shadow:0px 1px 0px #0d0d0d;}.btn.btn-inverse:hover,.btn.btn-inverse:active{background-color:#262626;border-color:#1a1a1a;}
 .btn.btn-inverse i{background-image:url("../img/glyphicons-halflings-white.png");}
-.btn.btn-link{opacity:0.6;filter:alpha(opacity=60);color:#333333;}.btn.btn-link:hover,.btn.btn-link:active{opacity:0.9;filter:alpha(opacity=90);}
+.btn.btn-link{background:none;border:none;opacity:0.7;filter:alpha(opacity=70);color:#333333;}.btn.btn-link:hover,.btn.btn-link:active{opacity:0.9;filter:alpha(opacity=90);}
 .error-page{text-align:center;}.error-page .error-color{color:#cf402e;}
 .error-page .error-ban-reason{border:1px solid #cf402e;border-radius:3px;background-color:#fbeeed;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, #fdf6f5 5px, #fdf6f5 10px);-webkit-box-shadow:0px 0px 0px 3px #e38b80;-moz-box-shadow:0px 0px 0px 3px #e38b80;box-shadow:0px 0px 0px 3px #e38b80;padding:11px 19px;text-align:left;}.error-page .error-ban-reason :last-child{margin-bottom:0px;padding-bottom:0px;}
 .error-page .error-ban-expires{color:#cf402e;font-weight:bold;}
@@ -917,6 +919,9 @@ footer .breadcrumb li.active{color:#555555;}
 .index-popular-threads ul{margin:0px;margin-bottom:20px;padding:0px;}.index-popular-threads ul li{border-bottom:1px solid #e2e2e2;padding:7px 0px;}.index-popular-threads ul li a:link,.index-popular-threads ul li a:active,.index-popular-threads ul li a:visited,.index-popular-threads ul li a:hover{color:#333333;font-weight:bold;}
 .index-popular-threads ul li .muted{font-size:10.5px;}.index-popular-threads ul li .muted a:link,.index-popular-threads ul li .muted a:active,.index-popular-threads ul li .muted a:visited,.index-popular-threads ul li .muted a:hover{color:#555555;}
 .index-stats{margin-bottom:20px;opacity:0.6;filter:alpha(opacity=60);overflow:auto;font-weight:bold;}.index-stats ul li{float:left;padding:0px;padding-right:20px;}
+.signin-help h2{margin-bottom:0px;color:#999999;font-size:17.5px;}
+.signin-help ul{margin-bottom:0px;}
+.signin-help a:link,.signin-help a:visited{opacity:0.9;filter:alpha(opacity=90);color:#333333;font-weight:bold;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
 .index-rank-mvp ul li{background-color:#1a93c5;border-color:#037fb3;}.index-rank-mvp ul li a:link,.index-rank-mvp ul li a:active,.index-rank-mvp ul li a:visited,.index-rank-mvp ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #011f2c;}

static/cranefly/css/cranefly.less

@@ -73,6 +73,7 @@
 @import "cranefly/buttons.less";
 @import "cranefly/error.less";
 @import "cranefly/index.less";
+@import "cranefly/signin.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/buttons.less

@@ -111,7 +111,9 @@
   }
 
   &.btn-link {
-    .opacity(60);
+    background: none;
+    border: none;
+    .opacity(70);
 
     color: @textColor;
 

static/cranefly/css/cranefly/forms.less

@@ -27,26 +27,41 @@
   }
 
   form {
-	margin: 0px;
+		margin: 0px;
 
-	fieldset {
-	  border-top: 1px solid darken(@bodyBackground, 8%);
-	  padding-top: @baseLineHeight * 0.5;
+		fieldset {
+		  border-top: 1px solid darken(@bodyBackground, 8%);
+		  padding-top: @baseLineHeight * 0.5;
 
-	  &.first {
-	  	border-top: none;
-	  	padding-top: 0px;
-	  }
-	}
+		  &.first {
+		  	border-top: none;
+		  	padding-top: 0px;
+		  }
+		}
+
+		.control-label {
+		  font-weight: bold;
+		}
 
-	.control-label {
-	  font-weight: bold;
-	}
+		&.form-horizontal {
+			fieldset {
+				&.last {
+			    .control-group:last-child {
+			  		margin-bottom: 0px;
+			  		padding-bottom: 0px;
+			    }
+				}
+			}
+
+			.form-actions {
+    		padding-left: @horizontalComponentOffset + @baseLineHeight;
+			}
+		}
   }
 
   .form-actions {
-	border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
-	margin: (@baseLineHeight * -1);
-	margin-top: @baseLineHeight * 0.5;
+		border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
+		margin: (@baseLineHeight * -1);
+		margin-top: @baseLineHeight * 0.5;
   }
 }

static/cranefly/css/cranefly/signin.less

@@ -0,0 +1,22 @@
+// Sign-in page
+// -------------------------
+
+.signin-help {
+  h2 {
+    margin-bottom: 0px;
+
+    color: @grayLight;
+    font-size: @fontSizeLarge;
+  }
+
+  ul {
+    margin-bottom: 0px;
+  }
+
+  a:link, a:visited {
+    .opacity(90);
+
+    color: @textColor;
+    font-weight: bold;
+  }
+}

templates/cranefly/resend_activation.html

@@ -8,19 +8,29 @@
 
 {% block content %}
 <div class="row">
-  <div class="span8 offset2">
-    <div class="page-header">
-      <h1>{% trans %}Request new Activation E-mail{% endtrans %}</h1>
-    </div>
-    {% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-    <form action="{% url 'send_activation' %}" method="post">
-      <div class="form-container">
-        {{ form_theme.form_widget(form, width=8) }}
+  <div class="span6 offset3">
+    <div class="form-container">
+
+      <div class="form-header">
+        <h1>{% trans %}Request new Activation E-mail{% endtrans %}</h1>
       </div>
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">{% trans %}Request new E-mail{% endtrans %}</button>
+
+      {% if message %}
+      <div class="messages-list">
+        {{ macros.draw_message(message) }}
       </div>
-    </form>
+      {% endif %}
+
+      <form action="{% url 'send_activation' %}" method="post">
+        <div class="form-fields">
+          {{ form_theme.form_widget(form, width=6) }}
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary">{% trans %}Request new E-mail{% endtrans %}</button>
+        </div>
+      </form>
+
+    </div>
   </div>
 </div>
 {% endblock %}

templates/cranefly/reset_password.html

@@ -8,19 +8,29 @@
 
 {% block content %}
 <div class="row">
-  <div class="span8 offset2">
-    <div class="page-header">
-      <h1>{% trans %}Request New Password{% endtrans %}</h1>
-    </div>
-    {% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-    <form action="{% url 'forgot_password' %}" method="post">
-      <div class="form-container">
-        {{ form_theme.form_widget(form, width=8) }}
+  <div class="span6 offset3">
+    <div class="form-container">
+
+      <div class="form-header">
+        <h1>{% trans %}Request New Password{% endtrans %}</h1>
       </div>
-      <div class="form-actions">
-        <button type="submit" class="btn btn-primary">{% trans %}Reset Password{% endtrans %}</button>
+
+      {% if message %}
+      <div class="messages-list">
+        {{ macros.draw_message(message) }}
       </div>
-    </form>
+      {% endif %}
+
+      <form action="{% url 'forgot_password' %}" method="post">
+        <div class="form-fields">
+          {{ form_theme.form_widget(form, width=6) }}
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary">{% trans %}Reset Password{% endtrans %}</button>
+        </div>
+      </form>
+
+    </div>
   </div>
 </div>
 {% endblock %}

templates/cranefly/signin.html

@@ -5,42 +5,59 @@
 {% import "cranefly/macros.html" as macros with context %}
 
 {% block title %}{{ macros.page_title(title=_('Sign In')) }}{% endblock %}
-      
+     
 {% block content %}
-<div class="page-header">
-  <h1>{% trans %}Sign In to Your Account{% endtrans %}</h1>
-</div>
 <div class="row">
-  <div class="span6">
-    <div class="well">
-	  {% if message %}<div class="alert alert-form alert-{{ message.type }}">
-  	    {{ macros.draw_message_icon(message) }}
-	    <p><strong>{{ message.message }}</strong></p>{% if bad_password %}
-	    <p class="protip"><a href="{% url 'forgot_password' %}">{% trans %}Click here if you forgot your sign in credentials.{% endtrans %}</a></p>{% endif %}{% if not_active %}
-	    <p class="protip"><a href="{% url 'send_activation' %}">{% trans %}Click here if you didn't receive activation e-mail.{% endtrans %}</a></p>{% endif %}{% if banned_account.reason_user %}
-	    {{ banned_account.reason_user|markdown|safe }}{% endif %}{% if banned_account.expires %}
-        <p class="protip">{% trans ban_expires=banned_account.expires|date %}Your ban will expire on {{ ban_expires }}{% endtrans %}</p>{% endif %}
-	  </div>{% endif %}
-	  <form class="form-horizontal" action="{% url 'sign_in' %}" method="post">
-	    <div class="form-container">
-	      {{ form_theme.form_widget(form, horizontal=true, width=6) }}
-	    </div>
-	    <div class="form-actions">
-	      <button type="submit" class="btn btn-primary">{% trans %}Sign In{% endtrans %}</button>
-	    </div>
-	  </form>
-	</div>
-  </div>
-  <div class="span6">  
-    <h3>{% trans %}I don't remember my password{% endtrans %}</h3>
-    <p><i class="icon-refresh"></i> <a href="{% url 'forgot_password' %}"><strong>{% trans %}I want to reset my account's password{% endtrans %}</strong></a></p>
-	  
-    <h3>{% trans %}I haven't received activation e-mail{% endtrans %}</h3>
-    <p><i class="icon-envelope"></i> <a href="{% url 'send_activation' %}"><strong>{% trans %}Resend me e-mail with activation link{% endtrans %}</strong></a></p>
-	  
-    {% if settings.account_activation != 'block' %}
-    <h3>{% trans %}I don't have account yet{% endtrans %}</h3>
-    <p><i class="icon-edit"></i> <a href="{% url 'register' %}"><strong>{% trans %}I want to register new account{% endtrans %}</strong></a></p>{% endif %}
+  <div class="span6 offset3">
+    <div class="form-container">
+
+      <div class="form-header">
+        <h1>{% trans %}Sign In to Your Account{% endtrans %}</h1>
+      </div>
+
+      {% if message %}
+      <div class="messages-list">
+        <div class="alert alert-{{ message.type }}">
+          {{ macros.draw_message_icon(message) }}
+          <p><strong>{{ message.message }}</strong></p>
+          {% if bad_password %}
+          <p><a href="{% url 'forgot_password' %}">{% trans %}Click here if you forgot your sign in credentials.{% endtrans %}</a></p>
+          {% endif %}
+          {% if not_active %}
+          <p><a href="{% url 'send_activation' %}">{% trans %}Click here if you didn't receive activation e-mail.{% endtrans %}</a></p>
+          {% endif %}
+          {% if banned_account.reason_user %}
+          {{ banned_account.reason_user|markdown|safe }}
+          {% endif %}
+          {% if banned_account.expires %}
+          <p><strong>{% trans ban_expires=banned_account.expires|date %}Your ban will expire on {{ ban_expires }}{% endtrans %}</p>
+          {% endif %}
+        </div>
+      </div>
+      {% endif %}
+
+      <form class="form-horizontal" action="{% url 'sign_in' %}" method="post">
+        <div class="form-fields">
+          {{ form_theme.form_widget(form, horizontal=true, width=6) }}
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="btn btn-primary">{% trans %}Sign In{% endtrans %}</button>
+          <div class="signin-help">
+
+            <h2>{% trans %}Problems Signing In?{% endtrans %}</h2>
+            <ul class="unstyled">
+              <li><a href="{% url 'forgot_password' %}"><i class="icon-refresh"></i> {% trans %}I don't remember my password{% endtrans %}</a></li>
+              <li><a href="{% url 'send_activation' %}"><i class="icon-envelope"></i> {% trans %}I haven't received activation e-mail{% endtrans %}</a></li>
+              {% if settings.account_activation != 'block' %}
+              <li><a href="{% url 'register' %}"><i class="icon-edit"></i> {% trans %}I don't have account{% endtrans %}</a></li>
+              {% endif %}
+            </ul>
+
+          </div>
+        </div>
+      </form>
+
+    </div>
   </div>
 </div>
 {% endblock %}