Fix merge conflict in prev_next.html

mediagoblin/static/css/base.css

@@ -160,7 +160,6 @@ footer {
 .media_sidebar {
   width: 280px;
   margin-left: 10px;
-  margin-right: 0px;
   float: left;
 }
 
@@ -178,7 +177,7 @@ footer {
 
 /* common website elements */
 
-.button_action, .button_action_highlight {
+.button_action, .button_action_highlight, .button_form {
   display: inline-block;
   color: #c3c3c3;
   background-color: #363636;
@@ -193,43 +192,17 @@ footer {
   cursor: pointer;
 }
 
-.button_action_highlight {
+.button_action_highlight, .button_form {
   background-color: #86D4B1;
   border-color: #A2DEC3 #6CAA8E #5C9179;
   color: #283F35;
 }
 
-.button_form, .cancel_link {
+.button_form {
-  height: 32px;
   min-width: 99px;
-  background-color: #86d4b1;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#86d4b1), to(#62caa2)); 
-  background-image: -webkit-linear-gradient(top, #86d4b1, #62caa2); 
-  background-image:    -moz-linear-gradient(top, #86d4b1, #62caa2); 
-  background-image:     -ms-linear-gradient(top, #86d4b1, #62caa2); 
-  background-image:      -o-linear-gradient(top, #86d4b1, #62caa2); 
-  background-image:         linear-gradient(top, #86d4b1, #62caa2);
-  box-shadow: 0px 0px 4px #000;
-  border-radius: 3px;
-  border: none;
-  color: #272727;
   margin: 10px 0px 10px 15px;
   text-align: center;
-  padding-left: 11px;
-  padding-right: 11px;
-  text-decoration: none;
   font-family: 'Lato', sans-serif;
-  font-weight: bold;
-}
-
-.cancel_link {
-  background-color: #aaa;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(##D2D2D2), to(#aaa)); 
-  background-image: -webkit-linear-gradient(top, #D2D2D2, #aaa); 
-  background-image:    -moz-linear-gradient(top, #D2D2D2, #aaa); 
-  background-image:     -ms-linear-gradient(top, #D2D2D2, #aaa); 
-  background-image:      -o-linear-gradient(top, #D2D2D2, #aaa); 
-  background-image:         linear-gradient(top, #D2D2D2, #aaa);
 }
 
 .pagination {
@@ -252,15 +225,6 @@ 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;
@@ -270,12 +234,20 @@ textarea#comment_content {
   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 {
   background-color: #222;
-  background-image: url("../images/background_lines.png");
+  border-top: 6px solid #D49086;
-  background-repeat: repeat-x;
   padding: 3% 5%;
   display: block;
   float: none;
@@ -290,7 +262,7 @@ textarea#comment_content {
 }
 
 .edit_box {
-  background-image: url("../images/background_edit.png");
+  border-top: 6px dashed #D49086
 }
 
 .form_field_input input, .form_field_input textarea {
@@ -352,23 +324,29 @@ textarea#description, textarea#bio {
 }
 
 textarea#comment_content {
-  width: 634px;
+  resize: vertical;
+  width: 100%;
   height: 90px;
   border: none;
   background-color: #f1f1f1;
   padding: 3px;
 }
 
+#form_comment .form_field_input {
+	padding-right: 6px;
+}
+
 /* media galleries */
 
 .media_thumbnail {
+  display: inline-block;
   padding: 0px;
   width: 180px;
   overflow: hidden;
-  float: left;
+  margin: 0px 5px 10px 5px;
-  margin: 0px 4px 10px 4px;
   text-align: center;
   font-size: 0.875em;
+  list-style: none;
 }
 
 .media_thumbnail a {
@@ -380,6 +358,12 @@ textarea#comment_content {
 
 h2.media_title {
   margin-bottom: 0px;
+  display: inline-block;
+}
+
+p.context {
+	display: inline-block;
+	padding-top: 4px;
 }
 
 p.media_specs {
@@ -406,19 +390,21 @@ img.media_icon {
 
 /* navigation */
 
+.navigation {
+	float: right;
+}
+
 .navigation_button {
   width: 135px;
-  display: block;
+  display: inline-block;
-  float: left;
   text-align: center;
   background-color: #1d1d1d;
   border: 1px solid;
   border-color: #2c2c2c #232323 #1a1a1a;
   border-radius: 4px;
   text-decoration: none;
-  padding: 12px 0 16px;
+  padding: 4px 0 8px;
-  font-size: 1.4em;
+  margin: 0 0 6px;
-  margin: 0 0 20px
 }
 
 .navigation_left {
@@ -503,23 +489,78 @@ table.media_panel th {
 }
 
 /* Media queries and other responsivisivity */
-@media screen and (max-width: 680px) {
+@media screen and (max-width: 940px) {
   .media_pane {
     width: 100%;
     margin: 0px;
   }
-  img.media_image {
+  
+  .media_sidebar {
 	  width: 100%;
-  }
+	  margin: 0px;
+	}
+	
+  img.media_image {
+    width: 100%;
+    display: inline;
+  }
+
+  .media_thumbnail {
+    width: 21%;
   }
 
-@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;
+  }
+  
+  .navigation {
+    float: none;
+  }
+  
+  .navigation_button {
+    width: 49%;
+    float: right;
+    padding: 10px 0 14px;
+  }
+  
+  .navigation_left {
+    margin-right: 0;
+    float: left;
+  }
+  
+  .button_action, .button_action_highlight, .button_form { 
+    padding: 9px 14px;
+  }
+}
+
+@media screen and (max-width: 570px) {
+  .media_thumbnail {
+    width: 29%;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .media_thumbnail {
+    width: 46%;
   }
 }

mediagoblin/templates/mediagoblin/base.html

@@ -19,7 +19,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}{{ app_config['html_title'] }}{% endblock %}</title>
     <link rel="stylesheet" type="text/css"
           href="{{ request.staticdirect('/css/extlib/reset.css') }}"/>

mediagoblin/templates/mediagoblin/edit/edit.html

@@ -33,7 +33,7 @@
       </div>
       {{ wtforms_util.render_divs(form) }}
       <div class="form_submit_buttons">
-        <a href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a>
+        <a class="button_action" href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a>
         <input type="submit" value="{% trans %}Save changes{% endtrans %}" class="button_form" />
 	{{ csrf_token }}
       </div>

mediagoblin/templates/mediagoblin/user_pages/media.html

@@ -42,6 +42,13 @@
 {% 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_pane">     
     <div class="media_image_container">
       {% block mediagoblin_media %}
@@ -67,13 +74,6 @@
     <h2 class="media_title">
       {{ media.title }}
     </h2>
-    {% autoescape False %}
-      <p>{{ media.description_html }}</p>
-    {% 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) %}
@@ -86,23 +86,40 @@
                                  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 %}
     {% 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 one{% endtrans %}
+            {% trans %}Add a comment{% endtrans %}
           </a>
         </div>
       </h3>
@@ -152,35 +169,10 @@
     {% endif %}
   </div>
   <div class="media_sidebar">
-    {% trans user_url=request.urlgen(
+    {% trans date=media.created.strftime("%Y-%m-%d") -%}
-                'mediagoblin.user_pages.user_home',
+      <h3 class="sidedata">Added on</h3>
-                user=media.get_uploader.username),
+      <p>{{ date }}</p>
-                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 %}
@@ -191,4 +183,5 @@
 
     {% include "mediagoblin/utils/exif.html" %}
   </div>
+  <div class="clear"></div>
 {% endblock %}

mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html

@@ -46,8 +46,8 @@
 
       <div class="form_submit_buttons">
         {# TODO: This isn't a button really... might do unexpected things :) #}
-	<a class="cancel_link" href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a>
+	<a class="button_action" href="{{ media.url_for_self(request.urlgen) }}">{% trans %}Cancel{% endtrans %}</a>
-        <input type="submit" value="{% trans %}Delete Permanently{% endtrans %}" class="button_form" />
+        <input type="submit" value="{% trans %}Delete permanently{% endtrans %}" class="button_form" />
 	{{ csrf_token }}
       </div>
     </div>

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') %}
-    <h4>EXIF</h4>
+    <h3 class="sidedata">EXIF</h3>
     <table>
       {% for key, tag in media.media_data.exif.useful.items() %}
         <tr>

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 %}
-    <h4>Map</h4>
+    <h3 class="sidedata">Location</h3>
     <div>
       {% set gps = media.media_data.gps %}
         <div id="tile-map" style="width: 100%; height: 196px;">

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 %}

mediagoblin/templates/mediagoblin/utils/object_gallery.html

@@ -19,16 +19,11 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, media_entries, col_number=5) %}
-  <table class="thumb_gallery">
+  <ul class="thumb_gallery">
     {% for row in gridify_cursor(media_entries, col_number) %}
-      <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
+        <li class="media_thumbnail">
-                     {%- 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']) }}" />
@@ -37,11 +32,10 @@
             <br />
             <a href="{{ entry_url }}">{{ entry.title }}</a>
           {% endif %}
-          </td>
+        </li>
       {% endfor %}
-      </tr>
     {% endfor %}
-  </table>
+  </ul>
 {%- endmacro %}
 
 {#

mediagoblin/templates/mediagoblin/utils/prev_next.html

@@ -21,6 +21,7 @@
 {% 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 }}">
@@ -43,4 +44,5 @@
         {% trans %}older{% endtrans %} &rarr;
       </p>
     {% endif %}
+  </div>
 {% endif %}

mediagoblin/templates/mediagoblin/utils/tags.html

@@ -17,16 +17,17 @@
 #}
 
 {% block tags_content -%}
-  <p>{% trans %}View more media tagged with{% endtrans %}
+  <h3 class="sidedata">Tagged with</h3>
+  <p>
     {% 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 %}
-          {% trans %}or{% endtrans %}
+          &middot;
         {% 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',
@@ -34,7 +35,7 @@
       {% else %}
         <a href="{{ request.urlgen(
                           'mediagoblin.listings.tags_listing',
-                          tag=tag['slug']) }}">{{ tag['name'] }}</a>, 
+                          tag=tag['slug']) }}">{{ tag['name'] }}</a> &middot;
       {% endif %}
     {% endfor %}
   </p>