_layouts/communal-elections.html in jekyll-theme-pirati-7.7.1 vs _layouts/communal-elections.html in jekyll-theme-pirati-8.0.0.pre.alpha1
- old
+ new
@@ -1,103 +1,188 @@
---
-layout: blank-article
+layout: default
---
-<div class="c-corner-ribbon-container">
- {% assign candidates = site.candidatelists | where: "uid", page.candidateListUid | first %}
- {% assign programCategories = site.program | where: "campaignCategoryUid", page.campaignCategoryUid | sort:"order" %}
+{% assign group = site.data.campaigns | where: "groupUid", page.campaignGroupUid | first %}
+{% assign candidates = site.candidatelists | where: "uid", page.candidateListUid | first %}
+{% assign programCategories = site.program | where: "campaignCategoryUid", page.campaignCategoryUid | sort:"order" %}
- {% capture headline %}{{ page.title }}{% if candidates.number %}<span class="t-subheader u-1margin--left">» volte č. {{ candidates.number }} «</span>{% endif %}{% endcapture %}
- {% capture headerContent %}
- <div class="c-content-block c-emphasized-text">{{ content }}</div>
- {% endcapture %}
+{% if page.img %}
+ {% if site.mediaStorage %}
+ {% capture imgPath %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ page.img }}{% endcapture %}
+ {% else %}
+ {% capture imgPath %}{% asset '{{ page.img }}' @path %}{% endcapture %}
+ {% assign imgPath = imgPath | absolute_url %}
+ {% endif %}
+{% endif %}
- {% if candidates.number %}
- <div class="c-corner-ribbon c-corner-ribbon--top-right show-for-medium">Volte č. {{ candidates.number }}!</div>
+{% if page.heroBgImg %}
+ {% if site.mediaStorage %}
+ {% capture imgBgPath %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ page.heroBgImg }}{% endcapture %}
+ {% else %}
+ {% capture imgBgPath %}{% asset '{{ page.heroBgImg }}' @path %}{% endcapture %}
+ {% assign imgBgPath = imgBgPath | absolute_url %}
{% endif %}
+{% endif %}
- {% include page-header.html headline=headline content=headerContent %}
-</div>
+<div class="__js-root">
+ <ui-view-provider inline-template :initial="{candidates: true, program: false}" v-slot="{ isCurrentView, toggleView }">
+ <main>
+ {% capture mainContent %}
+ {% if candidates.number %}
+ <div class="flag bg-violet-400 text-white head-alt-base mb-6">Volte č. {{ candidates.number }}</div>
+ {% endif %}
+ <h1 class="head-alt-md md:head-alt-xl">{{ page.title }}</h1>
+ {% endcapture %}
+ {% include hero/advanced.html img=page.img bgImg=imgBgPath mainContent=mainContent subContent=content contentClass="content-block" imgClass="h-32 lg:h-80 lg:m-auto hidden md:block" %}
-<div class="o-section">
- <div class="row">
- {% if programCategories.size > 0 %}
- <div class="columns medium-8">
- {% else %}
- <div class="columns medium-12">
- {% endif %}
- <div class="o-section-header o-section-header--bordered">
- <h3 class="o-section__heading t-h2-super">Kandidátní listina</h3>
- </div>
- <div class="c-program-candidates">
+ <div class="container container--default pt-8 lg:py-24">
- {% assign leaderCandidate = site.people | where: "uid", candidates.leader.uid | first %}
- {% include candidate-badge.html candidate=candidates.leader candidatePage=leaderCandidate rank=1 %}
+ {% if programCategories.size > 0 %}
+ <div class="text-center">
+ <div class="switch">
+ <a @click="toggleView('candidates')" class="switch__item" :class="{'switch__item--active': isCurrentView('candidates')}">Kandidáti</a>
+ <a @click="toggleView('program')" class="switch__item" :class="{'switch__item--active': isCurrentView('program')}">Program</a>
+ </div>
+ </div>
- {% if candidates.head.size %}
- {% for candidate in candidates.head %}
- {% assign candidatePage = site.people | where: "uid", candidate.uid | first %}
- {% assign candidateRank = forloop.index | plus: 1 %}
- {% include candidate-badge.html candidate=candidate candidatePage=candidatePage leader=false rank=candidateRank %}
- {% endfor %}
- {% endif %}
+ <template v-if="isCurrentView('program')">
+ <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">Volební program</h1>
- {% if candidates.tail.size > 0 %}
- <div class="c-program-candidates__others">
- {% for candidate in candidates.tail %}
- <p>
- <div itemprop="description" class="c-content-block c-emphasized-text">
- {% assign candidateRank = forloop.index | plus: 1 | plus: candidates.head.size %}
- <strong> {{ candidateRank }}.
- {% if candidate.uid %}
- {% assign candidatePage = site.people | where: "uid", candidate.uid | first %}
- <a href={{candidatePage.url}}> {% include people/fullname.html person=candidatePage %}</a>{% if candidate.age or candidate.profession or candidate.party %}, {% endif %}
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+ {% for category in programCategories %}
+ <article class="card card--hoveractive">
+ {% if category.img %}
+ {% if site.mediaStorage %}
+ {% capture img_path %}https://a.pirati.cz/resize/400x225/{{ site.mediaStorage }}/img/{{ category.img }}{% endcapture %}
{% else %}
- {{ candidate.name }}{% if candidate.age or candidate.profession or candidate.party %}, {% endif %}
+ {% if category.img contains ".svg" %}
+ {% capture img_path %}{{ category.img | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+ {% else %}
+ {% capture img_path %}{% asset '{{ category.img }}' magick:resize="400x225^" magick:gravity='center' magick:crop='400x225+0+0' @path %}{% endcapture %}
+ {% endif %}
{% endif %}
- </strong>
+ <a href="{{ category.url | relative_url }}">
+ <img class="w-full h-48 object-cover" src="{{ img_path }}" alt="{{ category.title }}" />
+ </a>
+ {% endif %}
+ <div class="card__body p-4">
+ <h1 class="card-headline mb-2">
+ <a href="{{ category.url | relative_url }}">{{ category.title }}</a>
+ </h1>
+ <p class="card-body-text">{{ category.perex }}</p>
+ </div>
+ </article>
+ {% endfor %}
+ </div>
+ </template>
+ {% endif %}
- {% if candidate.age %}
- {{ candidate.age }} let{% if candidate.profession or candidate.party %}, {% endif %}
- {% endif %}
- {% if candidate.profession %}
- {{ candidate.profession }}{% if candidate.party %}, {% endif %}
- {% endif %}
- {% if candidate.party %}
- {{ candidate.party }}
- {% endif %}
- </div>
- </p>
- {% endfor %}
+ <template v-if="isCurrentView('candidates')">
+ <h1 class="head-alt-md text-center py-8 lg:pt-24 lg:pb-8">{{ candidates.title }}</h1>
+
+ {% assign leaderCandidate = site.people | where: "uid", candidates.leader.uid | first %}
+
+ <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {% include candidate-badge.html candidate=candidates.leader candidatePage=leaderCandidate rank=1 wrapperClass="candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border" %}
+
+ {% if candidates.head.size %}
+ {% for candidate in candidates.head %}
+ {% assign candidatePage = site.people | where: "uid", candidate.uid | first %}
+ {% assign candidateRank = forloop.index | plus: 1 %}
+ {% assign remainder = forloop.index | modulo: 4 %}
+
+ {% if remainder == 0 %}
+ {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border{% endcapture %}
+ {% elsif remainder == 1 %}
+ {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border{% endcapture %}
+ {% elsif remainder == 2 %}
+ {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border{% endcapture %}
+ {% else %}
+ {% capture classes %}candidate-card__wrapper sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder{% endcapture %}
+ {% endif %}
+
+ {% include candidate-badge.html candidate=candidate candidatePage=candidatePage leader=false rank=candidateRank wrapperClass=classes %}
+
+ {% endfor %}
+ {% endif %}
</div>
- {% endif %}
- </div>
+ <ui-view-provider :initial="{fullCandidateTable: false}" v-slot="{ isCurrentView, setView }">
+ {% if candidates.tail.size > 0 %}
+ <div class="candidate-table pt-8 container-padding--zero lg:container-padding--auto" :class="{'candidate-table--fadeout': !isCurrentView('fullCandidateTable')}">
+ {% for candidate in candidates.tail %}
- {% if candidates.note %}
- <p><strong>Pozn.:</strong> {{ candidates.note }}</p>
- {% endif %}
- </div>
- {% if programCategories.size > 0 %}
- <div class="columns medium-4">
- <div class="o-section-header o-section-header--bordered">
- <h3 class="o-section__heading t-h2-super">Program</h3>
- </div>
- <div class="c-program-items">
- {% for category in programCategories %}
- <div class="c-program-items__item">
- <div class="c-program-items__item-wrap c-tile c-tile--fill">
- <div class="c-program-items__item-inner c-tile__body">
- <a href="{{ category.url | relative_url }}">
- <h3 class="c-program-items__item-title c-headline-anchor t-h4">{{ category.title }}</h3>
- <p>{{ category.perex }}</p>
- </a>
+ {% comment %}Just a part of candidate table will be displayed intially{% endcomment %}
+ {% if forloop.index == 10 %}
+ {% assign partialTable = true %}
+ <template v-if="isCurrentView('fullCandidateTable')">
+ {% endif %}
+
+ {% assign candidateRank = forloop.index | plus: 1 | plus: candidates.head.size %}
+
+ {% if candidate.uid %}
+ {% assign candidatePage = site.people | where: "uid", candidate.uid | first %}
+ {% if candidatePage.img %}
+ {% if site.mediaStorage %}
+ {% capture img %}https://a.pirati.cz/resize/225x225/{{ site.mediaStorage }}/img/{{ candidatePage.img }}{% endcapture %}
+ {%- else -%}
+ {% capture img %}{% asset '{{ candidatePage.img }}' magick:resize='225x225^' magick:gravity='center' magick:crop='225x225+0+0' @path %}{% endcapture %}
+ {%- endif -%}
+ {% endif %}
+ {% else %}
+ {% assign candidatePage = false %}
+ {% capture img %}https://a.pirati.cz/common/img/people/unknown-pirate.svg{% endcapture %}
+ {% endif %}
+
+ {% capture img_alt %}{% include people/fullname.html person=candidatePage plain=true %}{% endcapture %}
+
+ <{% if candidatePage %}a href="{{ candidatePage.url }}"{% else %}div{% endif %} class="candidate-table-row">
+ <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ candidateRank }}</div>
+ {% include avatar.html class="avatar--sm candidate-table-row__avatar" src=img alt=candidate.name %}
+ <div class="candidate-table-row__name head-heavy-2xs font-bold">{% if candidatePage %}{{ candidatePage.name }}{% else %}{{ candidate.name }}{% endif %}</div>
+ <div class="candidate-table-row__bio head-allcaps-3xs">{% if candidate.age %}{{ candidate.age }} let{% endif %}{% if candidate.age and candidate.profession %}, {{ candidate.profession }}{% endif %}</div>
+ {% if candidate.party %}
+ <div class="candidate-table-row__affiliation">
+ {% if candidate.partyImg %}
+ {% comment %}We expect an SVG format here to make things scalable{% endcomment %}
+ {% capture partyImg %}{{ candidate.partyImg | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+ {% include avatar.html class="w-6 mr-2" alt=candidate.party src=partyImg %}
+ {% endif %}
+ <span class="font-bold font-condensed">{{ candidate.party }}</span>
+ </div>
+ {% endif %}
+ </{% if candidatePage %}a{% else %}div{% endif %}>
+
+ {% if forloop.last and partialTable %}</template>{% endif %}
+
+ {% endfor %}
</div>
- </div>
+ {% endif %}
+
+ {% if partialTable %}
+ <div class="text-center pt-8" v-if="!isCurrentView('fullCandidateTable')">
+ <button class="btn btn--icon text-xl btn--black btn--hoveractive" @click="setView('fullCandidateTable', true)">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Zobrazit vše</div>
+ <div class="btn__icon "><i class="ico--chevron-right"></i></div>
+ </div>
+ </button>
+ </div>
+ {% endif %}
+
+ </ui-view-provider>
+ </template>
+
+ {% if group.subLinks %}
+ <div class="flex flex-col pt-8 lg:pt-24 lg:flex-row lg:space-x-8">
+ {% for subLink in group.subLinks %}
+ {% capture classes %}{{ subLink.classes }} lg:w-full container-padding--zero lg:container-padding--auto{% endcapture %}
+ {% include buttons/super.html href=subLink.href class=classes cta=subLink.title icon=subLink.icon %}
+ {% endfor %}
</div>
- {% endfor %}
+ {% endif %}
</div>
- </div>
- {% endif %}
- </div>
+ </main>
+ </ui-view-provider>
</div>