other candidates

majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_secondary_box.html

-<li class="candidate-secondary-box">
-  <a
-    href="#"
-    class="
-      container--wide py-2 flex gap-6 items-center underline-offset-2
-    "
-  >
-    <div class="font-bold text-xl">
-      {{ number }}
-    </div>
-
-    <div
-      class="
-        flex font-bold justify-center items-center rounded-full
-      "
-    >
-      <img
-        class="rounded-full w-12 h-12 object-cover"
-        src="{{ image_source }}"
-      >
-    </div>
-
-    <div class="flex flex-col lg:flex-row">
-      <h4 class="text-xl font-bold">{{ name }}</h4>
-
-      {% if position %}
-        <p><span class="hidden lg:inline">,</span>
-          {{ position }}
-        </p>
-      {% endif %}
-    </div>
-  </a>
-</li>

majak_uistyleguide/templates/patterns/molecules/candidates/elections/candidate_secondary_box.yaml

-context:
-  number: '1'
-  name: 'Mikuláš Peksa'
-  image_source: 'https://www.extremnews.com/images/max_image_view-166664f1d580456c9866fa3c20ed545b.jpg'
-  position: 'Europoslanec'
-  description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'

majak_uistyleguide/templates/patterns/molecules/menus/carousel.html

 <div class="__js-root">
   <div class="header-carousel">
-    <div class="h-[700px] xl:h-screen relative group cursor-pointer">
+    <div class="block h-[700px] xl:h-screen relative group cursor-pointer">
       <img
         class="
           header-carousel--image

majak_uistyleguide/templates/patterns/organisms/candidates/elections/candidate_secondary_list.html

-<ul class="candidate-secondary-list pt-14 pb-16">
-  <div class="container--wide">
-    <h2 class="head-7xl mb-3">Další kandidáti</h2>
+<div class="__js-root">
+  <ui-candidate-secondary-list
+    heading="{{ heading }}"
+    :candidates="[
+      {% for candidate in candidates %}
+        {
+          number: {{ candidate.number }},
+          name: '{{ candidate.name }}',
+          imageSource: '{{ candidate.image_source }}',
+          position: '{{ candidate.position }}',
+          url: '#'
+        }{% if not forloop.last %},{% endif %}
+      {% endfor %}
+    ]"
+  >
 </div>
-
-  {% include "patterns/molecules/candidates/elections/candidate_secondary_box.html" %}
-  {% include "patterns/molecules/candidates/elections/candidate_secondary_box.html" %}
-  {% include "patterns/molecules/candidates/elections/candidate_secondary_box.html" %}
-  {% include "patterns/molecules/candidates/elections/candidate_secondary_box.html" %}
-  {% include "patterns/molecules/candidates/elections/candidate_secondary_box.html" %}
-  {% include "patterns/molecules/candidates/elections/candidate_secondary_box.html" %}
-</ul>

majak_uistyleguide/templates/patterns/organisms/candidates/elections/candidate_secondary_list.yaml

+context:
+  heading: 'Další kandidáti'
+  candidates:
+    -
+      number: '1'
+      name: 'Mikuláš Peksa'
+      image_source: '../../../../../static/images/mikulas-inverse-arrow.png'
+      position: 'Europoslanec'
+      description: 'Mikuláš Peksa (18. 6. 1986) vystudoval fyziku na Matematicko-fyzikální fakultě Univerzity Karlovy. V Německu pracoval jako správce Linuxových serverů a programátor v C++. Po návratu do Čech byl v roce 2017 zvolen poslancem PSP ČR, následně v roce 2019 poslancem Evropského parlamentu. Věnuje se zejména tématům spojeným s fungováním společnosti v digitálním věku.'

src/js/components/secondary_candidates/CandidateSecondaryBox.vue

+<template>
+  <li class="candidate-secondary-box">
+    <a
+      :href="url"
+      class="
+        container--wide py-2 flex gap-6 items-center underline-offset-2
+      "
+    >
+      <div class="font-bold text-xl">
+        {{ this.number }}
+      </div>
+
+      <div
+        class="
+          flex font-bold justify-center items-center rounded-full
+        "
+      >
+        <img
+          class="w-12 object-cover"
+          :src="this.imageSource"
+        >
+      </div>
+
+      <div class="flex flex-col lg:flex-row">
+        <h4 class="text-xl font-bold">{{ this.name }}</h4>
+
+        <p v-if="this.position"><span class="hidden lg:inline">,</span>
+          {{ this.position }}
+        </p>
+      </div>
+    </a>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "CandidateSecondaryBox",
+  props: ["url", "number", "imageSource", "name", "position"]
+}
+</script>

src/js/components/secondary_candidates/CandidateSecondaryList.vue

+<script setup>
+  import CandidateSecondaryBox from "./CandidateSecondaryBox"
+</script>
+
+<template>
+  <div class="bg-grey-180">
+    <ul class="candidate-secondary-list pt-14 pb-16 hidden" ref="content">
+      <div class="container--wide">
+        <h2 class="head-7xl mb-3">{{ heading }}</h2>
+      </div>
+
+      <CandidateSecondaryBox
+        v-for="candidate in candidates"
+        :key="candidate.position"
+        :url="candidate.url"
+        :number="candidate.number"
+        :imageSource="candidate.imageSource"
+        :name="candidate.name"
+        :position="candidate.position"
+      />
+    </ul>
+
+    <div
+      class="pt-14 pb-16 flex justify-center"
+      ref="button"
+    >
+      <button
+        @click="openList()"
+
+        class="
+          flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal bg-black text-white
+
+          hover:no-underline
+
+          pl-8 pr-3 py-3
+
+          xl:text-lg xl:pl-8 xl:pr-3 xl:py-4
+        "
+      >
+        <span class="group-hover:-translate-x-2 duration-200">Další kandidáti</span>
+        <span class="opacity-0 group-hover:opacity-100 duration-200 mb-[0.03rem]">
+          <svg width="20" height="21" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g id="Icon / Placeholder">
+              <path
+                d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
+                fill="#FEC900"
+                class="arrow-icon"
+              />
+            </g>
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CandidateSecondaryList",
+  props: ["heading", "candidates"],
+  methods: {
+    openList () {
+      this.$refs.content.classList.remove('hidden')
+      this.$refs.button.classList.add('hidden')
+    }
+  }
+}
+</script>

src/js/main.js

@@ -18,6 +18,7 @@ import FaqSectionHeader from "./components/FaqSectionHeader";
 import HorizontalScrollable from "./components/HorizontalScrollable";
 import CardProgram from "./components/card_program/CardProgram"
 import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
+import CandidateSecondaryList from "./components/secondary_candidates/CandidateSecondaryList";
 
 import SlideUpDown from 'vue-slide-up-down';
 
@@ -38,6 +39,7 @@ Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
 Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);
 Vue.component("ui-card-program", CardProgram);
 Vue.component("ui-slide-up-down", SlideUpDown);
+Vue.component("ui-candidate-secondary-list", CandidateSecondaryList);
 
 
 import UiApp from "./components/UiApp.vue";