Lots of changes to media page; rearranged things, added new styles, added jquery bits, gave the comment section a refresh

3 files changed, 69 insertions, 41 deletions

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 12d88ffa..bbc04342 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -117,7 +117,7 @@ a.mediagoblin_logo{
 
 /* common website elements */
 
-.button_action, .button_action_highlight{
+.button_action, .button_action_highlight {
   color: #c3c3c3;
   background-color: #363636;
   border: 1px solid;
@@ -128,16 +128,16 @@ a.mediagoblin_logo{
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
-  font-size: 1em;
+  font-size: 16px;
+  cursor: pointer;
 }
 
-.button_action_highlight{
+.button_action_highlight {
   background-color: #86D4B1;
   border-color: #A2DEC3 #6CAA8E #5C9179;
   color: #283F35;
 }
 
-
 .button_form, .cancel_link {
   height: 32px;
   min-width: 99px;
@@ -171,15 +171,15 @@ a.mediagoblin_logo{
   background-image:         linear-gradient(top, #D2D2D2, #aaa);
 }
 
-.pagination{
+.pagination {
 text-align: center;
 }
 
-.pagination_arrow{
+.pagination_arrow {
   margin: 5px;
 }
 
-.empty_space{
+.empty_space {
   background-image: url("../images/empty_back.png");
   font-style: italic;
   text-align: center;
@@ -187,6 +187,21 @@ text-align: center;
   padding-top: 70px;
 }
 
+.right_align {
+  float: right;
+}
+
+textarea {
+  border: none;
+  background-color: #f1f1f1;
+  padding: 3px;
+}
+
+textarea#comment_content {
+  width: 634px;
+  height: 90px;
+}
+
 /* forms */
 
 .form_box {
diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
index 95197c15..12039473 100644
--- a/mediagoblin/templates/mediagoblin/user_pages/media.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/media.html
@@ -22,11 +22,25 @@
 
 {% block title %}{{ media.title }} — {{ super() }}{% endblock %}
 
+{% block mediagoblin_head %}
+  <script>
+    $(document).ready(function(){
+      $('#form_comment').hide();
+      $('#button_addcomment').click(function(){
+          $(this).fadeOut('fast');
+          $('#form_comment').slideDown(function(){
+            $('#comment_content').focus();
+          });
+      });
+    });
+  </script>
+{% endblock mediagoblin_head %}
+
 {% block mediagoblin_content %}
   {% if media %}
     <div class="grid_11 alpha">
       <div class="media_image_container">
-	{% block mediagoblin_media %}
+        {% block mediagoblin_media %}
           {% set display_media = request.app.public_store.file_url(
                    media.get_display_media(media.media_files)) %}
 
@@ -45,7 +59,7 @@
                  src="{{ display_media }}"
                  alt="Image for {{ media.title }}" />
           {% endif %}
-	{% endblock %}
+        {% endblock %}
       </div>
 
       <h2 class="media_title">
@@ -59,9 +73,36 @@
           {{ date }}
         {%- endtrans %}
       </p>
-      <h3></h3>
-      {% if request.user and comments.count() %}
-        <p><a href="#comment_form">{% trans %}Post a comment{% endtrans %}</a></p>
+      
+      {% if media['uploader'] == request.user._id or 
+                                 request.user['is_admin'] %}
+        <p>
+          {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
+                                     user= media.get_uploader().username,
+                                     media= media._id) %}
+          <a class="button_action" href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
+        </p>
+        <p>
+          {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
+                                     user= media.get_uploader().username,
+                                     media= media._id) %}
+          <a class="button_action" href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
+        </p>
+      {% endif %}
+      
+      <h3>{% trans %}23 comments{% endtrans %} <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 %}</a></div></h3>
+      {# 0 comments. Be the first to add one! #}
+      {% if request.user %}
+        <form action="{{ request.urlgen('mediagoblin.user_pages.media_post_comment', 
+                                         user= media.get_uploader().username,
+                                         media=media._id) }}" method="POST" id="form_comment">
+        <p>{% trans %}Type your comment here. You can use <a href="http://daringfireball.net/projects/markdown/basics">Markdown</a> for formatting.{% endtrans %}</p>
+          {{ wtforms_util.render_divs(comment_form) }}
+          <div class="form_submit_buttons">
+            <input type="submit" value="{% trans %}Add this comment{% endtrans %}" class="button_action" />
+              {{ csrf_token }}
+          </div>
+        </form>
       {% endif %}
       {% if comments %}
         {% for comment in comments %}
@@ -90,18 +131,6 @@
           </div>
         {% endfor %}
 
-        {% if request.user %}
-          <form action="{{ request.urlgen('mediagoblin.user_pages.media_post_comment', 
-                                           user= media.get_uploader().username,
-                                           media=media._id) }}" method="POST">
-            {{ wtforms_util.render_divs(comment_form) }}
-            <div class="form_submit_buttons">
-              <input type="submit" value="{% trans %}Post comment!{% endtrans %}" class="button_form" />
-                {{ csrf_token }}
-            </div>
-          </form>
-        {% endif %}
-
         {{ render_pagination(request, pagination, 
 	      request.urlgen('mediagoblin.user_pages.media_home',
 	      user = media.get_uploader().username,
@@ -119,22 +148,6 @@
       
       {% include "mediagoblin/utils/prev_next.html" %}
 
-      {% if media['uploader'] == request.user._id or 
-                                 request.user['is_admin'] %}
-        <p>
-          {% set edit_url = request.urlgen('mediagoblin.edit.edit_media',
-                                     user= media.get_uploader().username,
-                                     media= media._id) %}
-          <a href="{{ edit_url }}">{% trans %}Edit{% endtrans %}</a>
-        </p>
-        <p>
-          {% set delete_url = request.urlgen('mediagoblin.user_pages.media_confirm_delete',
-                                     user= media.get_uploader().username,
-                                     media= media._id) %}
-          <a href="{{ delete_url }}">{% trans %}Delete{% endtrans %}</a>
-        </p>
-      {% endif %}
-
       {% if media.attachment_files|count %}
         <h3>Attachments</h3>
         <ul>
diff --git a/mediagoblin/user_pages/forms.py b/mediagoblin/user_pages/forms.py
index 301f1f0a..e04fd559 100644
--- a/mediagoblin/user_pages/forms.py
+++ b/mediagoblin/user_pages/forms.py
@@ -21,7 +21,7 @@ from mediagoblin.tools.translate import fake_ugettext_passthrough as _
 
 class MediaCommentForm(wtforms.Form):
     comment_content = wtforms.TextAreaField(
-        _('Comment'),
+        _(''),
         [wtforms.validators.Required()])