Revert "Layout overhaul time!"

This reverts a whole bunch of commits, fb1dc4f5 thru 92e8ca79, where
an experimental new layout was played with.  Unfortunately, this
layout broke the look and feel of master, even though it was going in
the right direction for mobile stuff.  Jef said he'll do things in a
branch!

8 files changed, 146 insertions, 173 deletions

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 9c429404..73b07384 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -109,7 +109,7 @@ input, textarea {
 .container {
   margin: auto;
   width: 96%;
-  max-width: 820px;
+  max-width: 940px;
 }
 
 header {
@@ -151,19 +151,16 @@ footer {
 }
 
 .media_pane {
-  width: 560px;
+  width: 640px;
   margin-left: 0px;
   margin-right: 10px;
   float: left;  
 }
 
-img.media_image {
-  width: 100%;
-}
-
 .media_sidebar {
-  width: 240px;
+  width: 280px;
   margin-left: 10px;
+  margin-right: 0px;
   float: left;
 }
 
@@ -255,6 +252,15 @@ text-align: center;
   float: right;
 }
 
+textarea#comment_content {
+  resize: vertical;
+  width: 634px;
+  height: 90px;
+  border: none;
+  background-color: #f1f1f1;
+  padding: 3px;
+}
+
 .clear {
   clear: both;
   display: block;
@@ -264,15 +270,6 @@ text-align: center;
   height: 0;
 }
 
-h3.sidedata {
-  border: none;
-  background-color: #212121;
-  border-radius: 4px 4px 0 0;
-  padding: 3px 8px;
-  margin: 20px 0 5px 0;
-  font-size: 1em;
-}
-
 /* forms */
 
 .form_box,.form_box_xl {
@@ -355,18 +352,13 @@ textarea#description, textarea#bio {
 }
 
 textarea#comment_content {
-  resize: vertical;
-  width: 100%;
+  width: 634px;
   height: 90px;
   border: none;
   background-color: #f1f1f1;
   padding: 3px;
 }
 
-#form_comment .form_field_input {
-  padding-right: 6px;
-}
-
 /* media galleries */
 
 .media_thumbnail {
@@ -377,7 +369,6 @@ textarea#comment_content {
   margin: 0px 4px 10px 4px;
   text-align: center;
   font-size: 0.875em;
-  list-style: none;
 }
 
 .media_thumbnail a {
@@ -389,12 +380,6 @@ textarea#comment_content {
 
 h2.media_title {
   margin-bottom: 0px;
-  display: inline-block;
-}
-
-p.context {
-  display: inline-block;
-  padding-top: 4px;
 }
 
 p.media_specs {
@@ -421,21 +406,19 @@ img.media_icon {
 
 /* navigation */
 
-.navigation {
-  float: right;
-}
-
 .navigation_button {
   width: 135px;
-  display: inline-block;
+  display: block;
+  float: left;
   text-align: center;
   background-color: #1d1d1d;
   border: 1px solid;
   border-color: #2c2c2c #232323 #1a1a1a;
   border-radius: 4px;
   text-decoration: none;
-  padding: 4px 0 8px;
-  margin: 0 0 6px
+  padding: 12px 0 16px;
+  font-size: 1.4em;
+  margin: 0 0 20px
 }
 
 .navigation_left {
@@ -520,43 +503,23 @@ table.media_panel th {
 }
 
 /* Media queries and other responsivisivity */
-
-@media screen and (max-width: 820px) {
+@media screen and (max-width: 680px) {
   .media_pane {
     width: 100%;
     margin: 0px;
   }
-  
-  .media_sidebar {
-    width: 100%;
-    margin: 0px;
-  }
-
   img.media_image {
     width: 100%;
   }
+}
 
+@media screen and (max-width: 960px) {
   .profile_sidebar {
     width: 100%;
     margin: 0px;
   }
-
   .profile_showcase {
     width: 100%;
     margin: 0px;
   }
-  
-  .navigation {
-    float: none;
-  }
-  
-  .navigation_button {
-    width: 49%;
-    float: right;
-  }
-  
-  .navigation_left {
-    margin-right: 0;
-    float: left;
-  }
 }
diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
index 3e711e92..d2503a4e 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/media.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/media.html
@@ -40,84 +40,67 @@
 {% endblock mediagoblin_head %}
 
 {% block mediagoblin_content %}
-  {% trans user_url=request.urlgen(
-              'mediagoblin.user_pages.user_home',
-              user=media.get_uploader.username),
-              username=media.get_uploader.username -%}
-    <p class="context">❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p>
-  {%- endtrans %}
-  {% include "mediagoblin/utils/prev_next.html" %}
-  <div class="media_image_container">
-    {% block mediagoblin_media %}
-      {% set display_media = request.app.public_store.file_url(
-               media.get_display_media(media.media_files)) %}
-      {# if there's a medium file size, that means the medium size
-       #  isn't the original... so link to the original!
-       #}
-      {% if media.media_files.has_key('medium') %}
-        <a href="{{ request.app.public_store.file_url(
-                      media.media_files['original']) }}">
+  <div class="media_pane">
+    <div class="media_image_container">
+      {% block mediagoblin_media %}
+        {% set display_media = request.app.public_store.file_url(
+                 media.get_display_media(media.media_files)) %}
+        {# if there's a medium file size, that means the medium size
+         #  isn't the original... so link to the original!
+         #}
+        {% if media.media_files.has_key('medium') %}
+          <a href="{{ request.app.public_store.file_url(
+                        media.media_files['original']) }}">
+            <img class="media_image"
+                 src="{{ display_media }}"
+                 alt="Image for {{ media.title }}" />
+          </a>
+        {% else %}
           <img class="media_image"
                src="{{ display_media }}"
                alt="Image for {{ media.title }}" />
-        </a>
-      {% else %}
-        <img class="media_image"
-             src="{{ display_media }}"
-             alt="Image for {{ media.title }}" />
-      {% endif %}
-    {% endblock %}
-  </div>
-  <div class="media_pane">
+        {% endif %}
+      {% endblock %}
+    </div>
     <h2 class="media_title">
       {{ media.title }}
     </h2>
-    {% if request.user and
-          (media.uploader == request.user._id or 
-           request.user.is_admin) %}
-      {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
-                                 user= media.get_uploader.username,
-                                 media= media._id) %}
-      <a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
-      {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
-                                 user= media.get_uploader.username,
-                                 media= media._id) %}
-      <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
-    {% endif %}
     {% autoescape False %}
       <p>{{ media.description_html }}</p>
-    {% endautoescape %}
-    {% if media.attachment_files|count %}
-      <h3>Attachments</h3>
-      <ul>
-        {% for attachment in media.attachment_files %}
-          <li>
-            <a href="{{ request.app.public_store.file_url(attachment.filepath) }}">
-              {{ attachment.name }}
-            </a>
-          </li>
-        {% endfor %}
-      </ul>
-    {% endif %}
-    {% if app_config['allow_attachments']
-          and request.user
-          and (media.uploader == request.user._id
-               or request.user.is_admin) %}
-      <p>
-        <a href="{{ request.urlgen('mediagoblin.edit.attachments',
-                      user=media.get_uploader.username,
-                      media=media._id) }}">Add attachment</a>
-      </p>
-    {% endif %}
+    {% endautoescape %}       
+    <p class="media_specs">
+      {% trans date=media.created.strftime("%Y-%m-%d") -%}
+        Added on {{ date }}.
+      {%- endtrans %}
+      {% if request.user and
+            (media.uploader == request.user._id or 
+             request.user.is_admin) %}
+        {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
+                                   user= media.get_uploader.username,
+                                   media= media._id) %}
+        <a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
+        {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
+                                   user= media.get_uploader.username,
+                                   media= media._id) %}
+        <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
+      {% endif %}
+    </p>
     {% if comments %}
       <h3>
+        {% if comments.count()==1 %}
+          {% trans comment_count=comments.count() -%}{{ comment_count }} comment{%- endtrans %}
+        {% elif comments.count()>1 %}
+          {% trans comment_count=comments.count() -%}{{ comment_count }} comments{%- endtrans %}
+        {% else %}
+          {% trans %}No comments yet.{% endtrans %}
+        {% endif %}
         <div class="right_align">
           <a
             {% if not request.user %}
               href="{{ request.urlgen('mediagoblin.auth.login') }}"
             {% endif %}
             class="button_action" id="button_addcomment" title="Add a comment">
-            {% trans %}Add a comment{% endtrans %}
+            {% trans %}Add one{% endtrans %}
           </a>
         </div>
       </h3>
@@ -167,11 +150,35 @@
     {% endif %}
   </div>
   <div class="media_sidebar">
-    {% trans date=media.created.strftime("%Y-%m-%d") -%}
-      <h3 class="sidedata">Added on</h3>
-      <p>{{ date }}</p>
-    {%- endtrans %}
-
+    {% trans user_url=request.urlgen(
+                'mediagoblin.user_pages.user_home',
+                user=media.get_uploader.username),
+                username=media.get_uploader.username -%}
+      <p>❖ Browsing media by <a href="{{ user_url }}">{{ username }}</a></p>
+    {%- endtrans %}  
+    {% include "mediagoblin/utils/prev_next.html" %}
+    {% if media.attachment_files|count %}
+      <h3>Attachments</h3>
+      <ul>
+        {% for attachment in media.attachment_files %}
+          <li>
+            <a href="{{ request.app.public_store.file_url(attachment.filepath) }}">
+              {{ attachment.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    {% endif %}
+    {% if app_config['allow_attachments']
+          and request.user
+          and (media.uploader == request.user._id
+               or request.user.is_admin) %}
+      <p>
+        <a href="{{ request.urlgen('mediagoblin.edit.attachments',
+                      user=media.get_uploader.username,
+                      media=media._id) }}">Add attachment</a>
+      </p>
+    {% endif %}
     {% if media.tags %}
       {% include "mediagoblin/utils/tags.html" %}
     {% endif %}
diff --git a/mediagoblin/templates/mediagoblin/utils/exif.html b/mediagoblin/templates/mediagoblin/utils/exif.html
index bd2e3307..0dd187f2 100644
--- a/mediagoblin/templates/mediagoblin/utils/exif.html
+++ b/mediagoblin/templates/mediagoblin/utils/exif.html
@@ -20,7 +20,7 @@
   {% if media.media_data.has_key('exif')
         and app_config['exif_visible']
         and media.media_data.exif.has_key('useful') %}
-    <h3 class="sidedata">EXIF</h3>
+    <h4>EXIF</h4>
     <table>
       {% for key, tag in media.media_data.exif.useful.items() %}
         <tr>
diff --git a/mediagoblin/templates/mediagoblin/utils/geolocation_map.html b/mediagoblin/templates/mediagoblin/utils/geolocation_map.html
index 118d0e62..c1909ae5 100644
--- a/mediagoblin/templates/mediagoblin/utils/geolocation_map.html
+++ b/mediagoblin/templates/mediagoblin/utils/geolocation_map.html
@@ -20,7 +20,7 @@
   {% if media.media_data.has_key('gps')
         and app_config['geolocation_map_visible']
         and media.media_data.gps %}
-    <h3 class="sidedata">Location</h3>
+    <h4>Map</h4>
     <div>
       {% set gps = media.media_data.gps %}
         <div id="tile-map" style="width: 100%; height: 196px;">
diff --git a/mediagoblin/templates/mediagoblin/utils/license.html b/mediagoblin/templates/mediagoblin/utils/license.html
index ab157508..2438ed4e 100644
--- a/mediagoblin/templates/mediagoblin/utils/license.html
+++ b/mediagoblin/templates/mediagoblin/utils/license.html
@@ -17,8 +17,8 @@
 #}
 
 {% block license_content -%}
-  <h3 class="sidedata">{% trans %}License{% endtrans %}</h3>
   <p>
+    {% trans %}License:{% endtrans %}
     {% if media.license %}
       <a href="{{ media.license }}">{{ media.get_license_data().abbreviation }}</a>
     {% else %}
diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
index 6b5988fb..81506a84 100644
--- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
@@ -19,23 +19,29 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, media_entries, col_number=5) %}
-  <ul class="thumb_gallery">
+  <table class="thumb_gallery">
     {% for row in gridify_cursor(media_entries, col_number) %}
-      {% for entry in row %}
-        {% set entry_url = entry.url_for_self(request.urlgen) %}
-        <li class="media_thumbnail">
-          <a href="{{ entry_url }}">
-            <img src="{{ request.app.public_store.file_url(
-                           entry.media_files['thumb']) }}" />
-          </a>
-          {% if entry.title %}
-            <br />
-            <a href="{{ entry_url }}">{{ entry.title }}</a>
-          {% endif %}
-        </li>
-      {% endfor %}
+      <tr class="thumb_row
+                 {%- if loop.first %} thumb_row_first
+                 {%- elif loop.last %} thumb_row_last{% endif %}">
+        {% for entry in row %}
+          {% set entry_url = entry.url_for_self(request.urlgen) %}
+          <td class="media_thumbnail thumb_entry
+                     {%- if loop.first %} thumb_entry_first
+                     {%- elif loop.last %} thumb_entry_last{% endif %}">
+            <a href="{{ entry_url }}">
+              <img src="{{ request.app.public_store.file_url(
+                             entry.media_files['thumb']) }}" />
+            </a>
+            {% if entry.title %}
+              <br />
+              <a href="{{ entry_url }}">{{ entry.title }}</a>
+            {% endif %}
+          </td>
+        {% endfor %}
+      </tr>
     {% endfor %}
-  </ul>
+  </table>
 {%- endmacro %}
 
 {#
diff --git a/mediagoblin/templates/mediagoblin/utils/prev_next.html b/mediagoblin/templates/mediagoblin/utils/prev_next.html
index f1175ce4..d0cf3f8c 100644
--- a/mediagoblin/templates/mediagoblin/utils/prev_next.html
+++ b/mediagoblin/templates/mediagoblin/utils/prev_next.html
@@ -21,28 +21,26 @@
 {% set next_entry_url = media.url_to_next(request.urlgen) %}
 
 {% if prev_entry_url or next_entry_url %}
-  <div class="navigation">
-   {# There are no previous entries for the very first media entry #}
-    {% if prev_entry_url %}
-      <a class="navigation_button navigation_left" href="{{ prev_entry_url }}">
-        &larr; {% trans %}newer{% endtrans %}
-      </a>
-    {% else %}
-      {# This is the first entry. display greyed-out 'previous' image #}
-      <p class="navigation_button navigation_left">
-        &larr; {% trans %}newer{% endtrans %}
-      </p>
-    {% endif %}
-    {# Likewise, this could be the very last media entry #}
-    {% if next_entry_url %}
-      <a class="navigation_button" href="{{ next_entry_url }}">
-        {% trans %}older{% endtrans %} &rarr;
-      </a>
-    {% else %}
-      {# This is the last entry. display greyed-out 'next' image #}
-      <p class="navigation_button">
-        {% trans %}older{% endtrans %} &rarr;
-      </p>
-    {% endif %}
-  </div>
+  {# There are no previous entries for the very first media entry #}
+  {% if prev_entry_url %}
+    <a class="navigation_button navigation_left" href="{{ prev_entry_url }}">
+      &larr; {% trans %}newer{% endtrans %}
+    </a>
+  {% else %}
+    {# This is the first entry. display greyed-out 'previous' image #}
+    <p class="navigation_button navigation_left">
+      &larr; {% trans %}newer{% endtrans %}
+    </p>
+  {% endif %}
+  {# Likewise, this could be the very last media entry #}
+  {% if next_entry_url %}
+    <a class="navigation_button" href="{{ next_entry_url }}">
+      {% trans %}older{% endtrans %} &rarr;
+    </a>
+  {% else %}
+    {# This is the last entry. display greyed-out 'next' image #}
+    <p class="navigation_button">
+      {% trans %}older{% endtrans %} &rarr;
+    </p>
+  {% endif %}
 {% endif %}
diff --git a/mediagoblin/templates/mediagoblin/utils/tags.html b/mediagoblin/templates/mediagoblin/utils/tags.html
index bcf3b5fd..6408102d 100644
--- a/mediagoblin/templates/mediagoblin/utils/tags.html
+++ b/mediagoblin/templates/mediagoblin/utils/tags.html
@@ -17,17 +17,16 @@
 #}
 
 {% block tags_content -%}
-  <h3 class="sidedata">Tagged with</h3>
-  <p>
+  <p>{% trans %}View more media tagged with{% endtrans %}
     {% for tag in media.tags %}
       {% if loop.last %}
         {# the 'and' should only appear if there is more than one tag #}
         {% if media.tags|length > 1 %}
-          &middot;
+          {% trans %}or{% endtrans %}
         {% endif %}
         <a href="{{ request.urlgen(
                           'mediagoblin.listings.tags_listing',
-                          tag=tag['slug']) }}">{{ tag['name'] }}</a>
+                          tag=tag['slug']) }}">{{ tag['name'] }}</a>.
       {% elif loop.revindex == 2 %}
         <a href="{{ request.urlgen(
                           'mediagoblin.listings.tags_listing',
@@ -35,7 +34,7 @@
       {% else %}
         <a href="{{ request.urlgen(
                           'mediagoblin.listings.tags_listing',
-                          tag=tag['slug']) }}">{{ tag['name'] }}</a> &middot;
+                          tag=tag['slug']) }}">{{ tag['name'] }}</a>, 
       {% endif %}
     {% endfor %}
   </p>