Layout overhaul time!

mediagoblin/static/css/base.css

@@ -109,7 +109,7 @@ input, textarea {
 .container {
   margin: auto;
   width: 96%;
-  max-width: 940px;
+  max-width: 820px;
 }
 
 header {
@@ -150,12 +150,18 @@ footer {
   clear: both;
 }
 
+/* TEMP removal -> permanent removal should also be done in html!
 .media_pane {
   width: 640px;
   margin-left: 0px;
   margin-right: 10px;
   float: left;  
 }
+*/
+
+img.media_image {
+  width: 100%;
+}
 
 .media_sidebar {
   width: 280px;
@@ -382,6 +388,11 @@ h2.media_title {
   margin-bottom: 0px;
 }
 
+p.context {
+  display: inline-block;
+  padding-top: 4px;
+}
+
 p.media_specs {
   font-size: 0.9em;
   border-top: 1px solid #222;
@@ -406,19 +417,21 @@ img.media_icon {
 
 /* navigation */
 
+.navigation {
+  float: right;
+}
+
 .navigation_button {
   width: 135px;
-  display: block;
-  float: left;
+  display: inline-block;
   text-align: center;
   background-color: #1d1d1d;
   border: 1px solid;
   border-color: #2c2c2c #232323 #1a1a1a;
   border-radius: 4px;
   text-decoration: none;
-  padding: 12px 0 16px;
-  font-size: 1.4em;
-  margin: 0 0 20px
+  padding: 4px 0 8px;
+  margin: 0 0 6px
 }
 
 .navigation_left {

mediagoblin/templates/mediagoblin/user_pages/media.html

@@ -41,6 +41,13 @@
 
 {% block mediagoblin_content %}
   <div class="media_pane">
+    {% 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(
@@ -148,15 +155,6 @@
       {{ render_pagination(request, pagination,
                  media.url_for_self(request.urlgen)) }}
     {% endif %}
-  </div>
-  <div class="media_sidebar">
-    {% 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>

mediagoblin/templates/mediagoblin/utils/prev_next.html

@@ -21,26 +21,28 @@
 {% set next_entry_url = media.url_to_next(request.urlgen) %}
 
 {% if prev_entry_url or next_entry_url %}
-  {# 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 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>
 {% endif %}