Add SVG-based rating circles (#1081)

Fixes #1054.
DMOJ · Sep 30, 2019 · 6c1f947 · 6c1f947
1 parent 3fbdd60
commit 6c1f947
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 62 deletions.
diff --git a/resources/ranks.scss b/resources/ranks.scss
@@ -3,83 +3,56 @@
     font-weight: bold !important;
 }
 
-.rate-box {
-    width: 1em;
-    height: 1em;
-    border-radius: 1em;
-    overflow: hidden;
-    position: relative;
-    border: solid 2px;
-    display: block;
-
-    span {
-        width: 1em;
-        position: absolute;
-        bottom: 0;
-        display: block;
+@mixin rate-svg-color($color) {
+    circle {
+        stroke: $color;
+    }
+    path {
+        fill: $color;
+    }
+}
+
+svg.rate-box {
+    width: 1.2em;
+
+    circle {
+        fill: none;
+        stroke-width: 2px;
     }
 
     &.rate-none {
-        border: none;
+        visibility: hidden;
     }
 
     &.rate-newbie {
-        border-color: #999;
+        @include rate-svg-color(#999);
     }
 
     &.rate-amateur {
-        border-color: #00a900;
+        @include rate-svg-color(#00a900);
     }
 
     &.rate-expert {
-        border-color: #66f;
+        @include rate-svg-color(#66f);
     }
 
     &.rate-candidate-master {
-        border-color: #f6f;
+        @include rate-svg-color(#f6f);
     }
 
     &.rate-master {
-        border-color: #dc0;
+        @include rate-svg-color(#dc0);
     }
 
     &.rate-grandmaster, &.rate-target {
-        border-color: #e00;
-    }
-
-    &.rate-newbie span {
-        background: #999;
-    }
-
-    &.rate-amateur span {
-        background: #00a900;
+        @include rate-svg-color(#e00);
     }
 
-    &.rate-expert span {
-        background: #66f;
-    }
-
-    &.rate-candidate-master span {
-        background: #f6f;
-    }
-
-    &.rate-master span {
-        background: #dc0;
-    }
-
-    &.rate-grandmaster span {
-        background: #e00;
-    }
-
-    &.rate-target span {
-        top: 0.28em;
-        bottom: 0.28em;
-        left: 0.28em;
-        right: 0.28em;
-        background: #e00;
-        height: auto !important;
-        width: auto !important;
-        border-radius: 50%;
+    &.rate-target {
+        circle:last-child {
+            stroke: none;
+            fill: #e00;
+        }
     }
 }
 
@@ -126,9 +99,7 @@
     }
 
     .rate-box {
-        display: inline-block;
         margin-right: 0.2em;
         vertical-align: bottom;
-        font-size: 0.8em;
     }
 }
diff --git a/templates/base.html b/templates/base.html
@@ -176,6 +176,11 @@
     </noscript>
 </head>
 <body>
+<svg width="0" height="0">
+    <defs>
+        <clipPath id="rating-clip"><circle cx="8" cy="8" r="7"/></clipPath>
+    </defs>
+</svg>
 <nav id="navigation" class="unselectable">
     <div id="nav-container">
         <a id="navicon" href="javascript:void(0)"><i class="fa fa-bars"></i></a>

diff --git a/templates/user/rating.html b/templates/user/rating.html
@@ -1,8 +1,17 @@
 {% spaceless %}
     <span class="rate-group">
-        <span class="rate-box {{ rating_class(rating) }}">
-            <span style="height: {{ rating_progress(rating)|floatformat(3) }}em"></span>
-        </span>
+        {% if rating_class(rating) == 'rate-target' %}
+            <svg class="rate-box rate-target" viewBox="0 0 16 16">
+                <circle cx="8" cy="8" r="7"></circle>
+                <circle cx="8" cy="8" r="3"></circle>
+            </svg>
+        {% else %}
+            <svg class="rate-box {{ rating_class(rating) }}" viewBox="0 0 16 16">
+                <circle cx="8" cy="8" r="7"></circle>
+                <path clip-path="url(#rating-clip)"
+                      d="M0 16v-{{ (rating_progress(rating) * 16)|floatformat(2) }}h16 0v16z"></path>
+            </svg>
+        {% endif %}
         <span class="rating {{ rating_class(rating) }}">{{ rating.rating|default(rating) }}</span>
     </span>
 {% endspaceless %}
diff --git a/templates/user/users-table.html b/templates/user/users-table.html
@@ -4,9 +4,10 @@
     <th class="header rank">
         {% if sort_links %}<a href="{{ sort_links.rating }}">{% endif %}
         <span class="rate-group">
-            <span style="color: white" class="rate-box">
-                <span style="background: white; height: 0.3em"></span>
-            </span>
+            <svg class="rate-box" viewBox="0 0 16 16">
+                <circle cx="8" cy="8" r="7" stroke="white"></circle>
+                <path clip-path="url(#rating-clip)" d="M0 16v-4.8h16 0v16z" fill="white"></path>
+            </svg>
         </span>
         {%- if sort_links %}{{ sort_order.rating }}</a>{% endif %}
     </th>