prettying-up the reviews add page

apps/reviews/templates/reviews/impala/add.html

@@ -1,4 +1,5 @@
 {% extends "impala/base.html" %}
+{% from 'includes/forms.html' import required, pretty_field %}
 
 {% set title = _('Add a review for {0}')|f(addon.name) %}
 
@@ -13,19 +14,17 @@
                          (url('i_reviews.list', addon.slug), _('Reviews')),
                          (None, _('Add'))]) }}
 
+  <h1>{{ title }}</h1>
+
   <div class="secondary">
     {{ addon|sidebar_listing }}
   </div>
 
-  <div class="primary island hero">
-    <header>
-      <h2>{{ title }}</h2>
-    </header>
-
-    <div class="prose">
+  <div class="primary island hero prettyform c">
+    <fieldset class="prose">
       {% trans support=addon.get_url_path() + "#support",
                guide=remora_url('pages/review_guide') %}
-      <p>Keep these tips in mind:</p>
+      <h2>Keep these tips in mind:</h2>
       <ul>
         <li>
           Write like you're telling a friend about your experience with the add-on.
@@ -47,18 +46,20 @@
       <p>Please read the <a href="{{ guide }}" target="_blank">Review Guidelines</a> for more detail
       about user add-on reviews.</p>
       {% endtrans %}
-    </div>
-
+    </fieldset>
     <form method="post" class="review-form" id="review-form"
           action="{{ url('i_reviews.add', addon.slug) }}">
       {{ csrf() }}
-      <p>
-        <label for="id_title">{{ _('Title:') }} <span class="optional">{{ _('(optional)') }}</span></label>
-        {{ form.title }}
-      </p>
-      {{ field(form.rating, _('Rating:')) }}
-      {{ field(form.body, _('Review:')) }}
-      <input type="submit" value="{{ _('Submit review') }}">
+      <fieldset>
+        <ul>
+          {{ pretty_field(form.title, label=_('title')) }}
+          {{ pretty_field(form.rating, label=_('rating')) }}
+          {{ pretty_field(form.body, label=_('review')) }}
+        </ul>
+      </fieldset>
+      <footer>
+        <button type="submit">{{ _('Submit review') }}</button>
+      </footer>
     </form>
   </div>
 {% endblock %}

apps/reviews/templates/reviews/impala/reply.html

@@ -1,4 +1,5 @@
 {% extends "impala/base.html" %}
+{% from 'includes/forms.html' import required, pretty_field %}
 
 {% set title = _('Reply to review by {0}')|f(review.user.name) %}
 
@@ -12,30 +13,31 @@
                   (addon.get_url_path(impala=True), addon.name),
                   (url('i_reviews.list', addon.slug), _('Reviews')),
                   (None, _('Reply'))]) }}
+  <h1>{{ title }}</h1>
 
   <div class="secondary">
     {{ addon|sidebar_listing }}
   </div>
 
-  <div class="primary island hero" id="reviews">
-    <h2>{{ title }}</h2>
-
+  <div class="primary island hero prettyform" id="reviews">
     {% include "reviews/impala/review.html" %}
-
-    <div class="review item reply">
+    <div class="c">
       <h2>{{ _('Write a Reply') }}</h2>
       <form method="post" action="{{ url('i_reviews.reply', addon.slug, review.id) }}">
         {{ csrf() }}
-        <p>
-          <label for="id_title">{{ form.title.label }} <span class="optional">{{ _('(optional)') }}</span></label>
-          {{ form.title }}
-        </p>
-        {{ field(form.body, _('Reply:')) }}
-        <input type="submit" value="{{ _('Submit Your Reply') }}">
-        {# L10n: this string is following a <button>. #}
-        {% trans url=url('i_reviews.list', addon.slug) %}
-          or <a href="{{ url }}">Cancel</a>
-        {% endtrans %}
+        <fieldset>
+          <ul>
+            {{ pretty_field(form.title, label=_('title')) }}
+            {{ pretty_field(form.body, label=_('reply')) }}
+          </ul>
+        </fieldset>
+        <footer>
+          <button type="submit">{{ _('Submit review') }}</button>
+          {# L10n: this string is following a <button>. #}
+          {% trans url=url('i_reviews.list', addon.slug) %}
+            <a href="{{ url }}">Cancel</a>
+          {% endtrans %}
+        </footer>
       </form>
     </div>
   </div>

media/css/impala/forms.less

@@ -17,9 +17,6 @@ textarea {
     width: 100%;
 }
 
-form p {
-    margin-bottom: 1em;
-}
 
 .note {
     color: @medium-gray;
@@ -27,6 +24,11 @@ form p {
     line-height: 1.4;
 }
 
+.errorlist {
+    color: #C00000;
+    font-size: 12px;
+}
+
 .edit_with_prefix, .edit-with-suffix {
     span {
         border: 1px solid #5875A0;
@@ -100,7 +102,10 @@ form p {
             text-transform: uppercase;
         }
     }
-    label {
+    li {
+        margin-bottom: 1em;
+    }
+    li > label {
         color: #555;
         display: inline-block;
         font-weight: normal;
@@ -129,12 +134,17 @@ form p {
         box-shadow: 2px 2px #EFF6FE inset;
         color: #5B738E;
         font-size: 1em;
-        margin-bottom: 1em;
         padding: 4px 7px;
         &:focus {
             color: #394D63;
             border-color: #809CBA;
         }
+        display: inline-block;
+        vertical-align: middle;
+    }
+    textarea {
+        width: 400px;
+        vertical-align: text-top;
     }
     p.note {
         color: #888;
@@ -183,9 +193,18 @@ form p {
             padding-left: 1em;
         }
     }
-    .listing-footer {
+    footer {
         button {
             float: right;
         }
     }
+    .error {
+        input[type="text"], input[type="password"], select, textarea {
+            border-color: #C00000;
+        }
+    }
+    .errorlist {
+        margin-top: 2px;
+        padding-left: 137px;
+    }
 }

media/css/impala/prose.less

@@ -1,5 +1,11 @@
+@import 'lib.less';
+
 .prose {
-    line-height: 1.2em;
+    color: @dark-gray;
+    line-height: 1.4em;
+    h2 {
+        margin-bottom: .5em;
+    }
     ul, ol {
         margin: 0 0 0 20px;
     }
@@ -11,6 +17,7 @@
     }
     li {
         margin-left: 1em;
+        margin-bottom: 1em;
     }
     b, strong {
         font-weight: bold;

media/css/impala/reviews.less

@@ -38,6 +38,9 @@
     &.reply {
         padding-left: 56px;
     }
+    &:first-child {
+        padding-top: 0;
+    }
 }
 
 .stars {
@@ -200,10 +203,9 @@
 }
 
 .ratingwidget {
-    display: block;
+    display: inline-block;
     float: none;
     width: 65px;
-    margin-bottom: 1em;
     input {
         display: none;
     }

media/css/impala/site.less

@@ -28,7 +28,8 @@ a {
     .gradient-two-color(#FCFDFE, #F4F8FC);
     border: 1px solid @border-blue;
     .border-radius(5px);
-    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset, 0 0 1px rgba(0, 0, 0, 0.1));
+    .box-shadow(0 -2px 0 rgba(204, 223, 243, 0.3) inset,
+                0 0 1px rgba(0, 0, 0, 0.1));
     display: block;
     float: left;
     margin-bottom: 15px;

media/css/impala/typography.less

@@ -18,11 +18,6 @@ body {
     font-size: 13px;
 }
 
-h1 {
-    color: @red;
-    font: italic 24px/1.3 @serif-stack;
-}
-
 section + h1 {
     margin: 15px 0;
 }
@@ -31,11 +26,27 @@ section + h1 {
     font: normal 40px/40px MetaBlack;
     letter-spacing: -1px;
     text-transform: uppercase;
+    margin-bottom: 7px;
+}
+
+h1 {
+    font: italic 24px @serif-stack;
+    color: @red;
+    margin-bottom: 16px;
 }
 
 h2 {
-    color: @dark-gray;
     font: italic 18px @serif-stack;
+    color: @dark-gray;
+}
+
+hgroup {
+    h2 {
+        color: #666;
+    }
+    b {
+        font-weight: bold;
+    }
 }
 
 h4 {
@@ -89,9 +100,6 @@ pre {
 }
 
 .gutter {
-    .primary, .secondary {
-        font-family: @serif-stack;
-    }
     .secondary h3 {
         font-style: italic;
     }
@@ -103,9 +111,14 @@ pre {
     margin-left: .5em;
 }
 
+.addon-details {
+    .primary, .secondary {
+        font-family: @serif-stack;
+    }
+}
+
 .island, .modal, .popup {
     h2 {
-        font-size: 18px;
         margin-bottom: .5em;
         .seeall {
             .defaultlink

templates/includes/forms.html

@@ -1,3 +1,17 @@
 {% macro required() -%}
   <abbr class="req" title="{{ _('required') }}">*</abbr>
 {%- endmacro %}
+
+{% macro pretty_field(field, label=None, tag='li', req=False) %}
+  {% set req = field.field.required or req %}
+  <{{ tag }} class="row{{ ' error' if field.errors else '' }}">
+    <label for="{{ field.auto_id }}">
+      {{- label or field.label }}
+      {% if req %}
+        {{ required() -}}
+      {% endif %}
+    </label>
+    {{ field.as_widget() }}
+    {{ field.errors }}
+  </{{ tag }}>
+{% endmacro %}