Merge v1.3.2: Responsive UI for mobile

poll/public/css/poll.css

@@ -160,6 +160,15 @@ li.poll-result .poll-image {
     border: 0;
 }
 
+.survey-table td{
+    text-align: center;
+}
+
+.survey-table td label{
+    display: block;
+    padding: 5px 0;
+}
+
 .survey-table td, .survey-table th {
     border: 1px solid #CCC;
     border-top: 0;
@@ -280,3 +289,59 @@ th.survey-answer {
     height: 100%;
     padding-right: .5em;
 }
+
+.visible-mobile-only{
+    display: none;
+    visibility: hidden;
+}
+
+@media only screen and (max-width: 767px){
+    .visible-mobile-only{
+        display: inline-block;
+        visibility: visible;
+    }
+
+    .survey-table .survey-question{
+        display: block;
+        border: 0;
+        padding-bottom: 10px;
+    }
+
+    .survey-table thead{
+        display: none;
+        visibility: hidden;
+    }
+
+    .survey-table .survey-option .visible-mobile-only{
+        width: calc(100% - 20px);
+    }
+    .survey-table .survey-option{
+        display: block;
+        border: 1px solid #ccc;
+        text-align: left;
+        padding: 0 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+    }
+
+    .survey-table .survey-option:last-child{
+        border-right: 1px solid #ccc;
+    }
+
+    .survey-table tr:last-child td{
+        border-bottom: 1px solid #ccc;
+    }
+
+    .survey-table tr:last-child td:first-child{
+        border-bottom: 0;
+    }
+
+    .survey-table .survey-option label{
+        text-align: left;
+        padding: 8px 0;
+    }
+
+    .survey-table tbody tr:last-child td{
+        border-bottom: 1px solid #ccc;
+    }
+}

poll/public/html/survey.html

@@ -25,17 +25,25 @@
                     </th>
                 {% for answer, label in answers %}
                     <td class="survey-option" headers="poll-{{block_id}}-{{key}} poll-{{block_id}}-{{answer}}">
-                      <label>
-                        <input type="radio"
-                               name="{{key}}"
-                               value="{{answer}}"{% if question.choice == answer %} checked{% endif %}
-                               {% if question.img_alt %}
-                                  aria-label="{{question.img_alt}} {{label}}"
-                               {% else %}
-                                  aria-label="{{question.label|striptags}} {{label}}"
-                               {% endif %}
-                               />
-                      </label>
+                        {% with answer_count=forloop.counter %}
+                            {% for answer, label in answers %}
+                                {% if forloop.counter == answer_count %}
+                                    <label for="{{key}}-{{answer_count}}">
+                                        <input type="radio"
+                                               name="{{key}}"
+                                               id="{{key}}-{{forloop.counter}}"
+                                               value="{{answer}}"{% if question.choice == answer %} checked{% endif %}
+                                               {% if question.img_alt %}
+                                               aria-label="{{question.img_alt}} {{label}}"
+                                               {% else %}
+                                               aria-label="{{question.label|striptags}} {{label}}"
+                                               {% endif %}
+                                        />
+                                        <span class="visible-mobile-only">{{label}}</span>
+                                    </label>
+                                {% endif %}
+                            {% endfor %}
+                        {% endwith %}
                     </td>
                 {% endfor %}
                 </tr>

setup.py

@@ -44,7 +44,7 @@ def package_data(pkg, roots):
 
 setup(
     name='xblock-poll',
-    version='1.3.1',
+    version='1.3.2',
     description='An XBlock for polling users.',
     packages=[
         'poll',