add a little button color and new media page layout

mediagoblin/static/css/base.css

@@ -202,6 +202,20 @@ footer {
   display:block;
 }
 
+.media_pane {
+  border-bottom: 1px solid #333333;
+}
+
+.media_sidebar {
+  border-left: 1px solid #333333;
+  padding-left: 1em;
+  padding-top: 1em;
+}
+
+.media_comments {
+  padding-top: 1em;
+}
+
 /* common website elements */
 
 .button_action, .button_action_highlight, .button_form {
@@ -225,6 +239,17 @@ footer {
   color: #283F35;
 }
 
+.button_info {
+  background-color: #508BB5;
+  border-color: #5899C7 #437699 #427496;
+  color: #C3C3C3;
+}
+
+.button_warning {
+  background-color: #8A2D2D;
+  border-color: #913030 #451717 #431212;
+  color: #C3C3C3;
+}
 
 .button_form {
   min-width: 99px;
@@ -249,6 +274,13 @@ text-align: center;
   padding-top: 70px;
 }
 
+.no_background {
+  background-image: none;
+  height: 0;
+  padding-top: 0;
+  display: inline-block;
+}
+
 .right_align {
   float: right;
 }
@@ -278,13 +310,13 @@ text-align: center;
 }
 
 .media_sidebar h3 {
-	font-size: 1em;
-	margin: 0 0 5px;
-	border: none;
+  font-size: 1em;
+  margin: 0 0 5px;
+  border: none;
 }
 
 .media_sidebar p {
-	margin-left: 8px;
+  margin-left: 8px;
 }
 
 .alpha {
@@ -874,6 +906,17 @@ pre {
     margin-right: auto;
     margin-top: 1em;
   }
+
+  .media_sidebar {
+    border-left: none;
+    padding-left: 0;
+    padding-top: 1em;
+    margin-top: 1em;
+  }
+
+  .media_comments {
+    border-bottom: 1px solid #333333;
+  }
 }
 
 /* Exif display */

mediagoblin/templates/mediagoblin/base.html

@@ -78,7 +78,7 @@
 
                   {% set notification_count = get_notification_count(request.user.id) %}
                   {% if notification_count %}
-                    <a href="javascript:;" class="notification-gem button_action" title="Notifications">
+                    <a href="javascript:;" class="notification-gem button_action button_info" title="Notifications">
                     {{ notification_count }}</a>
                   {% endif %}
                   <a href="javascript:;" class="button_action header_dropdown_down">&#9660;</a>

mediagoblin/templates/mediagoblin/user_pages/media.html

@@ -46,7 +46,7 @@
     {% include "mediagoblin/utils/prev_next.html" %}
   </div>
 </div>
-  <div class="media_pane eleven columns">
+  <div class="media_pane sixteen columns">
     <div class="media_image_container">
       {% block mediagoblin_media %}
         {% set display_media = request.app.public_store.file_url(
@@ -70,12 +70,14 @@
         {% endif %}
       {% endblock %}
     </div>
+    <div class="row heaven hell">
     <h2 class="media_title">
       {{ media.title }}
     </h2>
     {% if request.user and
           (media.uploader == request.user.id or
            request.user.has_privilege('admin')) %}
+    <div class="pull-right" style="padding-top:20px;">
       {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
                                  user= media.get_uploader.username,
                                  media_id=media.id) %}
@@ -83,13 +85,18 @@
       {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
                                  user= media.get_uploader.username,
                                  media_id=media.id) %}
-      <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
-
+      <a class="button_action button_warning" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
+      </div>
     {% endif %}
     {% autoescape False %}
       <p>{{ media.description_html }}</p>
     {% endautoescape %}
+    </div>
+    </div>
+
+    <div class="eleven columns omega">
     {% if comments and request.user and request.user.has_privilege('commenter') %}
+    <div class="media_comments">
       {% if app_config['allow_comments'] %}
         <a
           {% if not request.user %}
@@ -163,9 +170,13 @@
       </ul>
       {{ render_pagination(request, pagination,
                  media.url_for_self(request.urlgen)) }}
+    {% else %}
+      <div class="empty_space no_background">
     {% endif %}
-  </div><!--end media_pane-->
-  <div class="five columns media_sidebar">
+  </div>
+  </div>
+
+  <div class="five columns alpha 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) -%}
@@ -223,6 +234,7 @@
     {% block mediagoblin_sidebar %}
     {% endblock %}
 
-  </div>
+  </div><!--end media_sidebar-->
+
   <div class="clear"></div>
 {% endblock %}