incorporate skeleton layout in the galleries

3 files changed, 23 insertions, 27 deletions

diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
index 6e2bca20..69b28685 100644
--- a/mediagoblin/templates/mediagoblin/base.html
+++ b/mediagoblin/templates/mediagoblin/base.html
@@ -28,24 +28,11 @@
     <link rel="stylesheet" type="text/css"
           href="{{ request.staticdirect('/css/extlib/reset.css') }}"/>
     <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/base.css') }}"/>
-    <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/skeletonbase.css') }}"/>
-    <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/skeleton.css') }}"/>
+          href="{{ request.staticdirect('/css/extlib/skeleton.css') }}"/>
     <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/layout.css') }}"/>
+          href="{{ request.staticdirect('/css/base.css') }}"/>
     <link rel="shortcut icon"
           href="{{ request.staticdirect('/images/goblin.ico') }}" />
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/notifications.js') }}"></script>
-    <script>
-      var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
-    </script>
 
     {# For clarification, the difference between the extra_head.html template
      # and the head template hook is that the former should be used by
@@ -183,4 +170,13 @@
     {%- endblock mediagoblin_body %}
     {% include 'mediagoblin/bits/body_end.html' %}
   </body>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/notifications.js') }}"></script>
+    <script>
+      var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
+    </script>
 </html>
diff --git a/mediagoblin/templates/mediagoblin/utils/collection_gallery.html b/mediagoblin/templates/mediagoblin/utils/collection_gallery.html
index dfe2ebe2..64b30815 100644
--- a/mediagoblin/templates/mediagoblin/utils/collection_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/collection_gallery.html
@@ -19,15 +19,15 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, collection_items, col_number=5) %}
-  <table class="thumb_gallery">
+  <div class="thumb_gallery">
     {% for row in collection_items|batch(col_number) %}
-      <tr class="thumb_row
+      <div class="row thumb_row
                  {%- if loop.first %} thumb_row_first
                  {%- elif loop.last %} thumb_row_last{% endif %}">
         {% for item in row %}
           {% set media_entry = item.get_media_entry %}
           {% set entry_url = media_entry.url_for_self(request.urlgen) %}
-          <td class="media_thumbnail thumb_entry
+          <div class="three columns media_thumbnail thumb_entry
                      {%- if loop.first %} thumb_entry_first
                      {%- elif loop.last %} thumb_entry_last{% endif %}">
             <a href="{{ entry_url }}">
@@ -49,11 +49,11 @@
 	        {%- trans %}(remove){% endtrans -%}
 	      </a>
 	    {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
+      </div>
     {% endfor %}
-  </table>
+  </div>
 {%- endmacro %}
 
 {#
diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
index d328b552..1b4a15ed 100644
--- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
@@ -19,14 +19,14 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, media_entries, col_number=5) %}
-  <table class="thumb_gallery">
+  <div class="thumb_gallery">
     {% for row in media_entries|batch(col_number) %}
-      <tr class="thumb_row
+      <div class="row 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
+          <div class="three columns media_thumbnail thumb_entry
                      {%- if loop.first %} thumb_entry_first
                      {%- elif loop.last %} thumb_entry_last{% endif %}">
             <a href="{{ entry_url }}">
@@ -35,11 +35,11 @@
             {% if entry.title %}
               <a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a>
             {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
+      </div>
     {% endfor %}
-  </table>
+  </div>
 {%- endmacro %}
 
 {#