Replace politicians' names with pictures

app/assets/stylesheets/application.postcss.css

@@ -113,8 +113,22 @@ input[type=submit] {
 }
 
 .politicians-listing {
+    display: grid;
+    grid-template-columns: 8vh 1fr;
+    gap: 1rem;
+}
+
+.politician-image {
+    max-width: 100%;
+    align-self: center;
+}
+
+.politician-answer {
+    align-self: stretch;
     display: flex;
-    flex-direction: row;
+    align-items: center;
+    border: 1px solid black;
+    padding: 0.5rem;
 }
 
 .acrostic-row {

app/javascript/politicians_answer.js

@@ -8,6 +8,7 @@ export default function initPoliticianQuestions() {
 
         Sortable.create(list, {
             swap: true,
+            filter: ".politician-image",
             onUpdate: (event) => {
                 const newOrder = Array.from(event.to.children).map((el) => Number.parseInt(el.dataset.id))
                 submitValue(submitUrl, { order: newOrder })

app/views/questions/_politicians_form.html.erb

@@ -1,16 +1,15 @@
-<div class="politicians-listing">
-    <div>
-        <% question.data["left"].each do |l| %>
-            <p><%= l %></p>
-        <% end %>
-    </div>
-    <div data-behaviour="politicians_answer"
-         data-submit-url="<%= answer_question_url(question.id) %>"
-    >
-        <% answers = question.data["right"].each.with_index.to_a %>
-        <% answers = reorder_with_indices(answers, question.answer.data) if question.answer.present? %>
-        <% answers.each do |a, i| %>
-            <p data-id="<%= i %>"><%= a %></p>
-        <% end %>
-    </div>
+<div class="politicians-listing"
+     data-behaviour="politicians_answer"
+     data-submit-url="<%= answer_question_url(question.id) %>"
+>
+    <% answers = question.data["right"].each.with_index.to_a %>
+    <% answers = reorder_with_indices(answers, question.answer.data) if question.answer.present? %>
+    <% answers.each.with_index do |answer, i| %>
+        <%= image_tag "politicians/#{question.data['left'][i]}.jpg", html_options = { class: "politician-image" } %>
+        <div class="politician-answer" data-id="<%= answer[1] %>">
+            <span class="politician-answer-text">
+                <%= answer[0] %>
+            </span>
+        </div>
+    <% end %>
 </div>