[FIX] refactor article list

main/styleguide/source/_patterns/organisms/main-articles-article-list.mustache

+<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>

main/styleguide/source/_patterns/organisms/main-articles-timeline.mustache

+<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>

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 }}

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);