Merge remote-tracking branch 'upstream/skeletongobblin' into skeleton

mediagoblin/static/css/base.css

@@ -167,29 +167,21 @@ footer {
   clear: both;
 }
 
-.media_pane {
+.thumb_gallery {
-  width: 640px;
-  margin-left: 0px;
-  margin-right: 10px;
-  float: left;
-}
-
-.media_sidebar {
-  width: 280px;
   margin-left: 10px;
-  float: left;
-}
-
-.profile_sidebar {
-  width: 340px;
   margin-right: 10px;
-  float: left;
 }
 
-.profile_showcase {
+.profile_showcase .thumb_gallery {
-  width: 580px;
+  margin-left: 0;
-  margin-left: 10px;
+  margin-right: 0;
-  float: left;
+}
+
+.media_image {
+  max-width: 100%;
+  margin-left:auto;
+  margin-right:auto;
+  display:block;
 }
 
 /* common website elements */
@@ -243,6 +235,17 @@ text-align: center;
   float: right;
 }
 
+.left_align {
+  float: right;
+}
+
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+
 .clear {
   clear: both;
   display: block;
@@ -595,11 +598,10 @@ img.media_icon {
 /* navigation */
 
 .navigation {
-	float: right;
 }
 
 .navigation_button {
-  width: 135px;
+  width: 48%;
   display: inline-block;
   text-align: center;
   background-color: #1d1d1d;
@@ -612,7 +614,7 @@ img.media_icon {
 }
 
 .navigation_left {
-  margin-right: 6px;
+  margin-right: 3px;
 }
 
 /* messages */
@@ -761,20 +763,12 @@ pre {
 }
 
 /* Media queries and other responsivisivity */
-@media screen and (max-width: 940px) {
+/* initial GMG max 940 */
-  .media_pane {
+@media screen and (max-width: 960px) {
-    width: 100%;
-    margin: 0px;
-  }
-  
-  .media_sidebar {
-	  width: 100%;
-	  margin: 0px;
-	}
 
   img.media_image {
-    width: 100%;
+    max-width: 100%;
-    display: inline;
+/*    display: inline;*/
   }
 
   .media_thumbnail {
@@ -791,26 +785,11 @@ pre {
     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;
   }
@@ -825,48 +804,60 @@ pre {
   }
   
   header {
-    text-align: center;
+/*    text-align: center;*/
   }
 
   .header_right {
-    margin-right: 2%;
+/*    margin-right: 2%;*/
-    float: none;
+/*    float: none;*/
   }
   
   a.logo {
-    margin-left: 2%;
+/*    margin-left: 2%;*/
   }
   
 }
+/* desktop resolutions */
 @media screen and (min-width: 960px) {
-  .container .three.columns {
+  .container .three.columns { /* this needs to be more specific - inplace for the gallery... */
     width:180px;
     margin-left:3px;
     margin-right:3px;
   }
 }
+/* Tablet Portrait size to standard 960 (devices and browsers) */
 @media only screen and (min-width: 768px) and (max-width: 959px) {
-  .container .three.columns {
+  .container .three.columns { /* this needs to be more specific - inplace for the gallery... */
     width:147px;
     margin-left:2px;
     margin-right:2px;
   }
+  .thumb_gallery {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .navigation_button {
+  }
 }
+/* All Mobile Sizes (devices and browser) */
 @media screen and (max-width: 767px) {
   .thumb_row {
     margin-bottom: 0;
   }
-}
+  .thumb_gallery {
-@media screen and (max-width: 570px) {
+    margin-left: 0;
-  .media_thumbnail {
+    margin-right: 0;
-    width: 29%;
+  }
+  h1,h2,h3,p {
+    margin-bottom: 10px !important;
   }
 
-}
+  header {
+    text-align: center;
+  }
 
-@media screen and (max-width: 380px) {
+  .header_right {
-  .media_thumbnail {
+    float: none;
-    width: 46%;
   }
 }
 

mediagoblin/templates/mediagoblin/base.html

@@ -56,8 +56,12 @@
       {% block mediagoblin_header %}
         <div class="container">
           <header>
+            <div class="row hell">
+            <div class="eight columns alpha omega">
             {%- include "mediagoblin/bits/logo.html" -%}
             {% block mediagoblin_header_title %}{% endblock %}
+            </div>
+            <div class="eight columns alpha omega pull-right">
             <div class="header_right">
               {%- if request.user %}
                 {% if request.user and 
@@ -105,6 +109,7 @@
                 </a>
               {%- endif %}
             </div>
+            </div><!--end eight columns pull-right-->
             <div class="clear"></div>
             {% if request.user and request.user.has_privilege('active') %}
               <div class="header_dropdown">
@@ -158,6 +163,7 @@
                 {% include 'mediagoblin/fragments/header_notifications.html' %}
               </div>
             {% endif %}
+            </div><!-- end row -->
           </header>
         </div>
       {% endblock %}

mediagoblin/templates/mediagoblin/user_pages/media.html

@@ -32,9 +32,9 @@
 
   {% template_hook("media_head") %}
 {% endblock mediagoblin_head %}
-
 {% block mediagoblin_content %}
-  <p class="context">
+<div class="row hell">
+  <p class="eleven columns context">
     {%- trans user_url=request.urlgen(
               'mediagoblin.user_pages.user_home',
               user=media.get_uploader.username),
@@ -42,8 +42,11 @@
     ❖ Browsing media by <a href="{{user_url}}">{{username}}</a>
     {%- endtrans -%}
   </p>
-  {% include "mediagoblin/utils/prev_next.html" %}
+  <div class="five columns">
-  <div class="media_pane">
+    {% include "mediagoblin/utils/prev_next.html" %}
+  </div>
+</div>
+  <div class="media_pane eleven columns">
     <div class="media_image_container">
       {% block mediagoblin_media %}
         {% set display_media = request.app.public_store.file_url(
@@ -161,8 +164,8 @@
       {{ render_pagination(request, pagination,
                  media.url_for_self(request.urlgen)) }}
     {% endif %}
-  </div>
+  </div><!--end media_pane-->
-  <div class="media_sidebar">
+  <div class="five columns media_sidebar">
     <h3>{% trans %}Added{% endtrans %}</h3>
     <p><span title="{{ media.created.strftime("%I:%M%p %Y-%m-%d") }}">
         {%- trans formatted_time=timesince(media.created) -%}

mediagoblin/templates/mediagoblin/user_pages/user.html

@@ -41,6 +41,7 @@
 
 
 {% block mediagoblin_content -%}
+  <div class="six columns">
   <h1>
     {%- trans username=user.username %}{{ username }}'s profile{% endtrans -%}
   </h1>
@@ -81,9 +82,9 @@
       </a>
     </p>
   </div>
-
+  </div><!--end six columns-->
   {% if media_entries.count() %}
-    <div class="profile_showcase">
+    <div class="ten columns profile_showcase">
       {{ object_gallery(request, media_entries, pagination,
                         pagination_base_url=user_gallery_url, col_number=3) }}
       {% include "mediagoblin/utils/object_gallery.html" %}
@@ -101,7 +102,7 @@
     </div>
   {% else %}
     {% if request.user and (request.user.id == user.id) %}
-      <div class="profile_showcase empty_space">
+      <div class="ten columns profile_showcase empty_space">
         <p>
           {% trans -%}
           This is where your media will appear, but you don't seem to have added anything yet.
@@ -113,7 +114,7 @@
         </a>
       </div>
     {% else %}
-      <div class="profile_showcase empty_space">
+      <div class="ten columns profile_showcase empty_space">
         <p>
           {% trans -%}
           There doesn't seem to be any media here yet...