From: Jef van Schendel <mail@jefvanschendel.nl>
Date: Fri, 30 Dec 2011 13:23:12 +0000 (+0100)
Subject: Lots of little fixes and removal of all 960.gs classes:
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=3ea6a305ce2addc8c2d6322f0d9bdca957bd972c;p=mediagoblin.git

Lots of little fixes and removal of all 960.gs classes:

* Removed <p> margin-top
* Vertically align logo so Add-media button does not fall off
* Remove last 960.gs traces (grid_X/container_X) and add custom classes/sizes to css
* Add clear class
* Update form_box and add form_box_xl for bigger forms
* Switch all pages that use forms to new classes
* Remove padding from notification messages so they take full width
* Other tiny fixes I forgot about
---

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 187d1c7a..e8924edf 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -44,24 +44,28 @@ form {
 
 /* text styles */
 
-h1{
+h1 {
   margin-bottom: 15px;
   margin-top: 15px;
   color: #fff;
   font-size: 1.875em;
 }
 
-h2{
+h2 {
   font-size: 1.375em;
   margin-top: 20px;
   color: #fff;
 }
 
-h3{
+h3 {
   border-bottom: 1px solid #333;
   font-size: 1.125em;
 }
 
+p {
+  margin-top: 0px;
+}
+
 a {
   color: #86D4B1;
 }
@@ -103,12 +107,16 @@ input, textarea {
   float: right;
 }
 
-a.mediagoblin_logo{
+a.mediagoblin_logo {
   color: #fff;
   font-weight: bold;
   margin-right: 8px;
 }
 
+.mediagoblin_logo img {
+  vertical-align: middle;
+}
+
 .mediagoblin_content {
   width: 940px;
   margin-left: 10px;
@@ -143,6 +151,18 @@ a.mediagoblin_logo{
   float: left;
 }
 
+.profile_sidebar {
+  width: 340px;
+  margin-right: 10px;
+  float: left;
+}
+
+.profile_showcase {
+  width: 580px;
+  margin-left: 10px;
+  float: left;
+}
+
 /* common website elements */
 
 .button_action, .button_action_highlight {
@@ -219,28 +239,33 @@ text-align: center;
   float: right;
 }
 
-textarea#comment_content {
-  width: 634px;
-  height: 90px;
-  border: none;
-  background-color: #f1f1f1;
-  padding: 3px;
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
 }
 
 /* forms */
 
-.form_box {
+.form_box,.form_box_xl {
   background-color: #222;
   background-image: url("../images/background_lines.png");
   background-repeat: repeat-x;
-  padding-bottom: 30px;
-  padding-top: 30px;
+  width: 340px;
+  padding: 30px 60px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   float: none;
 }
 
+.form_box_xl {
+  width: 460px;
+}
+
 .edit_box {
   background-image: url("../images/background_edit.png");
 }
@@ -294,6 +319,14 @@ textarea#comment_content {
   margin-bottom: 0px;
 }
 
+textarea#comment_content {
+  width: 634px;
+  height: 90px;
+  border: none;
+  background-color: #f1f1f1;
+  padding: 3px;
+}
+
 /* media galleries */
 
 .media_thumbnail {
@@ -358,6 +391,7 @@ img.media_icon {
 ul.mediagoblin_messages {
   list-style: none inside;
   color: #f7f7f7;
+  padding: 0;
 }
 
 .mediagoblin_messages li {
diff --git a/mediagoblin/templates/mediagoblin/404.html b/mediagoblin/templates/mediagoblin/404.html
index 7db68941..392c14f5 100644
--- a/mediagoblin/templates/mediagoblin/404.html
+++ b/mediagoblin/templates/mediagoblin/404.html
@@ -18,17 +18,12 @@
 {% extends "mediagoblin/base.html" %}
 
 {% block mediagoblin_content %}
+  <img class="right_align" src="{{ request.staticdirect('/images/404.png') }}"
+       alt="{% trans %}Image of 404 goblin stressing out{% endtrans %}" />
   <h1>{% trans %}Oops!{% endtrans %}</h1>
-
-  <div class="grid_8 alpha">
-    <p>{% trans %}There doesn't seem to be a page at this address. Sorry!{% endtrans %}</p>
-    <p>
-      {%- trans %}If you're sure the address is correct, maybe the page you're looking for has been moved or deleted.{% endtrans -%}
-    </p>
-  </div>
-
-  <div class="grid_8 omega">
-    <img src="{{ request.staticdirect('/images/404.png') }}"
-         alt="{% trans %}Image of 404 goblin stressing out{% endtrans %}" />
-  </div>
+  <p>{% trans %}There doesn't seem to be a page at this address. Sorry!{% endtrans %}</p>
+  <p>
+    {%- trans %}If you're sure the address is correct, maybe the page you're looking for has been moved or deleted.{% endtrans -%}
+  </p>
+  <div class="clear"></div>
 {% endblock %}
diff --git a/mediagoblin/templates/mediagoblin/auth/change_fp.html b/mediagoblin/templates/mediagoblin/auth/change_fp.html
index 03a6583b..9c8c79bf 100644
--- a/mediagoblin/templates/mediagoblin/auth/change_fp.html
+++ b/mediagoblin/templates/mediagoblin/auth/change_fp.html
@@ -20,19 +20,15 @@
 {% import "/mediagoblin/utils/wtforms.html" as wtforms_util %}
 
 {% block mediagoblin_content %}
-
   <form action="{{ request.urlgen('mediagoblin.auth.verify_forgot_password') }}"
         method="POST" enctype="multipart/form-data">
     {{ csrf_token }}
-
-    <div class="grid_6 prefix_1 suffix_1 form_box">
+    <div class="form_box">
       <h1>{% trans %}Set your new password{% endtrans %}</h1>
-
       {{ wtforms_util.render_divs(cp_form) }}
       <div class="form_submit_buttons">
         <input type="submit" value="{% trans %}Set password{% endtrans %}" class="button_form"/>
       </div>
-
     </div>
   </form>
 {% endblock %}
diff --git a/mediagoblin/templates/mediagoblin/auth/forgot_password.html b/mediagoblin/templates/mediagoblin/auth/forgot_password.html
index 41940742..672e9d9a 100644
--- a/mediagoblin/templates/mediagoblin/auth/forgot_password.html
+++ b/mediagoblin/templates/mediagoblin/auth/forgot_password.html
@@ -23,7 +23,7 @@
   <form action="{{ request.urlgen('mediagoblin.auth.forgot_password') }}"
         method="POST" enctype="multipart/form-data">
     {{ csrf_token }}
-    <div class="grid_6 prefix_1 suffix_1 form_box">
+    <div class="form_box">
       <h1>{% trans %}Recover password{% endtrans %}</h1>
       {{ wtforms_util.render_divs(fp_form) }}
       <div class="form_submit_buttons">
diff --git a/mediagoblin/templates/mediagoblin/auth/login.html b/mediagoblin/templates/mediagoblin/auth/login.html
index c3807e5f..993790eb 100644
--- a/mediagoblin/templates/mediagoblin/auth/login.html
+++ b/mediagoblin/templates/mediagoblin/auth/login.html
@@ -23,7 +23,7 @@
   <form action="{{ request.urlgen('mediagoblin.auth.login') }}"
         method="POST" enctype="multipart/form-data">
     {{ csrf_token }}
-    <div class="grid_6 prefix_1 suffix_1 form_box">
+    <div class="form_box">
       <h1>{% trans %}Log in{% endtrans %}</h1>
       {% if login_failed %}
         <div class="form_field_error">
diff --git a/mediagoblin/templates/mediagoblin/auth/register.html b/mediagoblin/templates/mediagoblin/auth/register.html
index bded1d7e..2520ca9b 100644
--- a/mediagoblin/templates/mediagoblin/auth/register.html
+++ b/mediagoblin/templates/mediagoblin/auth/register.html
@@ -43,7 +43,7 @@
 
   <form action="{{ request.urlgen('mediagoblin.auth.register') }}"
         method="POST" enctype="multipart/form-data">
-    <div class="grid_6 prefix_1 suffix_1 form_box">
+    <div class="form_box">
       <h1>{% trans %}Create an account!{% endtrans %}</h1>
       {{ wtforms_util.render_divs(register_form) }}
       {{ csrf_token }}
diff --git a/mediagoblin/templates/mediagoblin/edit/attachments.html b/mediagoblin/templates/mediagoblin/edit/attachments.html
index 6a5ab896..ff357a8c 100644
--- a/mediagoblin/templates/mediagoblin/edit/attachments.html
+++ b/mediagoblin/templates/mediagoblin/edit/attachments.html
@@ -23,7 +23,7 @@
                                user= media.get_uploader().username,
                                media= media._id) }}"
         method="POST" enctype="multipart/form-data">
-    <div class="grid_8 prefix_1 suffix_1 edit_box form_box">
+    <div class="form_box">
       <h1>Editing attachments for {{ media.title }}</h1>
       <div style="text-align: center;" >
         <img src="{{ request.app.public_store.file_url(
diff --git a/mediagoblin/templates/mediagoblin/edit/edit.html b/mediagoblin/templates/mediagoblin/edit/edit.html
index aa46af3d..d0341600 100644
--- a/mediagoblin/templates/mediagoblin/edit/edit.html
+++ b/mediagoblin/templates/mediagoblin/edit/edit.html
@@ -25,7 +25,7 @@
                                user= media.get_uploader().username,
                                media= media._id) }}"
         method="POST" enctype="multipart/form-data">
-    <div class="grid_8 prefix_1 suffix_1 edit_box form_box">
+    <div class="form_box_xl">
       <h1>{% trans media_title=media.title %}Editing {{ media_title }}{% endtrans %}</h1>
       <div style="text-align: center;" >
         <img src="{{ request.app.public_store.file_url(
diff --git a/mediagoblin/templates/mediagoblin/edit/edit_profile.html b/mediagoblin/templates/mediagoblin/edit/edit_profile.html
index 2d5daa95..d6461757 100644
--- a/mediagoblin/templates/mediagoblin/edit/edit_profile.html
+++ b/mediagoblin/templates/mediagoblin/edit/edit_profile.html
@@ -24,7 +24,7 @@
   <form action="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{ 
                                                      user.username }}"
         method="POST" enctype="multipart/form-data">
-    <div class="grid_8 prefix_1 suffix_1 edit_box form_box">
+    <div class="form_box_xl">
       <h1>
         {%- trans username=user.username -%}
           Editing {{ username }}'s profile
diff --git a/mediagoblin/templates/mediagoblin/listings/tag.html b/mediagoblin/templates/mediagoblin/listings/tag.html
index f797f72f..a7cbe241 100644
--- a/mediagoblin/templates/mediagoblin/listings/tag.html
+++ b/mediagoblin/templates/mediagoblin/listings/tag.html
@@ -35,14 +35,9 @@
     {% trans %}Media tagged with: {{ tag_name }}{% endtrans %}
   </h1>
 
-  <div class="container_16 media_gallery">
-    {{ object_gallery(request, media_entries, pagination) }}
-  </div>
+  {{ object_gallery(request, media_entries, pagination) }}
 
-  <div class="grid_16">
-    {% set feed_url = request.urlgen(
-               'mediagoblin.listings.tag_atom_feed',
-               tag=tag_slug) %}
-    {% include "mediagoblin/utils/feed_link.html" %}
-  </div>
+  {% set feed_url = request.urlgen('mediagoblin.listings.tag_atom_feed',
+                                   tag=tag_slug) %}
+  {% include "mediagoblin/utils/feed_link.html" %}
 {% endblock %}
diff --git a/mediagoblin/templates/mediagoblin/root.html b/mediagoblin/templates/mediagoblin/root.html
index 0f769f2f..300570ad 100644
--- a/mediagoblin/templates/mediagoblin/root.html
+++ b/mediagoblin/templates/mediagoblin/root.html
@@ -23,22 +23,18 @@
   {% if request.user %}
     <h1>{% trans %}Explore{% endtrans %}</h1>
   {% else %}
-   <div class="grid_11 alpha">
-      <h1>{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}</h1>
-      <p>{% trans %}This site is running <a href="http://mediagoblin.org">MediaGoblin</a>, an extraordinarily great piece of media hosting software.{% endtrans %}</p>
-      <p>{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}</p>
-      {% if allow_registration %}
-        <p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p>
-        {% trans register_url=request.urlgen('mediagoblin.auth.register') -%}
-          <a class="button_action_highlight" href="{{ register_url }}">Create an account at this site</a>
-          or
-          <a class="button_action" href="http://wiki.mediagoblin.org/HackingHowto">Set up MediaGoblin on your own server</a>
-        {%- endtrans %}
-      {% endif %}
-    </div>
-    <div class="grid_5 omega">
-      <img src="{{ request.staticdirect('/images/frontpage_image.png') }}" />
-    </div>
+    <img class="right_align" src="{{ request.staticdirect('/images/frontpage_image.png') }}" />
+    <h1>{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}</h1>
+    <p>{% trans %}This site is running <a href="http://mediagoblin.org">MediaGoblin</a>, an extraordinarily great piece of media hosting software.{% endtrans %}</p>
+    <p>{% trans %}To add your own media, place comments, save your favourites and more, you can log in with your MediaGoblin account.{% endtrans %}</p>
+    {% if allow_registration %}
+      <p>{% trans %}Don't have one yet? It's easy!{% endtrans %}</p>
+      {% trans register_url=request.urlgen('mediagoblin.auth.register') -%}
+        <a class="button_action_highlight" href="{{ register_url }}">Create an account at this site</a>
+        or
+        <a class="button_action" href="http://wiki.mediagoblin.org/HackingHowto">Set up MediaGoblin on your own server</a>
+      {%- endtrans %}
+    {% endif %}
     <div class="clear"></div>
   {% endif %}
   <h2>{% trans %}Most recent media{% endtrans %}</h2>
diff --git a/mediagoblin/templates/mediagoblin/submit/start.html b/mediagoblin/templates/mediagoblin/submit/start.html
index 47914550..afae2f1f 100644
--- a/mediagoblin/templates/mediagoblin/submit/start.html
+++ b/mediagoblin/templates/mediagoblin/submit/start.html
@@ -22,7 +22,7 @@
 {% block mediagoblin_content %}
   <form action="{{ request.urlgen('mediagoblin.submit.start') }}"
         method="POST" enctype="multipart/form-data">
-    <div class="grid_8 prefix_1 suffix_1 form_box">
+    <div class="form_box_xl">
       <h1>{% trans %}Add your media{% endtrans %}</h1>
       {{ wtforms_util.render_divs(submit_form) }}
       <div class="form_submit_buttons">
diff --git a/mediagoblin/templates/mediagoblin/user_pages/gallery.html b/mediagoblin/templates/mediagoblin/user_pages/gallery.html
index b066dd71..b0bfacf8 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/gallery.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/gallery.html
@@ -42,14 +42,10 @@
     {%- endtrans %}
   </h1>
 
-  <div class="container_16 media_gallery">
-    {{ object_gallery(request, media_entries, pagination) }}
-  </div>
-
-  <div class="grid_16">
-    {% set feed_url = request.urlgen(
-              'mediagoblin.user_pages.atom_feed',
-              user=user.username) %}
-    {% include "mediagoblin/utils/feed_link.html" %}
-  </div>
+  {{ object_gallery(request, media_entries, pagination) }}
+    
+  {% set feed_url = request.urlgen('mediagoblin.user_pages.atom_feed',
+                                   user=user.username) %}
+  {% include "mediagoblin/utils/feed_link.html" %}
+    
 {% endblock %}    
diff --git a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html
index 7c7218ae..8e0f2904 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/media_confirm_delete.html
@@ -25,7 +25,7 @@
 		                  user=media.get_uploader().username,
 				  media=media._id) }}"
         method="POST" enctype="multipart/form-data">
-    <div class="grid_8 prefix_1 suffix_1 edit_box form_box">
+    <div class="form_box">
       <h1>
         {%- trans title=media.title -%}
           Really delete {{ title }}?
diff --git a/mediagoblin/templates/mediagoblin/user_pages/user.html b/mediagoblin/templates/mediagoblin/user_pages/user.html
index b952e88c..8a1d3a76 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/user.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/user.html
@@ -46,7 +46,7 @@
   {% elif user.status == "needs_email_verification" %}
     {% if user == request.user %}
       {# this should only be visible when you are this user #}
-      <div class="grid_6 prefix_1 suffix_1 form_box">
+      <div class="form_box">
         <h1>{% trans %}Email verification needed{% endtrans %}</h1>
 
         <p>
@@ -66,7 +66,7 @@
       </div>
     {% else %}
       {# if the user is not you, but still needs to verify their email #}
-      <div class="grid_6 prefix_1 suffix_1 form_box">
+      <div class="form_box">
         <h1>{% trans %}Email verification needed{% endtrans %}</h1>
 
         <p>
@@ -91,7 +91,7 @@
 
     {% if not user.url and not user.bio %}
       {% if request.user._id == user._id %}
-        <div class="grid_6 alpha empty_space">
+        <div class="profile_sidebar empty_space">
           <p>
             {% trans %}Here's a spot to tell others about yourself.{% endtrans %}
           </p>
@@ -102,7 +102,7 @@
           </a>
         </div>
       {% else %}
-        <div class="grid_6 alpha empty_space">
+        <div class="profile_sidebar empty_space">
           <p>
             {% trans -%}
               This user hasn't filled in their profile (yet).
@@ -111,7 +111,7 @@
         </div>
       {% endif %}
     {% else %}
-      <div class="grid_6 alpha">
+      <div class="profile_sidebar">
         {% include "mediagoblin/utils/profile.html" %}
         {% if request.user._id == user._id or request.user.is_admin %}
           <a href="{{ request.urlgen('mediagoblin.edit.profile') }}?username={{
@@ -123,7 +123,7 @@
     {% endif %}
 
     {% if media_entries.count() %}
-      <div class="grid_10 omega">
+      <div class="profile_showcase">
         {{ object_gallery(request, media_entries, pagination,
                           pagination_base_url=user_gallery_url, col_number=3) }}
         {% include "mediagoblin/utils/object_gallery.html" %}
@@ -141,7 +141,7 @@
       </div>
     {% else %}
       {% if request.user._id == user._id %}
-        <div class="grid_10 omega empty_space">
+        <div class="profile_showcase empty_space">
           <p>
             {% trans -%}
             This is where your media will appear, but you don't seem to have added anything yet.
@@ -153,7 +153,7 @@
           </a>
         </div>
       {% else %}
-        <div class="grid_10 omega empty_space">
+        <div class="profile_showcase empty_space">
           <p>
             {% trans -%}
             There doesn't seem to be any media here yet...
diff --git a/mediagoblin/templates/mediagoblin/utils/prev_next.html b/mediagoblin/templates/mediagoblin/utils/prev_next.html
index b0c01963..66766555 100644
--- a/mediagoblin/templates/mediagoblin/utils/prev_next.html
+++ b/mediagoblin/templates/mediagoblin/utils/prev_next.html
@@ -21,28 +21,26 @@
 {% set next_entry_url = media.url_to_next(request.urlgen) %}
 
 {% if prev_entry_url or next_entry_url %}
-  <div class="grid_5 alpha omega">
-    {# 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 %}