Bug 571923, bringing the pretty to reviews

apps/reviews/templates/reviews/review.html

@@ -28,10 +28,10 @@
   <p>{{ review.body|nl2br }}</p>
   {% if outdated and not is_reply %}
     {# L10n: {0} is a version number (like 1.01) #}
-    <span>{{ _('This review is for a previous version of the add-on ({0}).')|f(review.version.version) }}</span>
+    <span class="review-note">{{ _('This review is for a previous version of the add-on ({0}).')|f(review.version.version) }}</span>
   {% endif %}
   {% if page != 'user' and review.previous_count %}
-  <span>
+  <span class="review-note">
     {% trans cnt=review.previous_count,
              url=url('reviews.user', addon.id, review.user.id) %}
       Show the <a href="{{ url }}">previous review</a> submitted by this user.
@@ -41,11 +41,11 @@
   </span>
   {% endif %}
   {% if request.user.is_authenticated() %}
-  <ul>
+  <ul class="review-options">
     {% if is_flagged %}
       <li>{{ _('Flagged for review') }}</li>
     {% else %}
-      <li><a class="flag-review" href="{{ url('reviews.flag', addon.id, review.id) }}">
+      <li class="review-wrapper"><a class="flag-review" href="{{ url('reviews.flag', addon.id, review.id) }}">
         {{ _('Report this review') }}</a></li>
     {% endif %}
     {% if perms.is_author or perms.is_admin %}

apps/reviews/templates/reviews/review_list.html

@@ -38,6 +38,18 @@
       {% endif %}
     </hgroup>
   </header>
+  <div id="dev-reply-form" class="review article reply reply-form hidden">
+    <h3>Write a Reply</h3>
+    <form method="POST" action="">
+      <label for="reply-title">{{_('Title:')}}</label>
+      <input id="reply-title" type="text" name="title" />
+      <label for="reply-body">{{_('Reply:')}}</label>
+      <textarea id="reply-body" name="body"></textarea>
+      <input type="hidden" name="inreplyto" value="" />
+      <input type="submit" value="{{ _('Submit Your Reply') }}">
+      or <a href="#">Cancel</a>
+    </form>
+  </div>
   {% for review in reviews.object_list %}
     {% include "reviews/review.html" %}
     {% if review.id in replies %}
@@ -60,16 +72,22 @@
       </h5>
       <h6 class="author">{{ _('by') }} {{ users_list(addon.listed_authors) }}</h6>
     </hgroup>
-    <span>{{ addon.average_rating|float|stars }} {{ _('Average Rating') }}</span>
+    <div>
+      <span>{{ addon.average_rating|float|stars }} {{ _('Average Rating') }}</span>
+    </div>
     {% if grouped_ratings %}
-      <ul>
-      {% for count in grouped_ratings %}
-        <li>{{ (5 - loop.index0)|stars }} {{ count }} </li>
-      {% endfor %}
-      </ul>
+      <div>
+        <ul>
+        {% for count in grouped_ratings %}
+          <li>{{ (5 - loop.index0)|stars }} {{ count }} </li>
+        {% endfor %}
+        </ul>
+      </div>
     {% endif %}
-    <a class="button" href="#TODO">
-      {{ _('Write a New Review') }}</a>
+    <div>
+      <a class="button" href="#TODO">
+        {{ _('Write a New Review') }}</a>
+    </div>
   </div>
 </div>
 

media/css/zamboni/zamboni.css

@@ -6,7 +6,8 @@
 .notification .aux:after,
 .aux .button-wrapper:after,
 .object-lead .button-wrapper:after,
-.article.version:after {
+.article.version:after,
+.article.review:after {
     content: ".";
     display: block;
     clear: both;
@@ -2171,8 +2172,128 @@ form .error .note.error {
 
 .other-note {
     display: none;
+    clear: left;
+    padding: .25em 0 0 1em;
+    margin: 0;
+}
+.other-note input[type='text'] {
+    width: 150px;
+}
+.other-note input[type='submit'] {
+    margin-top: -2px;
+}
+.other .other-note,
+.review-reason a {
+    display: block;
 }
 
-.other .other-note {
-    display: inherit;
+/** Reviews *********/
+
+ul.review-options {
+    float: right;
+    font-size: .9em;
+    margin-top: 1em;
+    margin-bottom: 2px;
+    color: #aaa;
 }
+ul.review-options > li {
+    float: left;
+}
+.review ul.review-options > li > a {
+    font-weight: normal;
+    color: #aaa;
+    -moz-transition: color .2s;
+    -webkit-transition: color .2s;
+    transition: color .2s;
+}
+ul.review-options > li:not(:first-child) {
+    list-style-type: disc;
+    margin-left: 1.6em;
+}
+.article.review {
+    margin-bottom: 1em;
+    -moz-border-radius: 8px;
+    -webkit-border-radius: 8px;
+    border-radius: 8px;
+    overflow: visible;
+}
+.review h5 {
+    float: left;
+    margin-right: .8em;
+    font-size: 120%;
+}
+.review p {
+    margin: 1em 0 0 0;
+}
+.review .reviewed-on {
+    clear: left;
+    font-size: .9em;
+}
+.reviews .highlight > span {
+    display: block;
+}
+.reviews .highlight hgroup {
+    display: block;
+    margin-bottom: 1em;
+}
+.reviews .highlight > div {
+    margin: 0;
+    padding: 1em 0;
+    border-top: 1px dashed #ccc;
+}
+.reviews .highlight > div:last-child {
+    text-align: center;
+    padding-bottom: 0;
+}
+.review:hover ul.review-options > li > a {
+    color: #0055EE;
+}
+.review-wrapper {
+    position: relative;
+}
+.reviews header {
+    margin-left: 0;
+}
+.highlight h5 {
+    font-size: 120%;
+}
+.review-reason {
+    padding: 1em;
+}
+.review-reason.left {
+    left: -200px;
+}
+.review.reply {
+    margin-left: 4em;
+    background: #f0f6f2;
+    border-color: #d0e2c5;
+}
+.review .review-note {
+    float: left;
+    font-size: .9em;
+    margin-top: 1em;
+    margin-bottom: 2px;
+    font-style: italic;
+}
+
+.review.reply-form {
+    background: #C8E8F3;
+    border: 0;
+}
+.reply-form form {
+    margin-bottom: 0;
+}
+.reply-form label {
+    display: block;
+    margin-top: 1em;
+}
+.reply-form textarea {
+    margin-bottom: 2em;
+    width: 80%;
+}
+.reply-form h3 {
+    margin: 0;
+}
+.reply-form input[type='text'] {
+    width: 60%;
+}