add district program type

majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.html

@@ -4,9 +4,37 @@
       {{ name }}
     </template>
     <ui-popout-content>
+      <div>
+        {% if guarantor_name %}
+          <div
+            class="
+              !text-grey-250 [&_*]:!text-grey-250
+
+              mb-3 flex gap-2 items-center justify-end
+            "
+          >
+            <div class="mr-2">
+              Garant programového bodu:
+            </div>
+
+            <img
+              alt="Obrázek osoby {{ guarantor_name }}"
+              class="w-10 h-10 opacity-75 m-0 p-0 rounded-full"
+              src="{{ guarantor_image_url }}"
+            >
+
+            <strong>
+              <a href="{{ guarantor_url }}">
+                {{ guarantor_name }}
+              </a>
+            </strong>
+          </div>
+        {% endif %}
+
         <div class="prose max-w-screen-lg">
           {% include "patterns/atoms/text/paragraph.html" with text=text %}
         </div>
+      </div>
     </ui-popout-content>
   </ui-popout>
 </div>

majak_uistyleguide/templates/patterns/molecules/popouts/popout_point.yaml

@@ -5,3 +5,6 @@ context:
     asperiores voluptatibus enim qui velit quaerat. Perspiciatis 
     eum autem quidem et beatae quia dolore. Esse fuga architecto 
     delectus tenetur nesciunt aut aut dolore.'
+  guarantor_name: 'Petr Vepřový'
+  guarantor_url: 'https://example.com'
+  guarantor_image_url: '../../../../../static/images/person-table.png'

majak_uistyleguide/templates/patterns/organisms/header/district/center_header.html

@@ -42,7 +42,7 @@
             </strong>
           </div>
 
-          <div class="whitespace-pre">Mozilla Foundation
+          <div class="whitespace-pre-line">Mozilla Foundation
 331 E Evelyn Ave
 Mountain View, CA 94041
 USA</div>

majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html

 {% extends 'patterns/organisms/header/simple_header.html' %}
 
+{% block header_margin_class %}{% endblock %}
+
 {% block after_description %}
   <div
     class="

majak_uistyleguide/templates/patterns/templates/main/program/program.html

@@ -8,12 +8,11 @@
   >
     {% include 'patterns/organisms/header/simple_header_with_ui_switch.html' with title='Program' ui_switch_iterable=programs %}
 
-    <main role="main" class="mb-4 xl:mb-20">
-      <div class="container--wide flex flex-col">
+    <main role="main">
       {% for program in programs %}
         <template v-if="isCurrentView('view{{ forloop.counter }}')">
           {% if program.type == "concise" %}
-              <div>
+            <div class="container--wide flex flex-col mt-20 mb-4 xl:mb-20">
               {% if program.perex %}
                 <div class="mb-12">
                   <div class="prose">
@@ -30,17 +29,53 @@
               {% include 'patterns/molecules/blocks/icon_title_text_block.html' with icon=None %}
             </div>
           {% elif program.type == 'popout' %}
-              <div class="mb-12">
+            <div class="container--wide flex flex-col mt-20 mb-12 xl:mb-20">
               {% include 'patterns/organisms/popouts/popout_list.html' %}
             </div>
           {% elif program.type == 'crossroad' %}
-              <div class="mb-12">
+            <div class="container--wide flex flex-col mt-20 mb-12 xl:mb-20">
               {% include 'patterns/organisms/cards/card_list.html' with description_classes="!bg-grey-180" classes='drop-shadow' %}
             </div>
+          {% elif program.type == 'with_candidates' %}
+            <ui-secondary-view-provider
+              :initial="{candidates: true, program: false}"
+              :sync-location="true"
+              v-slot="{ isCurrentSecondaryView, toggleSecondaryView }"
+            >
+              <div class="bg-white py-12 container--wide text-center">
+                <a
+                  @click="toggleSecondaryView('candidates')"
+                  class="switch__item--program"
+                  :class="{'switch__item--active': isCurrentSecondaryView('candidates')}"
+                >Kandidáti</a>
+
+                <a
+                  @click="toggleSecondaryView('program')"
+                  class="switch__item--program"
+                  :class="{'switch__item--active': isCurrentSecondaryView('program')}"
+                >Program</a>
+              </div>
+
+              <template v-if="isCurrentSecondaryView('candidates')">
+                <div>
+                  {% include "patterns/organisms/candidates/elections/candidate_primary_list.html" %}
+                  {% include "patterns/organisms/candidates/district/candidate_secondary_list.html" %}
+                </div>
+              </template>
+
+              <template v-if="isCurrentSecondaryView('program')">
+                <div class="bg-grey-50 pb-4 xl:pb-20">
+                  <div class="container--wide flex flex-col mb-12 gap-8">
+                    {% include 'patterns/atoms/text/richtext.html' %}
+
+                    {% include 'patterns/organisms/popouts/popout_list.html' %}
+                  </div>
+                </div>
+              </template>
+            </ui-secondary-view-provider>
           {% endif %}
         </template>
       {% endfor %}
-      </div>
     </main>
   </ui-view-provider>
 </div>

majak_uistyleguide/templates/patterns/templates/main/program/program.yaml

@@ -21,3 +21,8 @@ context:
       type: 'popout'
       perex: 'Lorem ipsum dolor sit amet 5, který vysvětluje důležitost dlouhodobého
       programu.'
+    -
+      name: 'krajský'
+      type: 'with_candidates'
+      perex: 'Lorem ipsum dolor sit amet 6, který vysvětluje důležitost dlouhodobého
+      programu.'

src/css/molecules/popout.pcss

@@ -11,7 +11,7 @@
 }
 
 .popout__content-wrapper {
-  @apply px-5 py-4 flex flex-col gap-3;
+  @apply px-5 py-4 flex flex-col gap-3 bg-grey-150;
 }
 
 .popout__toggle-arrow {

src/css/molecules/switch.pcss

@@ -2,7 +2,7 @@
   @apply py-5 mx-auto;
 }
 
-.switch__item, .switch__item--elections {
+.switch__item, .switch__item--elections, .switch__item--program {
   @apply whitespace-nowrap cursor-pointer px-5 py-2 mb-2 font-normal text-center duration-200;
 
   &:not(:last-child) {
@@ -24,6 +24,20 @@
 }
 
 
+.switch__item--program {
+  @apply bg-grey-150 text-black;
+
+  &:hover {
+    @apply no-underline bg-grey-200;
+  }
+
+  &.switch__item--active,
+  &.switch__item--active:hover {
+    @apply bg-pirati-yellow;
+  }
+}
+
+
 .switch__item--elections {
   @apply bg-black text-white;
 

src/css/organisms/newsletter.pcss

 .newsletter-section {
   @apply bg-cover bg-no-repeat;
 
-  &:not(.newsletter-section--small) {
-    background-position: -400px;
-  }
-
   @screen md {
     background-position: left top;
   }

src/js/components/SecondaryViewProvider.vue

+<template>
+  <div>
+    <slot
+      v-bind:secondaryViews="secondaryViews"
+      v-bind:isCurrentSecondaryView="isCurrentSecondaryView"
+      v-bind:toggleSecondaryView="toggleSecondaryView"
+      v-bind:showSecondaryView="showSecondaryView"
+      v-bind:setSecondaryView="setSecondaryView"
+    ></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initial: {
+      default: () => {}
+    },
+    syncLocation: {
+      type: Boolean,
+      default: false,
+    },
+    locationParam: {
+      type: String,
+      default: "secondary-view",
+    }
+  },
+  data() {
+    return {
+      secondaryViews: this.$props.initial,
+      queryParams: null,
+      keyListener: e => {
+        // Esc
+        if (e.keyCode === 27) {
+          this.hideAllViews();
+        }
+      }
+    };
+  },
+  watch: {
+    routeView() {
+      const queryParams = new URLSearchParams(window.location.search);
+    }
+  },
+  methods: {
+    setSecondaryView(viewId, show, hideOthers = false) {
+      if (hideOthers) {
+        Object.keys(this.$data.secondaryViews).forEach(key => {
+          if (key !== viewId) {
+            this.setSecondaryView(key, false);
+          }
+        });
+      }
+
+      this.$data.secondaryViews[viewId] = show;
+
+      if (show && this.$props.syncLocation) {
+        const queryParams = new URLSearchParams(window.location.search);
+
+        queryParams.set(this.$props.locationParam, viewId);
+        history.pushState(null, null, "?" + queryParams.toString());
+      }
+    },
+    setSecondaryViews(updates) {
+      this.$data.secondaryViews = Object.assign({}, this.data.secondaryViews, updates);
+    },
+    toggleSecondaryView(viewId) {
+      !this.isCurrentSecondaryView(viewId) && this.setSecondaryView(viewId, !this.isCurrentSecondaryView(viewId), true);
+    },
+    showSecondaryView(viewId) {
+      this.setSecondaryView(viewId, true, true);
+    },
+    isCurrentSecondaryView(viewId) {
+      return this.$data.secondaryViews[viewId];
+    },
+    hideAllViews() {
+      Object.keys(this.$data.secondaryViews).forEach(key => {
+        this.setSecondaryView(key, false);
+      });
+    }
+  },
+  mounted() {
+    window.addEventListener('keydown', this.$data.keyListener);
+
+    if (this.$props.syncLocation) {
+      const queryParams = new URLSearchParams(window.location.search);
+      const locationView = queryParams.get(this.$props.locationParam);
+
+      if (locationView && Object.keys(this.$data.secondaryViews).indexOf(locationView) !== -1) {
+        this.showSecondaryView(locationView);
+      }
+    }
+  },
+  destroyed() {
+    window.removeEventListener('keydown', this.$data.keyListener);
+  }
+}
+</script>

src/js/components/countdown/Countdown.vue

@@ -29,6 +29,34 @@ export default {
   },
   methods: {
     updateCountdown() {
+      const formatCountdown = (countdown) => {
+        let parts = [];
+
+        if (countdown.days > 0) {
+          parts.push(`${countdown.days} dní`);
+        }
+        if (countdown.hours > 0) {
+          parts.push(`${countdown.hours} hodin`);
+        }
+        if (countdown.minutes > 0) {
+          parts.push(`${countdown.minutes} minut`);
+        }
+
+        // Always include seconds
+        parts.push(`${countdown.seconds} sekund`);
+
+        // Determine pluralization for "sekund"
+        let secondsSuffix = '';
+
+        if (countdown.seconds === 1) {
+          secondsSuffix = 'a';
+        } else if (countdown.seconds > 1 && countdown.seconds < 5) {
+          secondsSuffix = 'y';
+        }
+
+        return parts.join(', ') + (parts.length > 0 ? secondsSuffix : '');
+      }
+
       const targetDate = new Date(this.to);
       const currentDate = new Date();
 
@@ -51,15 +79,7 @@ export default {
 
       this.countdown.seconds = Math.floor(timeDifference / 1000);
 
-      // Determine pluralization for "sekund"
-      let secondsSuffix = '';
-      if (this.countdown.seconds === 1) {
-          secondsSuffix = 'a';
-      } else if (this.countdown.seconds > 1 && this.countdown.seconds < 5) {
-          secondsSuffix = 'y';
-      }
-
-      this.countdownText = `${this.countdown.days} dní, ${this.countdown.hours} hodin, ${this.countdown.minutes} minut a ${this.countdown.seconds} sekund${secondsSuffix}`;
+      this.countdownText = formatCountdown(this.countdown);
     }
   }
 };

src/js/main.js

@@ -14,6 +14,7 @@ import GoogleProvider from "./components/calendar/GoogleProvider";
 import FullCalendar from "./components/full_calendar/Calendar";
 import RegionMap from "./components/RegionMap";
 import ViewProvider from "./components/ViewProvider";
+import SecondaryViewProvider from "./components/SecondaryViewProvider";
 import Popout from "./components/popout/Popout";
 import PopoutContent from "./components/popout/PopoutContent";
 import PopoutItem from "./components/popout/PopoutItem";
@@ -35,6 +36,7 @@ Vue.component("ui-calendar-google-provider", GoogleProvider);
 Vue.component("ui-full-calendar", FullCalendar);
 Vue.component("ui-region-map", RegionMap);
 Vue.component("ui-view-provider", ViewProvider);
+Vue.component("ui-secondary-view-provider", SecondaryViewProvider);
 Vue.component("ui-popout", Popout);
 Vue.component("ui-popout-content", PopoutContent);
 Vue.component("ui-popout-item", PopoutItem);