Remove spacers from poll result list to improve accessibility.

To recreate the same style as before without the spacers, we need to completely
refactor the styling and use display:inline instead of display:table-cell.  The
height of the background of the percentage gauge could only be set via
JavaScript, which is unfortunate.

poll/public/css/poll.css

@@ -13,7 +13,7 @@
 }
 
 .poll-result-input-container {
-    display: table-cell;
+    display: inline-block;
     vertical-align: middle;
 }
 
@@ -21,9 +21,15 @@
     margin: 0 .5em 0 0;
 }
 
+.percentage-gauge-background {
+    position: absolute;
+    display: inline-block;
+    background-color: #fafbfc;
+}
+
 .percentage-gauge-container {
-    display: table-cell;
-    width: 100%;
+    display: inline-block;
+    width: 65%;
     vertical-align: middle;
     background-color: #fafbfc;
 }
@@ -45,14 +51,10 @@ li.poll-spacer {
     height: .25em;
 }
 
-ul.poll-answers-results {
-    display: table;
-}
-
-li.poll-result {
+div.poll-block ul.poll-results li.poll-result {
+    /* The selector above needs all three parts to trump some margin setting from the LMS. */
     width: 100%;
-    display: table-row;
-    padding-bottom: .2em;
+    margin-bottom: 4px;
 }
 
 .poll-answer-label {
@@ -68,14 +70,12 @@ li.poll-result {
     width: 25%;
     display: inline-block;
     vertical-align: middle;
-}
-
-.poll-image {
     margin-left: .5em;
 }
 
 li.poll-result .poll-image {
-    display: table-cell;
+    width: 22%;
+    display: inline-block;
     margin-left: 0;
 }
 
@@ -92,7 +92,7 @@ li.poll-result .poll-image {
 }
 
 .poll-percent-container {
-    display: table-cell;
+    display: inline-block;
     text-align: left;
     padding-left: .2em;
     vertical-align: middle;

poll/public/handlebars/poll_results.handlebars

@@ -7,15 +7,15 @@
             <div class="poll-result-input-container">
               <input id="answer-{{key}}" type="radio" disabled {{#if choice}}checked{{/if}} />
             </div>
-            {{#if any_img}}
+            {{~#if any_img~}}
                 <div class="poll-image result-image">
                     <label for="answer-{{key}}" class="poll-image-label">
                         {{#if img}}
                           <img src="{{img}}" alt="{{img_alt}}"/>
                         {{/if}}
                     </label>
-                </div>
-            {{/if}}
+                </div><div class="percentage-gauge-background"></div>
+            {{~/if~}}
             <div class="percentage-gauge-container">
               <div class="percentage-gauge" style="width:{{percent}}%;">
                   <label class="poll-answer-label" for="answer-{{key}}">{{{answer}}}</label>
@@ -25,10 +25,6 @@
                 <span class="poll-percent-display{{#if first}} poll-top-choice{{/if}}">{{percent}}%</span>
             </div>
         </li>
-       {{^last}}
-        <li class="poll-spacer">
-        </li>
-       {{/last}}
     {{/each}}
     </ul>
     <input class="input-main" type="button" name="poll-submit" value="Submit" disabled>

poll/public/js/poll.js

@@ -142,6 +142,31 @@ function PollUtil (runtime, element, pollType) {
 
     this.getResults = function () {
         // Used if results are not private, to show the user how other students voted.
+        function adjustGaugeBackground() {
+            // Adjust the height of the grey background of the the percentage gauges.  This
+            // couldn't be achieved with CSS.
+            $('ul.poll-results > li', element).each(function() {
+                var height = 0, width;
+                $(this).children().each(function() {
+                    height = Math.max(height, $(this).height());
+                });
+                width = $('.percentage-gauge-container', this).width();
+                $('.percentage-gauge-background', this).height(height).width(width);
+            });
+        }
+        function whenImagesLoaded(callback) {
+            // Wait for all images to be loaded, then call callback.
+            var missingImages = 1;
+            $('img', element).each(function() {
+                if ($(this).height() == 0) {
+                    missingImages++;
+                    $(this).load(function() {
+                        if (--missingImages == 0) callback();
+                    });
+                }
+            });
+            if (--missingImages == 0) callback();
+        }
         $.ajax({
             // Semantically, this would be better as GET, but we can use helper
             // functions with POST.
@@ -150,8 +175,9 @@ function PollUtil (runtime, element, pollType) {
             data: JSON.stringify({}),
             success: function (data) {
                 $('div.poll-block', element).html(self.resultsTemplate(data));
+                whenImagesLoaded(adjustGaugeBackground);
             }
-        })
+        });
     };
 
     this.enableSubmit = function () {