From a512493231fab2cc04a2e2f9221fe98d51be4b2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Thu, 18 Aug 2022 17:03:24 +0200
Subject: [PATCH] [ADD] How we works page
---
.../how-we-work/sidebar-menu.mustache | 14 +++++
.../how-we-work/work-article-preview.mustache | 21 +++++++
.../molecules/simple_header.mustache | 14 +++--
.../_patterns/pages/how-we-works.mustache | 1 +
.../_patterns/templates/how-we-works.mustache | 55 +++++++++++++++++++
.../source/css/atoms/container.pcss | 5 ++
main/styleguide/source/css/atoms/heading.pcss | 9 +++
7 files changed, 114 insertions(+), 5 deletions(-)
create mode 100644 main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache
create mode 100644 main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
create mode 100644 main/styleguide/source/_patterns/pages/how-we-works.mustache
create mode 100644 main/styleguide/source/_patterns/templates/how-we-works.mustache
diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache
new file mode 100644
index 00000000..e5474dd5
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/how-we-work/sidebar-menu.mustache
@@ -0,0 +1,14 @@
+<div class="flex flex-col space-y-1">
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline font-bold">Aktuálně</a>
+ </div>
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline">Tiskové výstupy</a>
+ </div>
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline">2017-2021</a>
+ </div>
+ <div class="bg-grey-150 p-4">
+ <a href="#" class="text-bold uppercase hover:no-underline">Resortní týmy</a>
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
new file mode 100644
index 00000000..851bec63
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/how-we-work/work-article-preview.mustache
@@ -0,0 +1,21 @@
+<div class="p-7 flex flex-col max-w-xl border border-grey-150 mb-8">
+ <img src="https://i.picsum.photos/id/689/576/281.jpg?hmac=yIwOFV185zFy4fwVE3lF1UDqLDAm_bpLr9LZprQ26eo" alt=""
+ class="mb-7">
+ <h2 class="head-2xl mb-4">Konec mezinárodní ostudy. Evropská komise uzavřela řízení o střetu zájmů</h2>
+ <div class="flex font-bold mb-4 text-xs text-white uppercase">
+ <span class="bg-green-400 mr-1 p-2">Duben 2022</span>
+ <span class="bg-violet-400 mr-1 p-2">#ENERGETIKA</span>
+ </div>
+ <p class="mb-8">
+ Zachránili jsme 180 miliard korun pro naše občany. Ostuda, kterou Česká republika musela podstupovat, je u konce.
+ Babiš,
+ podle závěrů auditu, spoluvytvářel prostředí, ve kterém jeho firmy čerpaly dotace, čímž ohrozil čerpání 180 miliard
+ korun
+ z evropských dotací. Ministerstvo pro místní rozvoj obdrželo rozhodnutí od Evropské komise, podle kterého auditní
+ řízení
+ ke střetu zájmů, které se týkalo i bývalého premiéra Babiše, bylo uzavřeno.
+ </p>
+ <div>
+ {{> atoms-button-animated(btn-text: "Číst dále", classes-btn-hidden: "bg-black") }}
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/molecules/simple_header.mustache b/main/styleguide/source/_patterns/molecules/simple_header.mustache
index ab2e2d2b..373d2273 100644
--- a/main/styleguide/source/_patterns/molecules/simple_header.mustache
+++ b/main/styleguide/source/_patterns/molecules/simple_header.mustache
@@ -1,7 +1,11 @@
-<header class="bg-black flex items-center h-96 header-clip mb-24 pt-24 w-full">
- <div class="container--narrow flex items-center">
- <h1 class="font-alt text-7xl text-white">
- {{ title }}
- </h1>
+<header
+ class="bg-black flex items-center h-96 header-clip mb-24 pt-24 w-full"
+>
+ <div class="grid-container header-max-width pt-16">
+ <div class="col-start-2 col-end-13">
+ <h1 class="font-alt text-7xl text-white">
+ {{ title }}
+ </h1>
+ </div>
</div>
</header>
diff --git a/main/styleguide/source/_patterns/pages/how-we-works.mustache b/main/styleguide/source/_patterns/pages/how-we-works.mustache
new file mode 100644
index 00000000..bfc503b6
--- /dev/null
+++ b/main/styleguide/source/_patterns/pages/how-we-works.mustache
@@ -0,0 +1 @@
+{{> templates-how-we-works }}
diff --git a/main/styleguide/source/_patterns/templates/how-we-works.mustache b/main/styleguide/source/_patterns/templates/how-we-works.mustache
new file mode 100644
index 00000000..fbe10647
--- /dev/null
+++ b/main/styleguide/source/_patterns/templates/how-we-works.mustache
@@ -0,0 +1,55 @@
+{{> organisms-header }}
+
+{{> molecules-simple_header(title: "Jak piráti pracují") }}
+
+<main role="main">
+ <div class="grid-container mx-auto mb-12">
+ <div class="col-start-1 col-end-2 left-tab">
+ {{> molecules-sidebar-menu }}
+ </div>
+ <div class="col-start-2 col-end-4 leading-6">
+ <h2 class="head-xl mb-6">
+ Piráti pracují pro občany ČR na všech úrovních. V zastupitelstev obcí působí 400 zastupitelů, dalších 100 v krajích.
+ Piráti prosazují svůj program i na celostátní úrovni prostřednictvím 4 poslanců, 3 senátorů, 3 ministrů a v EU díky 3 europoslancům.
+ </h2>
+ <h2 class="head-xl">
+ Projděte si archiv tiskových zpráv a souhrn našich nejvýraznějších aktivit
+ </h2>
+ </div>
+ </div>
+
+ <div class="grid-container mx-auto mb-4">
+ <div class="col-start-1 col-end-4 flex justify-between">
+ <div class="pt-8">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ <div class="relative border border-violet-400 mx-8">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">Červenec</div>
+ </div>
+ <div class="pt-14">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ </div>
+ <div class="col-start-1 col-end-4 flex justify-between">
+ <div class="pt-8">
+ {{> molecules-work-article-preview }}
+ </div>
+ <div class="relative border border-violet-400 mx-8 pt-8">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">Srpen</div>
+ </div>
+ <div class="pt-14">
+ {{> molecules-work-article-preview }}
+ </div>
+ </div>
+ </div>
+ <div class="container">
+ <div class="flex justify-center">
+ {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
+ </div>
+ </div>
+</main>
+{{> organisms-newsletter-section }}
+
+{{> organisms-footer }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 0088b998..1e3444dc 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -25,6 +25,11 @@
max-width: 1340px !important;
}
+.container {
+ @apply: mx-auto;
+ max-width: 1150px;
+}
+
.grid-container {
@apply grid;
grid-template-columns: 240px 1fr 102px;
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 5ac9895f..77dfe0fc 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -149,6 +149,15 @@
@apply text-4xl font-bold leading-10 uppercase mb-5;
}
+.head-2xl {
+ @apply text-2xl font-bold leading-8 uppercase
+}
+
p {
@apply leading-6;
}
+
+
+.vertical-time-line {
+ border-left: 1px solid green;
+}
--
GitLab