Merge pull request #9 from open-craft/results-width

Fix: Results view is too narrow when no images are present

poll/poll.py

@@ -318,7 +318,6 @@ class PollBlock(PollBase):
         total = 0
         self.clean_tally()
         source_tally = self.tally
-        any_img = self.any_image(self.answers)
         for key, value in answers.items():
             count = int(source_tally[key])
             tally.append({
@@ -330,7 +329,6 @@ class PollBlock(PollBase):
                 'first': False,
                 'choice': False,
                 'last': False,
-                'any_img': any_img,
             })
             total += count
 
@@ -437,9 +435,13 @@ class PollBlock(PollBase):
             self.publish_event_from_dict(self.event_namespace + '.view_results', {})
             detail, total = self.tally_detail()
         return {
-            'question': markdown(self.question), 'tally': detail,
-            'total': total, 'feedback': markdown(self.feedback),
-            'plural': total > 1, 'display_name': self.display_name,
+            'question': markdown(self.question),
+            'tally': detail,
+            'total': total,
+            'feedback': markdown(self.feedback),
+            'plural': total > 1,
+            'display_name': self.display_name,
+            'any_img': self.any_image(self.answers),
         }
 
     @XBlock.json_handler

poll/public/css/poll.css

@@ -38,12 +38,16 @@
 
 .percentage-gauge-container {
     display: inline-block;
-    width: 65%;
+    width: 87%;
     vertical-align: middle;
     position: relative;
     background-color: #fafbfc;
 }
 
+.poll-results.has-images .percentage-gauge-container {
+    width: 65%;
+}
+
 ul.poll-answers, ul.poll-answers-results {
     list-style-type: none !important;
     max-width: 80%;

poll/public/handlebars/poll_results.handlebars

 <script id="poll-results-template" type="text/html">
     <h3 class="poll-header">{{display_name}}</h3>
     <div class="poll-question-container">{{{question}}}</div>
-    <ul class="poll-answers-results poll-results">
+    <ul class="poll-answers-results poll-results {{~#if any_img}} has-images{{/if}}">
     {{#each tally}}
         <li class="poll-result">
             <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}}