fix: Replace poll progressbar's with <meter> elements

* Fixes incompatibility with sassc

app/scss/ila.scss

@@ -13,6 +13,12 @@ $muted-link-hover: #666;
 $primary: #428bca;
 $primary-dark: #246;
 
+$success: #5cb85c;
+$info: #5bc0de;
+$warning: #f0ad4e;
+$danger: #d9534f;
+
+
 header.microblog {
 	background: top / cover no-repeat url('/static/header-3-2.png');
 	margin: 0 0 15px;
@@ -288,12 +294,6 @@ nav.flexbox {
 	color: #fff;
 }
 
-ul.poll-items {
-	padding-left: none;
-	list-style: none;
-	font-variant: small-caps;
-}
-
 .panel {
 	font-size: 1.15em;
 	.btn {
@@ -349,6 +349,7 @@ ul.poll-items {
 		color: $primary;
 		&:before {
 			font-family: 'Font Awesome 6 Free';
+			font-weight: 900; //Weight selects 'solid' icons
 		}
 	}
 	
@@ -420,16 +421,36 @@ ul.poll-items {
 	color: $muted-text;
 }
 
-
-/*******
-* This is awful, but Twig blocks the style attribute needed by the Bootstrap progress bar.
-* Also requires Dart SASS, so won't work on sassc
+/**
+ * Polls
  */
 
+ul.poll-items {
+	padding-left: 0;
+	list-style: none;
+	label {
+		font-variant: small-caps;
+		font-weight: 400;
+	}
+}
 
-@for $i from 1 through 100 {
-	$val: $i + '%';
-	.pc-#{$i} {
-		width: #{$i} + '%';
+meter {
+	display: block;
+	width: 100%;
+	height: 1.5em;
+	background: none; //Reset
+	background-color: $background;
+	border: none;
+	border-radius: 4px;
+	&::-webkit-meter-optimum-value, &:-moz-meter-optimum::-moz-meter-bar {
+		background: $primary;
+	}
+	&::-webkit-meter-suboptimum-value, &:-moz-meter-sub-optimum::-moz-meter-bar {
+		background: $warning;
 	}
 }
+/*	meter::-webkit-meter-bar, meter::-moz-meter-bar {
+ * 
+ } **/
+
+

data/templates/utils.html

@@ -688,29 +688,23 @@
             {% for item in object.poll_items %}
             <li>
                 {% set pct = item | poll_item_pct(object.poll_voters_count) %}
+                {% if can_vote %}
                     <p>
-                    {% if can_vote %}
-                    <input type="{% if object.is_one_of_poll %}radio{% else %}checkbox{% endif %}" name="name" value="{{ item.name }}" id="{{object.permalink_id}}-{{item.name}}">
-                    <label for="{{object.permalink_id}}-{{item.name}}">
-                    {% endif %}
- 
-                    {{ item.name | clean_html(object) | safe }}
-
+                        <input type="{% if object.is_one_of_poll %}radio{% else %}checkbox{% endif %}" name="name" value="{{ item.name }}" id="{{object.permalink_id}}-{{item.name}}-vote">
+                        <label for="{{object.permalink_id}}-{{item.name}}-vote">{{ item.name | clean_html(object) | safe }}</label>
                             {% if object.voted_for_answers and item.name in object.voted_for_answers %}
-                    <span class="muted poll-vote">you voted for this answer</span>
+                                <span class="poll-vote">you voted for this answer</span>
                             {% endif %}
-
-                    {% if can_vote %}
                         </label>
-                    {% endif %}
-
-                    <span class="text-muted">{{ pct }}% <span class="muted">({{ item.replies.totalItems }} votes)</span></span>
                     </p>
-                <div class="progress">
-                    <div class="progress-bar {{ 'pc-' ~ pct }}" role="progressbar" aria-valuenow="{{ pct }}" aria-valuemin="0" aria-valuemax="100">
-                        <span class="sr-only">{{ pct }}%</span>
-                    </div>
-                </div>
+                {% endif %}
+                <p>
+                    <label id="{{object.permalink_id}}-{{item.name}}">
+                        {{ item.name | clean_html(object) | safe }}
+                        <span class="text-muted">{{ pct }}% ({{ item.replies.totalItems }} votes)</span>
+                    </label>
+                    <meter id="{{object.permalink_id}}-{{item.name}}" min="0" max="100" value="{{ pct }}">{{ pct }}%</meter>
+                </p>
             </li>
             {% endfor %}
             </ul>