Bug 572838, versions page is prettier

apps/versions/templates/versions/version.html

@@ -1,61 +1,59 @@
 {# addon, version, request #}
 <div class="version {{ itemclass }}">
   {% set versions_url = url('addons.versions', addon.id) %}
-  <h4><a href="{{ versions_url }}#version-{{ version.version }}"
+  <h3><a href="{{ versions_url }}#version-{{ version.version }}"
         title="{{ _('Permanent link to this version') }}">
        {{ _('Version {0}', 'addon_display_header_version')|f(version.version) }}</a>
-    &mdash;
     <span title="{{ version.created|isotime }}">{{
       version.created|datetime }}</span>
     {% if version.has_files %}
-      &mdash;
       <span>{{ _('{0} KB')|f(version.all_files[0].size|int|numberfmt) }}</span>
     {% endif %}
-  </h4>
+  </h3>
 
-  {{ install_button(addon, version=version) }}
+  <div class="item-info">
+    {{ install_button(addon, version=version) }}
 
-  {% if addon.compatible_apps %}
-    <h5>{{ _('Works with:') }}</h5>
-    <ul>
-      {% for compat in addon.compatible_apps.values() %}
-        <li>{{ compat }}</li>
-      {% endfor %}
-    </ul>
-  {% endif %}
-
-  <div class="prose userinput" {{ version.releasenotes|locale_html }}>
-    {{ version.releasenotes }}
+    {% if addon.compatible_apps %}
+      <h5>{{ _('Works with:') }}</h5>
+      <ul>
+        {% for compat in addon.compatible_apps.values() %}
+          <li>{{ compat }}</li>
+        {% endfor %}
+      </ul>
+    {% endif %}
   </div>
 
+  <blockquote>
+    <div class="prose userinput" {{ version.releasenotes|locale_html }}>
+      {{ version.releasenotes }}
+    </div>
+  </blockquote>
+
   {# License #}
   {% if version.license %}
     <h5>
       {{ _('Source Code License') }}
       {# TODO reverse URL #}
-      <a href="{{ remora_url('/pages/developer_faq#license') }}">
+      <span><a href="{{ remora_url('/pages/developer_faq#license') }}">
         {{ _("What's this?", 'addons_display_a_license_what') }}
-      </a>
+      </a></span>
     </h5>
     {# TODO reverse URL #}
     <a href="{{ remora_url('/versions/license/{0}'|f(version.id)) }}">
       {{ version.license.name }}</a>
   {% endif %}
 
-  <ul class="further-navigation">
+  <nav class="further-navigation">
     {% if addon.view_source and request.user.is_authenticated() and version.has_files %}
-      <li>
         {# TODO reverse URL #}
         <a href="{{ remora_url('/files/browse/{0}'|f(version.all_files[0].pk)) }}">
           {{ _('View the source') }}</a>
-      </li>
     {% endif %}
     {% if show_versions_link and not addon.is_selfhosted() %}
-      <li>
         <a href="{{ versions_url }}">
           {{ _('View All Versions') }}
         </a>
-      </li>
     {% endif %}
-  </ul>
+  </nav>
 </div>

apps/versions/templates/versions/version_list.html

@@ -16,12 +16,12 @@
       <h2>{{ _('{0} Version History')|f(addon.name) }}</h2>
       {% with cnt=versions.paginator.count %}
         {# L10n: {0} is a number. #}
-        <h3>{{ ngettext('{0} Version', '{0} Versions', cnt)|f(cnt) }}</h3>
+        <h3>{{ ngettext('{0} version', '{0} versions', cnt)|f(cnt) }}</h3>
       {% endwith %}
     </hgroup>
   </header>
-  <div class="warning">
-    <strong>{{ _('Be careful with old versions!') }}</strong>
+  <div class="warning highlight">
+    <h2>{{ _('Be careful with old versions!') }}</h2>
     <p>{% trans url=url('addons.detail', addon.id) %}
       These versions are displayed for reference and testing purposes.
       You should always use the <a href="{{ url }}">latest version</a> of an add-on.

media/css/zamboni/zamboni.css

@@ -1676,11 +1676,37 @@ form .error .note.error {
 }
 
 .other-categories,
-#refine-results {
+#refine-results,
+.versions .primary > .warning {
     background: #fff;
     border: 1px solid #c8e8f3;
 }
 
+.versions .primary > .warning h2 {
+    font-style: italic;
+    margin: 0;
+}
+
+.versions .primary > .warning {
+    border-color: #C63717;
+}
+
+.versions .primary > .warning p {
+    margin-top: .5em;
+}
+
+.item.version {
+    padding: 2em;
+}
+
+.item.version .item-info {
+    margin-right:0;
+}
+
+.item.version h5 {
+    font-size: 1em;
+}
+
 .other-categories .items {
     color: rgb(114, 142, 164);
     font-size: 10px; /* or the corresponding size in em's  */
@@ -2058,6 +2084,10 @@ form .error .note.error {
     border-top-color: #0471ed;
 }
 
+.primary > .warning {
+
+}
+
 /**
  *    Firefox Cup promo styles
  *    TODO remove these when promo is pulled