Handle multi-line poll answers more sanely.

poll/public/css/poll.css

 /* CSS for PollBlock Student View */
 
-.poll-answer {
+.poll-answer-text {
     margin-left: 1em;
+    margin-bottom: 0;
     font-weight: bold;
-    display: inline-block;
+    vertical-align: middle;
 }
+
 .percentage-gauge {
     display: inline-block;
     background-color: #e5ebee;
-    position: relative;
-    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
 }
 
 .poll-result-input-container {
@@ -25,6 +29,7 @@
     display: table-cell;
     width: 100%;
     vertical-align: middle;
+    position: relative;
     background-color: #fafbfc;
 }
 
@@ -34,11 +39,10 @@ ul.poll-answers, ul.poll-answers-results {
 }
 
 li.poll-answer {
-    display: block;
+    display: table-row;
     border-bottom-width: .5em;
     vertical-align: middle;
     margin-top: 5px;
-    margin-bottom: 5px;
 }
 
 li.poll-spacer {
@@ -61,12 +65,12 @@ li.poll-result {
     display: inline-block;
     margin-bottom: 5px;
     margin-top: 5px;
-    white-space: nowrap;
+    position: relative;
 }
 
 .poll-image {
     width: 25%;
-    display: inline-block;
+    display: table-cell;
     vertical-align: middle;
 }
 
@@ -74,6 +78,10 @@ li.poll-result {
     margin-left: .5em;
 }
 
+.poll-image.result-image {
+    background-color: #fafbfc;
+}
+
 li.poll-result .poll-image {
     display: table-cell;
     margin-left: 0;
@@ -190,11 +198,17 @@ th.survey-answer {
 }
 
 /* Counteract Markdown's wrapping in paragraphs */
-.poll-answer p, .survey-question p, .poll-answer-label p{
-    margin: 0;
+.survey-question p, div.percentage-gauge-container label.poll-answer-label p{
+    margin-bottom: 0;
     padding: 0;
 }
 
+/* Keep the paragraph spacing, but make the spacing vertically even. */
+li.poll-answer label.poll-answer-text p {
+    margin-bottom: .5em;
+    margin-top: .5em;
+}
+
 .poll-voting-thanks span {
     margin-top: .25em;
     margin-bottom: .25em;
@@ -216,3 +230,10 @@ th.survey-answer {
     text-align: right;
     cursor: pointer;
 }
+
+.poll-input-container {
+    display: table-cell;
+    vertical-align: middle;
+    height: 100%;
+    padding-right: .5em;
+}
\ No newline at end of file

poll/public/handlebars/poll_results.handlebars

@@ -17,9 +17,8 @@
                 </div>
             {{/if}}
             <div class="percentage-gauge-container">
-              <div class="percentage-gauge" style="width:{{percent}}%;">
-                  <label class="poll-answer-label" for="answer-{{key}}">{{{answer}}}</label>
-              </div>
+              <div class="percentage-gauge" style="width:{{percent}}%;"></div>
+              <label class="poll-answer-label" for="answer-{{key}}">{{{answer}}}</label>
             </div>
             <div class="poll-percent-container">
                 <span class="poll-percent-display{{#if first}} poll-top-choice{{/if}}">{{percent}}%</span>

poll/public/html/poll.html

@@ -10,17 +10,19 @@
       <ul class="poll-answers">
       {% for key, value in answers %}
           <li class="poll-answer">
-              <input type="radio" name="choice" id="{{url_name}}-answer-{{key}}" value="{{key}}" {% if choice == key %}checked{% endif %}/>
-              {% if value.img %}
-              <div class="poll-image">
-                  <label for="{{url_name}}-answer-{{key}}" class="poll-image-label">
-                      {% if value.img %}
-                      <img src="{{value.img}}" />
-                      {% endif %}
-                  </label>
+              <div class="poll-input-container">
+                  <input type="radio" name="choice" id="{{url_name}}-answer-{{key}}" value="{{key}}" {% if choice == key %}checked{% endif %}/>
               </div>
+              {% if any_img %}
+                  <div class="poll-image">
+                      <label for="{{url_name}}-answer-{{key}}" class="poll-image-label">
+                          {% if value.img %}
+                          <img src="{{value.img}}" />
+                          {% endif %}
+                      </label>
+                  </div>
               {% endif %}
-              <label class="poll-answer" for="{{url_name}}-answer-{{key}}">{{value.label|safe}}</label>
+              <label class="poll-answer-text" for="{{url_name}}-answer-{{key}}">{{value.label|safe}}</label>
           </li>
       {% endfor %}
       </ul>

tests/integration/markdown_scenarios.py

@@ -55,7 +55,7 @@ ddt_scenarios = [
         False
     ],
     [
-        "Poll Markdown", "label.poll-answer", "<p>I <em>feel</em> like this test will <strong>pass</strong><code>test</code>.</p>",
+        "Poll Markdown", "label.poll-answer-text", "<p>I <em>feel</em> like this test will <strong>pass</strong><code>test</code>.</p>",
         True, False
     ],
     [

tests/integration/studio_scenarios.py

@@ -28,7 +28,7 @@ ddt_scenarios = [
         'Poll Studio',
         'answer',
         4,
-        'label.poll-answer'
+        'label.poll-answer-text'
     ],
     [
         'Survey Studio',

tests/integration/test_functions.py

@@ -24,10 +24,10 @@
 Tests a realistic, configured Poll to make sure that everything works as it
 should.
 """
-from selenium.common.exceptions import NoSuchElementException
-import time
 from .base_test import PollBaseTest
 
+ANSWER_SELECTOR = 'label.poll-answer-text'
+
 
 class TestPollFunctions(PollBaseTest):
     def test_first_load(self):
@@ -38,7 +38,7 @@ class TestPollFunctions(PollBaseTest):
         not showing, and that the submit button is disabled.
         """
         self.go_to_page('Poll Functions')
-        answer_elements = self.browser.find_elements_by_css_selector('label.poll-answer')
+        answer_elements = self.browser.find_elements_by_css_selector(ANSWER_SELECTOR)
         answers = [element.text for element in answer_elements]
         self.assertEqual(['A very long time', 'Not very long', 'I shall not say', 'Longer than you'], answers)
 
@@ -52,7 +52,7 @@ class TestPollFunctions(PollBaseTest):
         Makes sure the submit button is enabled when selecting an answer.
         """
         self.go_to_page('Poll Functions')
-        answer_elements = self.browser.find_elements_by_css_selector('label.poll-answer')
+        answer_elements = self.browser.find_elements_by_css_selector(ANSWER_SELECTOR)
         answer_elements[0].click()
 
         # When an answer is selected, make sure submit is enabled.
@@ -65,7 +65,7 @@ class TestPollFunctions(PollBaseTest):
         Also check that feedback is displayed afterward.
         """
         self.go_to_page('Poll Functions')
-        answer_elements = self.browser.find_elements_by_css_selector('label.poll-answer')
+        answer_elements = self.browser.find_elements_by_css_selector(ANSWER_SELECTOR)
 
         # 'Not very long'
         answer_elements[1].click()
@@ -88,7 +88,7 @@ class TestPollFunctions(PollBaseTest):
         """
         self.go_to_page('Poll Functions')
 
-        answer_elements = self.browser.find_elements_by_css_selector('label.poll-answer')
+        answer_elements = self.browser.find_elements_by_css_selector(ANSWER_SELECTOR)
 
         # Not very long
         answer_elements[1].click()

tests/integration/test_layout.py

@@ -25,44 +25,49 @@
 Test to make sure the layout for results is sane when taking images into
 account.
 """
+from ddt import ddt, unpack, data
 from tests.integration.base_test import PollBaseTest
 
 
+@ddt
 class TestLayout(PollBaseTest):
     """
     Do tests to verify that the layout of elements makes sense depeneding on
     the number of images.
     """
 
-    def test_all_images(self):
+    @unpack
+    @data(('Poll All Pictures', 4), ('Poll One Picture', 4), ('Poll No Pictures', 0))
+    def test_images(self, scenario, count):
         """
-        Verify img tags are created for answers when they're all set.
+        Verify the poll-image divs only appear when they need to.
         """
-        self.go_to_page('Poll All Pictures')
+        self.go_to_page(scenario)
         pics = self.browser.find_elements_by_css_selector('.poll-image')
-        self.assertEqual(len(pics), 4)
+        self.assertEqual(len(pics), count)
 
-        # Pics should be within labels.
-        pics[0].find_element_by_css_selector('img').click()
+        if not count:
+            self.browser.find_element_by_css_selector('.poll-answer-text').click()
+        else:
+            # Pics should be within labels.
+            self.browser.find_element_by_css_selector('.poll-image img').click()
         self.get_submit().click()
 
-        self.wait_until_exists('.poll-image')
+        self.wait_until_exists('.percentage-gauge')
 
-        self.assertEqual(len(self.browser.find_elements_by_css_selector('.poll-image')), 4)
+        self.assertEqual(len(self.browser.find_elements_by_css_selector('.poll-image')), count)
 
-    def test_one_image(self):
-        """
-        Verify layout is sane when only one answer has an image.
-        """
-        self.go_to_page('Poll One Picture')
-        pics = self.browser.find_elements_by_css_selector('.poll-image')
-        # On the polling page, there should only be one pics div.
-        self.assertEqual(len(pics), 1)
-
-        pics[0].find_element_by_css_selector('img').click()
+    @data('Poll Size Check', 'Poll Size Check Image')
+    def test_poll_size(self, scenario):
+        self.go_to_page(scenario)
+        width = self.browser.get_window_size()['width']
+        poll = self.browser.find_element_by_css_selector('.poll-block')
+        self.assertLess(poll.get_attribute('width'), width)
 
+        self.browser.find_element_by_css_selector('.poll-answer-text').click()
         self.get_submit().click()
 
-        self.wait_until_exists('.poll-image.result-image')
-        # ...But on the results page, we need four, for table layout.
-        self.assertEqual(len(self.browser.find_elements_by_css_selector('.poll-image')), 4)
+        self.wait_until_exists('.percentage-gauge')
+
+        poll = self.browser.find_element_by_css_selector('.poll-block')
+        self.assertLess(poll.get_attribute('width'), width)
\ No newline at end of file

tests/integration/xml/poll_no_pictures.xml

+<poll tally="{'red': 20, 'fennec': 29, 'kit': 15, 'arctic' : 35}"
+      question="## What is your favorite kind of fox?"
+      answers='[["red", {"label": "Red Fox", "img": null}], ["fennec", {"label": "Fennec Fox", "img": null}], ["kit", {"label": "Kit Fox", "img": null}], ["arctic", {"label": "Arctic fox", "img": null}]]' />

tests/integration/xml/poll_size_check.xml

+<poll tally="{'red': 20, 'fennec': 29, 'kit': 15, 'arctic' : 35}"
+      question="## What is your favorite kind of fox?"
+      answers='[["red", {"label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin tellus in urna porttitor vulputate. Fusce efficitur sit amet sem quis sagittis. Quisque eget volutpat ipsum. Cras augue tellus, venenatis sed lectus quis, pellentesque fringilla sem. Pellentesque urna tortor, sodales at sem ut, finibus sodales tellus. Nulla nec vestibulum nunc. Sed vel tempor est. Quisque nunc ligula, convallis at arcu et, elementum interdum nulla. Nulla tempor commodo varius. Nunc accumsan ex vel erat condimentum sagittis. Vivamus dictum leo ligula. Curabitur feugiat ultrices accumsan. Vivamus quis urna facilisis magna tincidunt tempor.", "img": null}], ["fennec", {"label": "Fennec Fox", "img": null}], ["kit", {"label": "Kit Fox", "img": null}], ["arctic", {"label": "Arctic fox", "img": null}]]' />

tests/integration/xml/poll_size_check_image.xml

+<poll tally="{'red': 20, 'fennec': 29, 'kit': 15, 'arctic' : 35}"
+      question="## What is your favorite kind of fox?"
+      answers='[["red", {"label": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin tellus in urna porttitor vulputate. Fusce efficitur sit amet sem quis sagittis. Quisque eget volutpat ipsum. Cras augue tellus, venenatis sed lectus quis, pellentesque fringilla sem. Pellentesque urna tortor, sodales at sem ut, finibus sodales tellus. Nulla nec vestibulum nunc. Sed vel tempor est. Quisque nunc ligula, convallis at arcu et, elementum interdum nulla. Nulla tempor commodo varius. Nunc accumsan ex vel erat condimentum sagittis. Vivamus dictum leo ligula. Curabitur feugiat ultrices accumsan. Vivamus quis urna facilisis magna tincidunt tempor.", "img": "../img/red_fox.png"}], ["fennec", {"label": "Fennec Fox", "img": null}], ["kit", {"label": "Kit Fox", "img": null}], ["arctic", {"label": "Arctic fox", "img": null}]]' />