From 3fb749109589b9c1d234417b93df96b6de1126fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Sun, 14 Aug 2022 17:38:09 +0200
Subject: [PATCH] [ADD] program page
---
.../blocks/icon-title-text-block.mustache | 15 +++++++++++
.../molecules/simple_header.mustache | 2 +-
.../switch/multi-state-switch.mustache | 6 +++++
.../source/_patterns/pages/program.mustache | 1 +
.../_patterns/templates/contact.mustache | 2 +-
.../_patterns/templates/program.mustache | 26 +++++++++++++++++++
.../source/css/molecules/switch.pcss | 16 ++++++++++++
main/styleguide/source/css/style.pcss | 1 +
main/styleguide/tailwind.config.js | 1 +
9 files changed, 68 insertions(+), 2 deletions(-)
create mode 100644 main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache
create mode 100644 main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache
create mode 100644 main/styleguide/source/_patterns/pages/program.mustache
create mode 100644 main/styleguide/source/_patterns/templates/program.mustache
create mode 100644 main/styleguide/source/css/molecules/switch.pcss
diff --git a/main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache b/main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache
new file mode 100644
index 000000000..8b1eee25b
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/blocks/icon-title-text-block.mustache
@@ -0,0 +1,15 @@
+<div class="flex mb-6">
+ <i class="{{ icon }} mr-6 text-6xl"></i>
+ <div class="flex flex-col">
+ <h3 class="font-alt mb-4 text-4xl">
+ DOSTUPNÉ A DŮSTOJNÉ BYDLENÍ PRO KVALITNÍ ŽIVOT
+ </h3>
+ <p class="leading-6">
+ Bydlení je jednou ze základních věcí pro každou obec nebo město. Nevnímáme bydlení jako
+ zásluhu. Bydlet
+ podle nás potřebuje každý, a právě obecní bydlení může poskytovat zázemí pro všechny skupiny obyvatel od
+ znevýhodněných rodin a jednotlivců, přes rodiny se středními příjmy, seniory až například po potřebná
+ povolání. A bydlet nesmí znamenat zadlužit se.
+ </p>
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/molecules/simple_header.mustache b/main/styleguide/source/_patterns/molecules/simple_header.mustache
index 580c756a5..a746fea16 100644
--- a/main/styleguide/source/_patterns/molecules/simple_header.mustache
+++ b/main/styleguide/source/_patterns/molecules/simple_header.mustache
@@ -1,7 +1,7 @@
<header class="bg-black flex items-center h-80 header-clip mb-36 py-32 w-full">
<div class="container--narrow flex items-center">
<h1 class="font-alt text-7xl text-white">
- Kontakty
+ {{ title }}
</h1>
</div>
</header>
diff --git a/main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache b/main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache
new file mode 100644
index 000000000..dd163ee23
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/switch/multi-state-switch.mustache
@@ -0,0 +1,6 @@
+<div class="switch">
+ <a class="switch__item switch__item--active">{{ cta }}</a>
+ <a class="switch__item">{{ cta }}</a>
+ <a class="switch__item">{{ cta }}</a>
+ <a class="switch__item">{{ cta }}</a>
+</div>
diff --git a/main/styleguide/source/_patterns/pages/program.mustache b/main/styleguide/source/_patterns/pages/program.mustache
new file mode 100644
index 000000000..862ea4db9
--- /dev/null
+++ b/main/styleguide/source/_patterns/pages/program.mustache
@@ -0,0 +1 @@
+{{> templates-program }}
diff --git a/main/styleguide/source/_patterns/templates/contact.mustache b/main/styleguide/source/_patterns/templates/contact.mustache
index 51f3e8686..a15505220 100644
--- a/main/styleguide/source/_patterns/templates/contact.mustache
+++ b/main/styleguide/source/_patterns/templates/contact.mustache
@@ -1,6 +1,6 @@
{{> organisms-header }}
-{{> molecules-simple_header }}
+{{> molecules-simple_header(title: "Kontakty") }}
<main role="main">
<section class="container--middle flex flex-wrap mb-16 pl-44">
diff --git a/main/styleguide/source/_patterns/templates/program.mustache b/main/styleguide/source/_patterns/templates/program.mustache
new file mode 100644
index 000000000..6e9771636
--- /dev/null
+++ b/main/styleguide/source/_patterns/templates/program.mustache
@@ -0,0 +1,26 @@
+{{> organisms-header }}
+
+{{> molecules-simple_header(title: "Program") }}
+
+<main role="main">
+ <div class="container--narrow mx-auto">
+ <h2 class="max-w-xl font-alt leading-6 mx-auto mb-12">
+ 23. a 24. září 2022 nás čekají volby do zastupitelstev obcí a do třetiny Senátu Parlamentu České republiky.
+ Níže předkládáme zásadní body společného programu pro komunální volby. <br> Kompletní program ve formátu pdf. <br>
+ Programy jednotlivých sdružení naleznete na jejich stránkách.
+ </h2>
+ <div class="mb-12">
+ {{> molecules-multi-state-switch }}
+ </div>
+ <div class="mb-12">
+ {{> molecules-icon-title-text-block(icon: "ico--book") }}
+ {{> molecules-icon-title-text-block(icon: "ico--search") }}
+ {{> molecules-icon-title-text-block(icon: "ico--eye") }}
+ </div>
+ </div>
+ {{> organisms-newsletter-section }}
+</main>
+
+
+
+{{> organisms-footer }}
diff --git a/main/styleguide/source/css/molecules/switch.pcss b/main/styleguide/source/css/molecules/switch.pcss
new file mode 100644
index 000000000..a65505c16
--- /dev/null
+++ b/main/styleguide/source/css/molecules/switch.pcss
@@ -0,0 +1,16 @@
+.switch {
+ @apply inline-flex;
+}
+
+.switch__item {
+ @apply py-4 px-8 bg-grey-150 mr-2 font-alt font-normal text-xl text-white text-center cursor-pointer;
+
+ &:hover {
+ @apply no-underline bg-grey-400;
+ }
+
+ &.switch__item--active,
+ &.switch__item--active:hover {
+ @apply bg-turquoise-500;
+ }
+}
diff --git a/main/styleguide/source/css/style.pcss b/main/styleguide/source/css/style.pcss
index 2b8e98450..9885fa89f 100644
--- a/main/styleguide/source/css/style.pcss
+++ b/main/styleguide/source/css/style.pcss
@@ -28,6 +28,7 @@
@import "./molecules/person_box.pcss";
@import "./molecules/photo_header.pcss";
@import "./molecules/sliding_button.pcss";
+@import "./molecules/switch.pcss";
@import "./organisms/footer.pcss";
@import "./organisms/navbar.pcss";
diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js
index 2f5374bad..359b32203 100644
--- a/main/styleguide/tailwind.config.js
+++ b/main/styleguide/tailwind.config.js
@@ -71,6 +71,7 @@ module.exports = {
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
+ '150': '#CDCDCD',
'200': '#ECECEC',
'300': '#4c4c4c',
'400': '#343434',
--
GitLab