From e70b85e9b23c8e1fbb9f937d1dab16a2136cd61d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Wed, 24 Aug 2022 16:37:31 +0200
Subject: [PATCH] [FIX] refactor article list
---
.../main-articles-article-list.mustache | 11 ++++
.../organisms/main-articles-timeline.mustache | 43 ++++++++++++++
.../_patterns/templates/how-we-works.mustache | 59 ++++++-------------
.../source/js/components/ViewProvider.vue | 2 +-
4 files changed, 72 insertions(+), 43 deletions(-)
create mode 100644 main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache
create mode 100644 main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
diff --git a/main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache b/main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache
new file mode 100644
index 00000000..d19c97eb
--- /dev/null
+++ b/main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache
@@ -0,0 +1,11 @@
+<section class="grid-container mb-4 justify-start xl:mb-14">
+ <div class="grid-content-with-right-side">
+ <div class="leading-6">
+ <h2 class="head-4xl">
+ Články
+ </h2>
+ {{> molecules-person-article-preview }}
+ {{> molecules-person-article-preview }}
+ </div>
+ </div>
+</section>
diff --git a/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
new file mode 100644
index 00000000..1ee3e6c1
--- /dev/null
+++ b/main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache
@@ -0,0 +1,43 @@
+<div class="grid-container article-section">
+ <div class="grid-full mb-8">
+ <div class="mb-4">
+ <h3 class="head-7xl mb-4 xl:hidden">Červenec</h3>
+ <div class="flex flex-col justify-between xl:flex-row">
+ <div class="xl:pt-8">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ <div class="relative border border-violet-400 mx-8 hidden xl:block">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
+ Červenec
+ </div>
+ </div>
+ <div class="xl:pt-14">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ </div>
+ </div>
+ <div class="mb-4">
+ <h3 class="head-7xl mb-4 xl:hidden">Srpen</h3>
+ <div class="flex flex-col justify-between xl:flex-row">
+ <div class="xl:pt-8">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ <div class="relative border border-violet-400 mx-8 hidden xl:block">
+ <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
+ Srpen
+ </div>
+ </div>
+ <div class="xl:pt-14">
+ {{> molecules-work-article-preview }}
+ {{> molecules-work-article-preview }}
+ </div>
+ </div>
+ </div>
+ <div class="flex justify-center">
+ {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
+ </div>
+ </div>
+</div>
diff --git a/main/styleguide/source/_patterns/templates/how-we-works.mustache b/main/styleguide/source/_patterns/templates/how-we-works.mustache
index cf399252..f8b74dcc 100644
--- a/main/styleguide/source/_patterns/templates/how-we-works.mustache
+++ b/main/styleguide/source/_patterns/templates/how-we-works.mustache
@@ -4,9 +4,6 @@
<main role="main">
<div class="grid-container mb-2 xl:mb-12">
- <div class="grid-left-side">
- {{> molecules-sidebar-menu }}
- </div>
<div class="grid-content leading-6">
<h2 class="head-xl mb-2">
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.
@@ -18,48 +15,26 @@
</div>
</div>
- <div class="grid-container article-section">
- <div class="grid-full mb-8">
- <div class="mb-4">
- <h3 class="head-7xl mb-4 xl:hidden">Červenec</h3>
- <div class="flex flex-col justify-between xl:flex-row">
- <div class="xl:pt-8">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- <div class="relative border border-violet-400 mx-8 hidden xl:block">
- <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
- Červenec
- </div>
- </div>
- <div class="xl:pt-14">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- </div>
- </div>
- <div class="mb-4">
- <h3 class="head-7xl mb-4 xl:hidden">Srpen</h3>
- <div class="flex flex-col justify-between xl:flex-row">
- <div class="xl:pt-8">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
- </div>
- <div class="relative border border-violet-400 mx-8 hidden xl:block">
- <div class="absolute bg-violet-400 p-1 text-white font-bold" style="transform: translateX(-50%); top: -1rem">
- Srpen
- </div>
- </div>
- <div class="xl:pt-14">
- {{> molecules-work-article-preview }}
- {{> molecules-work-article-preview }}
+ <div class="__js-root">
+ <ui-view-provider :initial="{timeline: true, articles: false}" :sync-location="true"
+ v-slot="{ isCurrentView, toggleView }">
+ <div class="grid-container article-section mb-8">
+ <div class="grid-full">
+ <div class="switch">
+ <a @click="toggleView('timeline')" class="switch__item"
+ :class="{'switch__item--active': isCurrentView('timeline')}">Poslanecká sněmovna</a>
+ <a @click="toggleView('articles')" class="switch__item"
+ :class="{'switch__item--active': isCurrentView('articles')}">Vláda</a>
</div>
</div>
</div>
- <div class="flex justify-center">
- {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
- </div>
- </div>
+ <template v-if="isCurrentView('timeline')">
+ {{> organisms-main-articles-timeline }}
+ </template>
+ <template v-if="isCurrentView('articles')">
+ {{> organisms-main-articles-article-list }}
+ </template>
+ </ui-view-provider>
</div>
</main>
{{> organisms-newsletter-section }}
diff --git a/main/styleguide/source/js/components/ViewProvider.vue b/main/styleguide/source/js/components/ViewProvider.vue
index 75ab10bf..0a27cb27 100644
--- a/main/styleguide/source/js/components/ViewProvider.vue
+++ b/main/styleguide/source/js/components/ViewProvider.vue
@@ -65,7 +65,7 @@ export default {
this.$data.views = Object.assign({}, this.data.views, updates);
},
toggleView(viewId) {
- this.setView(viewId, !this.isCurrentView(viewId), true);
+ !this.isCurrentView(viewId) && this.setView(viewId, !this.isCurrentView(viewId), true);
},
showView(viewId) {
this.setView(viewId, true, true);
--
GitLab