added grouped rating styles

jbalogh · May 19, 2011 · eaea302 · eaea302
1 parent f055302
commit eaea302
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 3 deletions.
diff --git a/apps/addons/templates/addons/impala/details.html b/apps/addons/templates/addons/impala/details.html
@@ -73,7 +73,6 @@ <h4 class="author">{{ _('by') }} {{ users_list(addon.listed_authors) }}</h4>
 {% endif %}
 
 <aside class="secondary">
-  {% include "reviews/grouped_ratings.html" %}
 </aside>
 
 {% if addon.description %}
@@ -84,6 +83,10 @@ <h2>{{ _('About this Add-on') }}'</h2>
 {% endif %}
 
 <aside class="secondary addon-reviews">
+  <div>
+    {{ addon.average_rating|stars }}
+    {{ _('Average') }}
+  </div>
   {% include "reviews/grouped_ratings.html" %}
 </aside>
 

diff --git a/apps/reviews/templates/reviews/grouped_ratings.html b/apps/reviews/templates/reviews/grouped_ratings.html
@@ -3,7 +3,7 @@
     <ul class="grouped_ratings" data-total="{{ addon.total_reviews }}">
     {% for rating, count in grouped_ratings|sort(reverse=True) %}
       {% set pct = ( count|float / addon.total_reviews * 100 )|round( method='floor' ) %}
-      <li>{{ rating|stars }}
+      <li class="c">{{ rating|stars }}
         <div class="rating_bar" data-num-reviews="{{ count }}">
           <span class="bar" style="width:{{ pct }}%">
             <span class="num_ratings">{{ count }}</span>

diff --git a/media/css/impala/addon_details.less b/media/css/impala/addon_details.less
@@ -40,7 +40,6 @@
 }
 
 .addon-vitals {
-    padding-top: 1em;
     font-size: 16px;
     line-height: 1.4em;
     div {
@@ -56,6 +55,16 @@
     }
 }
 
+.gutter aside {
+    color: #666;
+    padding-top: 1em;
+}
+
+.addon-reviews > div {
+    margin-bottom: 1em;
+    font-size: 14px;
+}
+
 .widget {
     padding-left: 21px;
     background: url(../../img/impala/widgets.png) no-repeat 0 4px;

diff --git a/media/css/impala/reviews.less b/media/css/impala/reviews.less
@@ -29,3 +29,60 @@
     margin-right: 0;
     margin-left: 4px;
 }
+
+
+/* grouped ratings style */
+
+.grouped_ratings {
+    font-family: @sans-stack;
+    color: #666;
+    li {
+        margin: 0;
+        padding: 0;
+        border: 0;
+    }
+    .rating_bar {
+        border-left: 1px solid #999;
+        height: 20px;
+        float: left;
+        width: 0px;
+        overflow: visible;
+        width: 96px;
+        span.bar {
+            display:block;
+            height: 100%;
+            position: relative;
+            background: #ddd;
+            margin: .4em .5em 0 0;
+            height: 10px;
+        }
+    }
+    .num_ratings {
+        width: 1px;
+        position: absolute;
+        right: -5px;
+        top: -2px;
+        line-height: 12px;
+        font-size: 10px;
+    }
+    .stars {
+        float: left;
+        margin: 4px 8px 0 0 ;
+    }
+}
+
+.html-rtl .grouped_ratings {
+    .rating_bar {
+        border-left: 0;
+        border-right: 1px solid black;
+        float: right;
+        span.bar {
+            float: right;
+            margin: .4em 0 0 .5em;
+        }
+        span.num_ratings {
+            right: auto;
+            left: -4px;
+        }
+    }
+}