diff --git a/app/assets/images/politicians/astrid.jpg b/app/assets/images/politicians/astrid.jpg new file mode 100644 index 0000000..707c699 Binary files /dev/null and b/app/assets/images/politicians/astrid.jpg differ diff --git a/app/assets/images/politicians/bram.jpg b/app/assets/images/politicians/bram.jpg new file mode 100644 index 0000000..db6b485 Binary files /dev/null and b/app/assets/images/politicians/bram.jpg differ diff --git a/app/assets/images/politicians/burak.jpg b/app/assets/images/politicians/burak.jpg new file mode 100644 index 0000000..9d745ae Binary files /dev/null and b/app/assets/images/politicians/burak.jpg differ diff --git a/app/assets/images/politicians/cristophe.jpg b/app/assets/images/politicians/cristophe.jpg new file mode 100644 index 0000000..86eccf3 Binary files /dev/null and b/app/assets/images/politicians/cristophe.jpg differ diff --git a/app/assets/images/politicians/evita.jpg b/app/assets/images/politicians/evita.jpg new file mode 100644 index 0000000..4f5cece Binary files /dev/null and b/app/assets/images/politicians/evita.jpg differ diff --git a/app/assets/images/politicians/filip.jpg b/app/assets/images/politicians/filip.jpg new file mode 100644 index 0000000..f963657 Binary files /dev/null and b/app/assets/images/politicians/filip.jpg differ diff --git a/app/assets/images/politicians/hafsa.jpg b/app/assets/images/politicians/hafsa.jpg new file mode 100644 index 0000000..dbbe068 Binary files /dev/null and b/app/assets/images/politicians/hafsa.jpg differ diff --git a/app/assets/images/politicians/joris.jpg b/app/assets/images/politicians/joris.jpg new file mode 100644 index 0000000..89b0294 Binary files /dev/null and b/app/assets/images/politicians/joris.jpg differ diff --git a/app/assets/images/politicians/mathias.jpg b/app/assets/images/politicians/mathias.jpg new file mode 100644 index 0000000..a4a2e70 Binary files /dev/null and b/app/assets/images/politicians/mathias.jpg differ diff --git a/app/assets/images/politicians/sofie.jpg b/app/assets/images/politicians/sofie.jpg new file mode 100644 index 0000000..eb954e3 Binary files /dev/null and b/app/assets/images/politicians/sofie.jpg differ diff --git a/app/assets/stylesheets/application.postcss.css b/app/assets/stylesheets/application.postcss.css index 764a6aa..bc0a999 100644 --- a/app/assets/stylesheets/application.postcss.css +++ b/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 { diff --git a/app/javascript/politicians_answer.js b/app/javascript/politicians_answer.js index b9f0a6f..3bc80c0 100644 --- a/app/javascript/politicians_answer.js +++ b/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 }) diff --git a/app/views/questions/_politicians_form.html.erb b/app/views/questions/_politicians_form.html.erb index 5f82e02..b51af78 100644 --- a/app/views/questions/_politicians_form.html.erb +++ b/app/views/questions/_politicians_form.html.erb @@ -1,16 +1,15 @@ -
-
- <% question.data["left"].each do |l| %> -

<%= l %>

- <% end %> -
-
- <% 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| %> -

<%= a %>

- <% end %> -
+
+ <% 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" } %> +
+ + <%= answer[0] %> + +
+ <% end %>
diff --git a/test/fixtures/questions.yml b/test/fixtures/questions.yml index de7fde0..a13f6db 100644 --- a/test/fixtures/questions.yml +++ b/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 }) %>'