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..027aa5cb6e9400548dda34bc0c54d15d8b032254
--- /dev/null
+++ b/main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache
@@ -0,0 +1,14 @@
+<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-6xl mb-8">
+ Články
+ </h2>
+ {{> molecules-person-article-preview }}
+ {{> molecules-person-article-preview }}
+ </div>
+ <div class="flex justify-center">
+ {{> atoms-button-animated(btn-text: "Zobrazit další", classes-btn-hidden: "bg-black") }}
+ </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/_patterns/templates/person.mustache b/main/styleguide/source/_patterns/templates/person.mustache
index 021b0eba4c9f46f112a7a7279d8f7d8420b21122..496b240834bd0e1a8e664ebd14b18506415ea94e 100644
--- a/main/styleguide/source/_patterns/templates/person.mustache
+++ b/main/styleguide/source/_patterns/templates/person.mustache
@@ -85,19 +85,19 @@
</h2>
<div class="__js-root twitter-carousel-root">
<ui-twitter-carousel>
- <div class="md:w-1/3 lg:w-1/4 pr-2">
+ <div class="w-full flex max-w-xs">
{{> molecules-twitter-box }}
</div>
- <div class="md:w-1/3 lg:w-1/4 pr-2">
+ <div class="w-full flex max-w-xs">
{{> molecules-twitter-box }}
</div>
- <div class="md:w-1/3 lg:w-1/4 pr-2">
+ <div class="w-full flex max-w-xs">
{{> molecules-twitter-box }}
</div>
- <div class="md:w-1/3 lg:w-1/4">
+ <div class="w-full flex max-w-xs">
{{> molecules-twitter-box }}
</div>
- <div class="md:w-1/3 lg:w-1/4">
+ <div class="w-full flex max-w-xs">
{{> molecules-twitter-box }}
</div>
</ui-twitter-carousel>
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index c6d4a5306e2f13ce3bc1f0c2c7c4cf5dd490d717..1ef55bbeccfe9e426f6ec3b528fd820cda8ab81b 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -186,12 +186,12 @@
top: -2.6rem;
}
&:before {
+ background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
content: '';
height: 100%;
- position: absolute;
right: 0;
+ position: absolute;
width: 20%;
z-index: 100;
- background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
}
}
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);