Survey UI responsive structure for mobile

poll/public/css/poll.css

@@ -280,3 +280,53 @@ 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{
+        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;
+        width: calc(100% - 18px);
+        padding: 8px 0;
+    }
+}

poll/public/html/survey.html

@@ -25,9 +25,9 @@
                     </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}}"
+                               id="{{key}}-{{forloop.counter}}"
                                value="{{answer}}"{% if question.choice == answer %} checked{% endif %}
                                {% if question.img_alt %}
                                   aria-label="{{question.img_alt}} {{label}}"
@@ -35,7 +35,15 @@
                                   aria-label="{{question.label|striptags}} {{label}}"
                                {% endif %}
                                />
-                      </label>
+                        {% with answer_count=forloop.counter %}
+                            {% for answer, label in answers %}
+                                {% if forloop.counter == answer_count %}
+                                    <label class="visible-mobile-only" for="{{key}}-{{answer_count}}">
+                                        {{label}}
+                                    </label>
+                                {% endif %}
+                            {% endfor %}
+                        {% endwith %}
                     </td>
                 {% endfor %}
                 </tr>