show rating stars + counts on detail page (bug 755922)

Author: cvan

apps/users/helpers.py

@@ -10,7 +10,7 @@
 
 
 @register.function
-def emaillink(email, title=None):
+def emaillink(email, title=None, klass=None):
     if not email:
         return ""
 
@@ -28,8 +28,8 @@ def emaillink(email, title=None):
     else:
         title = '<span class="emaillink">%s</span>' % fallback
 
-    node = u'<a href="#">%s</a><span class="emaillink js-hidden">%s</span>' % (
-        title, fallback)
+    node = (u'<a%s href="#">%s</a><span class="emaillink js-hidden">%s</span>'
+            % ((' class="%s"' % klass) if klass else '', title, fallback))
     return jinja2.Markup(node)
 
 

media/css/mkt/buttons.less

@@ -1,5 +1,25 @@
 @import 'lib';
 
+a.arrow {
+    position: relative;
+    &:after {
+        .arrow;
+        content: "";
+        display: block;
+        opacity: .7;
+        position: absolute;
+        top: 15px;
+        right: 10px;
+        height: 18px;
+        width: 18px;
+    }
+    &:hover, &:active {
+        &:after {
+            opacity: 1;
+        }
+    }
+}
+
 .button, button {
 
     border: 0;

media/css/mkt/detail.less

@@ -331,34 +331,51 @@ h1 .num {
     }
 }
 
-.support ul {
-    margin-top: 47px;
-    list-style-type: none;
-    padding: 0;
+.developer-comments {
+    margin-bottom: 10px;
+}
+
+.support {
     font-size: 14px;
+    .average-rating {
+        .fat-button;
+        .width(4);
+        margin: 10px 0;
+    }
+    .overall-reviews {
+        text-align: left;
+        &:hover {
+            span {
+                color: darken(@green, 5%);
+                text-decoration: none;
+            }
+        }
+    }
+    a, time {
+        display: inline-block;
+        padding: 5px 20px 5px 0;
+    }
+    ul {
+        margin: 0;
+        list-style-type: none;
+        padding: 0;
+    }
     li {
+        .width(7);
         float: left;
         margin-bottom: 10px;
         min-height: 100px;
-        .width(7);
-        h3 {
-            font-size: 22px;
-        }
-        p {
-            margin: 0;
-            a, time {
-                display: inline-block;
-                padding: 5px 20px 5px 0;
-            }
-            a {
-                background: url(../../img/mkt/arrows/support.png) no-repeat 100% 50%;
-            }
-        }
+    }
+    h3 {
+        font-size: 22px;
+    }
+    p {
+        margin: 0;
     }
 }
 
-.html-rtl .support ul {
-    a, time {
+.html-rtl .support {
+    p a, time {
         padding: 5px 0 5px 20px;
     }
 }
@@ -383,26 +400,45 @@ h1 .num {
     }
 }
 
-// 7 columns
-@media (max-width: @7col) {
-    .product-details {
-        .actions {
+// Anything larger than mobile.
+@media (min-width: @4col) {
+    #reviews {
+        margin: 40px 0 20px;
+    }
+    .support li {
+        margin-top: 20px;
+    }
+    .not-rated {
+        font-size: 16px;
+    }
+    .support {
+        p a.arrow:after {
+            background-image: url(../../img/mkt/arrows/support.png);
+            background-position: 100% 0;
+            right: 0;
+            top: 8px;
         }
     }
-    .support ul li {
+}
+
+@media (max-width: @7col) {
+    .support li {
         .width(2);
     }
 }
 
-//4 columns
 @media (max-width: @4col) {
     #page > .description {
         border-width: 1px 0;
         padding: 10px;
         .summary {
+            margin: 0 0 5px;
             max-width: 100%;
             width: 100%;
         }
+        .show .more {
+            margin-top: 15px;
+        }
         a.collapse.narrow {
             .transition(none);
             display: block;
@@ -565,45 +601,43 @@ h1 .num {
             }
         }
     }
-    .support ul {
-        li {
-            margin-bottom: 15px;
-            min-height: inherit;
-        }
+    #add-first-review {
+        display: none;
     }
     .support {
+        .not-rated,
+        .average-rating {
+            margin: 20px 0 10px;
+        }
+        .not-rated {
+            color: @medium-gray;
+        }
+        .average-rating {
+            width: 100%;
+        }
         a {
             .fat-button;
         }
-        .overall-reviews {
-            text-align: left;
-            margin: 25px 0 0;
-            + ul {
-                margin: 0;
+        li {
+            .border-box;
+            float: left;
+            margin: 10px 0 0;
+            min-height: inherit;
+            padding-right: 5px;
+            width: 50%;
+            &:nth-child(2n) {
+                padding: 0 0 0 5px;
             }
         }
-        ul {
+        dl {
             margin: 15px 0 0;
-            li {
-                .border-box;
-                float: left;
-                margin: 10px 0 0;
-                padding-right: 5px;
-                width: 50%;
-                &:nth-child(2n) {
-                    padding: 0 0 0 5px;
-                }
-            }
         }
-        dl {
-            margin: 20px 0 15px;
-            dt, dd {
-                color: @text;
-                display: inline-block;
-            }
-            dt {
-                margin-right: 5px;
-            }
+        dt, dd {
+            color: @text;
+            display: inline-block;
+        }
+        dt {
+            margin-right: 5px;
         }
     }
     .previews.slider {
@@ -614,12 +648,3 @@ h1 .num {
     }
 }
 
-.detail #reviews {
-    margin-top: 45px;
-    h3 {
-        margin-bottom: 10px;
-    }
-    .not-rated {
-        font-size: 16px;
-    }
-}

media/css/mkt/promo-grid.less

@@ -1,24 +1,11 @@
 @import 'lib';
 
-.item-arrows() {
-    &:after {
-        .arrow;
-        content: "";
-        display: block;
-        opacity: .7;
-        position: absolute;
-        top: 15px;
-        right: 10px;
-        height: 18px;
-        width: 18px;
-    }
+.view-more a,
+.mkt-tile {
     &:hover,
     &:active {
         background: @faint-gray;
         .box-shadow(none);
-        &:after {
-            opacity: 1;
-        }
     }
     &:active {
         .depressed;
@@ -233,7 +220,6 @@
         }
     }
     .view-more a {
-        .item-arrows;
         background: @bg;
         border-top: 1px solid @light-gray;
         display: block;
@@ -301,7 +287,6 @@
                 background: @bg-lite;
                 height: 74px;
                 padding: 10px 40px 0 85px;
-                .item-arrows;
             }
         }
     }

media/css/mkt/ratings.less

@@ -182,15 +182,8 @@ header.product {
 }
 
 #submit-review {
-    form {
-        .simple-field {
-            margin: 0;
-        }
-    }
-    .barometer {
-        font-size: 120%;
-        line-height: 1.2;
-        margin-bottom: 20px;
+    form .simple-field {
+        margin: 0;
     }
     .form-footer {
         margin-top: 30px;
@@ -214,52 +207,6 @@ header.product {
     }
 }
 
-.barometer {
-    span {
-        display: inline-block;
-        .width(1.5);
-        &:before {
-            background: url(../../img/icons/thumbs.png) no-repeat;
-            content: "";
-            display: block;
-            float: left;
-            margin-right: 10px;
-            height: 20px;
-            width: 15px;
-        }
-        &:hover {
-            cursor: pointer;
-        }
-        &.voted {
-            font-weight: bold;
-        }
-    }
-    .upvotes {
-        color: #00b960;
-        &:before {
-            background-position: 0 -42px;
-        }
-        &:hover, &.voted {
-            &:before {
-                background-position: 0 0;
-            }
-        }
-    }
-    .downvotes {
-        color: #d93a40;
-        &:before {
-            background-position: 100% 100%;
-        }
-        &:hover, &.voted {
-            &:before {
-                background-position: 100% -82px;
-            }
-        }
-    }
-}
-
-
-
 .stars {
     background: url(../../img/impala/stars.png) no-repeat left top;
     display: inline-block;
@@ -302,6 +249,9 @@ header.product {
         color: @green;
         vertical-align: middle;
     }
+    &:hover span {
+        text-decoration: none;
+    }
 }
 
 .ratingwidget {

media/css/mkt/site.less

@@ -238,15 +238,15 @@ body {
         }
         .account {
             .border-box;
-            margin: 15px 10px;
+            margin: 5px 10px;
             color: @white;
             .button {
                 padding: 5px 0;
                 width: 100%;
             }
         }
         .footer-links {
-            margin: 0 0 15px;
+            margin: 10px 0;
             text-align: left;
             a {
                 .border-box;