From b674239af2bc6f5150c5b64963cef5e0bf795622 Mon Sep 17 00:00:00 2001
From: "fanky.eu" <jakub.webisti@gmail.com>
Date: Fri, 16 Apr 2021 12:56:26 +0200
Subject: [PATCH] accordeon molecule
---
.../03-buttons/03-button-sizes.mustache | 17 +++++++++
.../18-collapsibles/accordeon-row.mustache | 9 +++++
.../22-accordeon/accordeon.mustache | 4 ++
.../candidate-card-list.mustache | 4 +-
.../homepage-pirati-stan.mustache | 38 +++++++++++++++++++
source/css/atoms/collapsibles.pcss | 34 +++++++++++++++++
6 files changed, 104 insertions(+), 2 deletions(-)
create mode 100644 source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache
create mode 100644 source/_patterns/01-molecules/22-accordeon/accordeon.mustache
create mode 100644 source/_patterns/03-templates/homepage-pirati-stan.mustache
create mode 100644 source/css/atoms/collapsibles.pcss
diff --git a/source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache b/source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache
index 74aa5b6..20a370e 100644
--- a/source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache
+++ b/source/_patterns/00-atoms/03-buttons/03-button-sizes.mustache
@@ -23,5 +23,22 @@
<div>
{{> atoms-basic-button(classes: "text-lg btn--condensed" )}}
</div>
+ <div>
+ {{> atoms-basic-button(classes: "text-xl btn--condensed", bodyClasses: "py-4 leading-5" )}}
+ </div>
+ </div>
+ <div class="space-y-2">
+ <div>
+ {{> atoms-icon-button(classes: "text-sm btn--condensed" )}}
+ </div>
+ <div>
+ {{> atoms-icon-button(classes: "text-base btn--condensed" )}}
+ </div>
+ <div>
+ {{> atoms-icon-button(classes: "text-lg btn--condensed" )}}
+ </div>
+ <div>
+ {{> atoms-icon-button(icon: "ico--chevron-right", classes: "text-lg", bodyClasses: "py-8 leading-4", iconClasses: "px-8 bg-grey-800 border-grey-500" )}}
+ </div>
</div>
</div>
diff --git a/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache b/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache
new file mode 100644
index 0000000..2b020ce
--- /dev/null
+++ b/source/_patterns/00-atoms/18-collapsibles/accordeon-row.mustache
@@ -0,0 +1,9 @@
+<div class="accordeon-row">
+ <div class="accordeon-row-head" onclick="if(this.parentElement.classList.contains('accordeon-row--open')) this.parentElement.classList.remove('accordeon-row--open'); else this.parentElement.classList.add('accordeon-row--open');">
+ <h3 class="accordeon-row-heading head-alt-xs">{{ headline.short }}</h3>
+ <i class="ico--chevron-down"></i>
+ </div>
+ <div class="accordeon-row-body">
+ <p>{{ description }}</p>
+ </div>
+</div>
\ No newline at end of file
diff --git a/source/_patterns/01-molecules/22-accordeon/accordeon.mustache b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
new file mode 100644
index 0000000..a502599
--- /dev/null
+++ b/source/_patterns/01-molecules/22-accordeon/accordeon.mustache
@@ -0,0 +1,4 @@
+<div class="space-y-1">
+ {{> atoms-accordeon-row }}
+ {{> atoms-accordeon-row }}
+</div>
\ No newline at end of file
diff --git a/source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache b/source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache
index f22e702..d464460 100644
--- a/source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache
+++ b/source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache
@@ -3,10 +3,10 @@
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
- {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper candidate-card-list__item-wrapper--last") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
- {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper candidate-card-list__item-wrapper--last") }}
+ {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
+ {{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
</div>
diff --git a/source/_patterns/03-templates/homepage-pirati-stan.mustache b/source/_patterns/03-templates/homepage-pirati-stan.mustache
new file mode 100644
index 0000000..f13bda4
--- /dev/null
+++ b/source/_patterns/03-templates/homepage-pirati-stan.mustache
@@ -0,0 +1,38 @@
+{{> organisms-header }}
+{{> organisms-hero-pirati-stan }}
+
+<div class="container container--default lg:pb-24">
+ <section>
+ <h1 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 mt-10 md:mt-24">Aktuality</h1>
+ {{> organisms-article-card-list-pirati-stan(onlyThree: true) }}
+
+ <nav class="text-center">
+ {{> atoms-icon-button(cta: "Další články", icon: "ico--chevron-right", classes: "text-xl pt-8") }}
+ </nav>
+ </section>
+
+ <section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+ {{> molecules-banner }}
+ </section>
+
+ <section>
+ <h1 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 mt-10 md:mt-24">Výpis kandidátů</h1>
+ {{> organisms-candidate-card-list-pirati-stan(onlyEight: true) }}
+
+ <nav class="text-center">
+ {{> atoms-icon-button(cta: "Zobrazit výpis", icon: "ico--chevron-right", classes: "text-lg my-8 mx-4", bodyClasses: "py-8 leading-4", iconClasses: "px-8 bg-grey-800 border-grey-500" )}}
+ {{> atoms-icon-button(cta: "Filtrovat pomocí mapy", icon: "ico--chevron-right", classes: "text-lg my-8 mx-4", bodyClasses: "sm:whitespace-nowrap py-8 leading-4", iconClasses: "px-8 bg-grey-800 border-grey-500" )}}
+ </nav>
+ </section>
+
+ <section class="my-8 lg:my-16 container-padding--zero lg:container-padding--auto">
+ {{> organisms-countdown }}
+ </section>
+
+ <div class="flex flex-col lg:flex-row lg:space-x-8">
+ {{> atoms-super-button(cta: "Sledujte nás na Facebooku", icon: "ico--facebook", classes: "bg-brands-facebook text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ {{> atoms-super-button(cta: "Sledujte naše fórum", icon: "ico--bubbles", classes: "bg-black text-white container-padding--zero lg:container-padding--auto lg:w-full") }}
+ </div>
+</div>
+
+{{> organisms-footer }}
diff --git a/source/css/atoms/collapsibles.pcss b/source/css/atoms/collapsibles.pcss
new file mode 100644
index 0000000..2b6ff34
--- /dev/null
+++ b/source/css/atoms/collapsibles.pcss
@@ -0,0 +1,34 @@
+.accordeon-row{
+ @apply bg-grey-125;
+}
+.accordeon-row-head{
+ @apply relative p-8 cursor-pointer;
+
+ .accordeon-row-heading{
+ padding-top: 1px; /*font vertical center fix*/
+ }
+ i{
+ @apply absolute top-1/2 right-8 transform -translate-y-2/4 transition transition-transform duration-500;
+ }
+}
+.accordeon-row-body{
+ @apply leading-loose overflow-hidden max-h-0;
+
+ -moz-transition: max-height 0.5s ease;
+ -webkit-transition: max-height 0.5s ease;
+ -o-transition: max-height 0.5s ease;
+ transition: max-height 0.5s ease;
+ p{
+ @apply px-8 pt-8 pb-14;
+ }
+}
+
+.accordeon-row--open{
+ @apply bg-black text-white;
+ i{
+ @apply absolute top-1/2 right-8 transform -translate-y-2/4 rotate-90;
+ }
+ .accordeon-row-body{
+ max-height: 1000px;
+ }
+}
\ No newline at end of file
--
GitLab