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 0000000000000000000000000000000000000000..d19c97ebda0a126da80c545a83fd7c043d8dd575
--- /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 0000000000000000000000000000000000000000..1ee3e6c1ed4d524a58dc15156a11831cbdcfe4c4
--- /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 cf3992524e81a006f5b583355ac4d9da84f6b868..f8b74dcc5af473e5a55f6a68a6857eda7525cf4f 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 75ab10bf82f82b2b667a17346045332883a1d585..0a27cb27e77622030ebfc89f9d1545076ea109a3 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);