From e51877ed2e400ddb2314f3897efb741d0a097b69 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 26 Jun 2020 09:55:48 +0200
Subject: [PATCH] Add election program page

---
 .../program-point-card.mustache               |  9 ++++
 .../03-hero/elections-hero.mustache           | 17 +++++++
 .../elections-candidates.mustache             | 46 +++++++++++++++++++
 .../03-templates/elections-program.mustache   | 29 ++++++++++++
 4 files changed, 101 insertions(+)
 create mode 100644 source/_patterns/01-molecules/program-point-card/program-point-card.mustache
 create mode 100644 source/_patterns/02-organisms/03-hero/elections-hero.mustache
 create mode 100644 source/_patterns/03-templates/elections-candidates.mustache
 create mode 100644 source/_patterns/03-templates/elections-program.mustache

diff --git a/source/_patterns/01-molecules/program-point-card/program-point-card.mustache b/source/_patterns/01-molecules/program-point-card/program-point-card.mustache
new file mode 100644
index 0000000..99468a2
--- /dev/null
+++ b/source/_patterns/01-molecules/program-point-card/program-point-card.mustache
@@ -0,0 +1,9 @@
+<div class="card card--hoveractive {{ classes }}">
+  <a href="#">
+    <img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
+  </a>
+  <div class="card__body p-4">
+    <h1 class="card-headline mb-2"><a href="#">{{ title }}{{^ title }}{{ headline.short }}{{/ title }}</a></h1>
+    <p class="card-body-text">{{ excerpt.short }}</p>
+  </div>
+</div>
diff --git a/source/_patterns/02-organisms/03-hero/elections-hero.mustache b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
new file mode 100644
index 0000000..9b7e5cd
--- /dev/null
+++ b/source/_patterns/02-organisms/03-hero/elections-hero.mustache
@@ -0,0 +1,17 @@
+<article class="hero hero--image py-16 {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
+  <div class="container container--default grid lg:grid-rows-3 lg:grid-cols-7 gap-2 items-center">
+    <div class="lg:row-span-2 lg:col-span-3 order-1">
+      {{> atoms-basic-flag(font: "bg-green-100 text-white head-alt-base", cta: "Volte ÄŤ. 2", classes: "mb-6") }}
+      <h1 class="head-alt-md md:head-alt-xl">Krajské volby 2020</h1>
+    </div>
+    <div class="lg:row-span-1 lg:col-span-3 order-3">
+      <div class="mt-4 md:mt-8 space-y-4">
+        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+        {{> atoms-basic-button(classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg") }}
+      </div>
+    </div>
+    <div class="lg:row-span-3 lg:col-span-4 order-2">
+      <img src="/images/hero-profile-img.png" />
+    </div>
+  </div>
+</article>
diff --git a/source/_patterns/03-templates/elections-candidates.mustache b/source/_patterns/03-templates/elections-candidates.mustache
new file mode 100644
index 0000000..7735931
--- /dev/null
+++ b/source/_patterns/03-templates/elections-candidates.mustache
@@ -0,0 +1,46 @@
+{{> organisms-header }}
+{{> organisms-elections-hero }}
+
+<div class="container container--default pb-24 pt-24">
+  <div class="text-center">
+    {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program") }}
+  </div>
+
+  <h1 class="head-alt-md text-center pt-24 pb-8">Kandidátka do krajských voleb</h1>
+
+  <div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "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") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
+    {{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
+    {{> molecules-banner(color: "bg-black", fullwidthButton: true)}}
+  </div>
+
+  <div class="candidate-table candidate-table--fadeout pt-8">
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+    {{> molecules-candidate-table-row }}
+  </div>
+
+  <div class="text-center pt-8">
+    {{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
+  </div>
+
+  <div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">
+    {{> atoms-super-button(cta: "PovolebnĂ­ strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white w-full") }}
+    {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black w-full") }}
+  </div>
+</div>
+
+
+{{> organisms-footer }}
diff --git a/source/_patterns/03-templates/elections-program.mustache b/source/_patterns/03-templates/elections-program.mustache
new file mode 100644
index 0000000..cc1e32e
--- /dev/null
+++ b/source/_patterns/03-templates/elections-program.mustache
@@ -0,0 +1,29 @@
+{{> organisms-header }}
+{{> organisms-elections-hero }}
+
+<div class="container container--default pb-24 pt-24">
+  <div class="text-center">
+    {{> molecules-binary-switch(cta1: "Kandidáti", cta2: "Program", secondActive: true) }}
+  </div>
+
+  <h1 class="head-alt-md text-center pt-24 pb-8">VolebnĂ­ program</h1>
+
+  <div class="candidate-card-list grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    {{> molecules-program-point-card(title: "Otevřenost a zapojení občanů") }}
+    {{> molecules-program-point-card(title: "Smart city") }}
+    {{> molecules-program-point-card(title: "Řízení a organizační struktura města") }}
+    {{> molecules-program-point-card(title: "Rozvoj města a bydlení") }}
+    {{> molecules-program-point-card(title: "Doprava") }}
+    {{> molecules-program-point-card(title: "Veřejný prostor a zeleň") }}
+    {{> molecules-program-point-card(title: "Vzdělávání") }}
+    {{> molecules-program-point-card(title: "Kultura a volnĂ˝ ÄŤas") }}
+  </div>
+
+  <div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">
+    {{> atoms-super-button(cta: "PovolebnĂ­ strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white w-full") }}
+    {{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black w-full") }}
+  </div>
+</div>
+
+
+{{> organisms-footer }}
-- 
GitLab