Revert "Layout overhaul time!"
authorChristopher Allan Webber <cwebber@dustycloud.org>
Tue, 14 Feb 2012 03:31:11 +0000 (21:31 -0600)
committerChristopher Allan Webber <cwebber@dustycloud.org>
Tue, 14 Feb 2012 03:31:11 +0000 (21:31 -0600)
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!

mediagoblin/static/css/base.css
mediagoblin/templates/mediagoblin/user_pages/media.html
mediagoblin/templates/mediagoblin/utils/exif.html
mediagoblin/templates/mediagoblin/utils/geolocation_map.html
mediagoblin/templates/mediagoblin/utils/license.html
mediagoblin/templates/mediagoblin/utils/object_gallery.html
mediagoblin/templates/mediagoblin/utils/prev_next.html
mediagoblin/templates/mediagoblin/utils/tags.html

index 9c429404d27139a821c78cdf4093bc3426cce507..73b07384e2279156fbd6cc1a283496a44acc2327 100644 (file)
@@ -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;
-  }
 }
index 3e711e920b13e311bf9e943f5c756b30a49d272c..d2503a4ebdb5544d73387dbcd255650a18209efc 100644 (file)
 {% 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>
     {% 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 %}
index bd2e3307016750a96c43037b4a5155f67841b254..0dd187f2ac5480bf87dda7e992ce451f0b5ab602 100644 (file)
@@ -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>
index 118d0e624d4537bda1ec93a6410ec26c72e171f3..c1909ae50b08a1fb45075b1ec2abbb381d820a3b 100644 (file)
@@ -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;">
index ab157508f2e0f2bc33529c5007cf030a5efb3dbb..2438ed4e6324d4bc270c879ae4ddaf1faa6e22c7 100644 (file)
@@ -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 %}
index 6b5988fbe748158746a6fd8544cb52ca22562c34..81506a84e01222902b4fe3a0b480ca464bcddf5a 100644 (file)
 {% 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 %}
 
 {#
index f1175ce4803473231af65c06a0aae9bccf7d916a..d0cf3f8c95b07ee4285299f169a7b080aadaf268 100644 (file)
 {% 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 %}
index bcf3b5fdf90274c1c5dd10bcfb4a618bb7ce8c2f..6408102dd8155f4688933c73a7fbe7f4e73a34d8 100644 (file)
 #}
 
 {% 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>