Skip to content
Snippets Groups Projects
Verified Commit e123a904 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

add district program type

parent 71236638
No related branches found
No related tags found
1 merge request!29Feat/redesign
Pipeline #18450 passed
Showing
with 252 additions and 49 deletions
......@@ -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>
......@@ -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'
......@@ -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>
......
{% extends 'patterns/organisms/header/simple_header.html' %}
{% block header_margin_class %}{% endblock %}
{% block after_description %}
<div
class="
......
......@@ -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>
......
......@@ -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.'
......@@ -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 {
......
......@@ -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;
......
.newsletter-section {
@apply bg-cover bg-no-repeat;
&:not(.newsletter-section--small) {
background-position: -400px;
}
@screen md {
background-position: left top;
}
......
<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>
......@@ -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);
}
}
};
......
......@@ -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);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment