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>

test/fixtures/questions.yml

@@ -119,7 +119,7 @@ politics_schepenen:
   text: Verplaats de bevoegdheden zodat ze bij de juiste schepen staan.
   data: '<%=
     JSON.dump({
-      left: ["Mathias De Clercq", "Hafsa El-Bazioui", "Astrid De Bruycker", "Sofie Bracke", "Evita Willaert", "Joris Vandenbroucke", "Bram Van Braeckevelt", "Burak Nalli", "Filip Watteeuw", "Cristophe Peeters"].shuffle,
+      left: ["mathias", "hafsa", "astrid", "sofie", "evita", "joris", "bram", "burak", "filip", "cristophe"].shuffle,
       right: ["Burgemeester", "Participatie, Buurtwerk, Mondiale Solidariteit, Facilitair Management en Digitalisering", "Sociale Vooruitgang, Gezondheid, Ouderenbeleid en Cultuur", "Economie, Haven, Handel, Toerisme en Openbare netheid", "Onderwijs, Opvoeding, Jeugd, Gezin en Outreachend Werk", "Mobiliteit, Ruimte, Stadsontwikkeling en Plezier", "Natuur en Groen, Werk en Sociale Economie, Gelijke kansen en Sport", "Personeelsbeleid, Burgerzaken en Dienstverlening", "Wonen, Milieu, Klimaat en Energie", "Financiën, Stedenbouw, Erfgoed en Administratieve vereenvoudiging"].shuffle
     })
   %>'