localizers category page tweaks

apps/localizers/templates/localizers/categories.html

@@ -13,30 +13,29 @@
   {{ locale_switcher(current_locale=locale_code) }}
 </header>
 
-<section class="hero island c full">
+<section id="localizers" class="hero island c full">
   <form method="POST" action="">
     {% if formset.errors %}<p class="notification-box error">
       {{ _('There are errors in this form.  Please correct them below.') }}</p>
     {% endif %}
     {% for app_id, cats in categories %}
-      <div class="appversion prose">
-        <h2>
-          {% if app_id %}
-            {% set app = apps[app_id] %}
-            <img src="{{ media('img/app-icons/small/' + app.short + '.png') }}">
-            {{ app.pretty }}
-          {% else %}
-            None
-          {% endif %}
-        </h2>
-      </div>
+      {% set app = apps[app_id] if app_id or None %}
+      <h2 class="prose {{ (' app ' + app.short) if app }}">
+        {% if app %}
+          {{ app.pretty }}
+        {% else %}
+          {{ _('None') }}
+        {% endif %}
+      </h2>
       <table>
-        <tbody>
+        <thead>
           <tr>
             <th width="40%">en-US</th>
             <th width="40%">{{ locale_code }}</th>
-            <th width="20%">Type</th>
+            <th width="20%">{{ _('Type') }}</th>
           </tr>
+        </thead>
+        <tbody>
           {% for cat in cats %}
             {% set form = form_map[cat.id] %}
             {% if form.errors %}
@@ -56,7 +55,7 @@
     {% endfor %}
     {{ formset.management_form }}
     {{ csrf() }}
-    <p><input type="submit" value="{{ _('Update') }}"></p>
+    <footer><input type="submit" value="{{ _('Update') }}"></footer>
   </form>
 </section>
 

media/css/impala/forms.less

@@ -1,5 +1,9 @@
 @import 'lib';
 
+header form {
+    margin-bottom: 1em;
+}
+
 input[type=text], input[type=color], input[type=password], select, textarea {
     border: 1px solid #5875A0;
     color: @medium-gray;

media/css/impala/localizers.less

@@ -0,0 +1,38 @@
+@import 'lib';
+
+#localizers {
+    table + h2 {
+        margin-top: 1em;
+    }
+    h2 {
+        line-height: 32px;
+        &.app {
+            background-repeat: no-repeat;
+            padding-left: 40px;
+        }
+        &.firefox, &.mobile {
+            background-image: url(../../img/app-icons/32/firefox.png);
+        }
+        &.thunderbird {
+            background-image: url(../../img/app-icons/32/thunderbird.png);
+        }
+        &.seamonkey {
+            background-image: url(../../img/app-icons/32/seamonkey.png);
+        }
+        &.sunbird {
+            background-image: url(../../img/app-icons/32/sunbird.png);
+        }
+    }
+    footer {
+        border-top: 1px dotted @border-blue;
+        margin-top: 1em;
+        padding-top: 1em;
+    }
+}
+
+.html-rtl #localizers {
+    .app {
+        background-position: 100% 0;
+        padding: 0 40px 0 0;
+    }
+}

settings.py

@@ -492,6 +492,7 @@ MINIFY_BUNDLES = {
             'css/impala/formset.less',
             'css/impala/tables.less',
             'css/impala/compat.less',
+            'css/impala/localizers.less',
         ),
         'zamboni/stats': (
             'css/impala/stats.less',