[FEATURE] horizontal scrollable vue component

main/styleguide/source/_patterns/templates/people.mustache

@@ -14,15 +14,21 @@
   </div>
   <div class="container--medium">
     <div class="__js-root">
-      <ui-view-provider :initial="{candidates: true, program: false}" :sync-location="true"
+      <ui-view-provider :initial="{candidates: true, program: false, other1: false, other2: false}" :sync-location="true"
                         v-slot="{ isCurrentView, toggleView }">
         <div class="flex justify-center mb-12">
+          <ui-horizontal-scrollable>
             <div class="switch">
               <a @click="toggleView('candidates')" class="switch__item"
                  :class="{'switch__item--active': isCurrentView('candidates')}">Poslanecká sněmovna</a>
               <a @click="toggleView('program')" class="switch__item"
                  :class="{'switch__item--active': isCurrentView('program')}">Vláda</a>
+              <a @click="toggleView('other1')" class="switch__item"
+                 :class="{'switch__item--active': isCurrentView('other1')}">Jiná skupina</a>
+              <a @click="toggleView('other2')" class="switch__item"
+                 :class="{'switch__item--active': isCurrentView('other2')}">Jiná skupina dvě</a>
             </div>
+          </ui-horizontal-scrollable>
         </div>
         <div class="flex flex-wrap gap-4 xl:justify-center">
           <template v-if="isCurrentView('candidates')">
@@ -32,6 +38,19 @@
             {{> molecules-person-contact-big-block(name: "Klára Kocmanová", function: "poslankyně Parlamentu České republiky za Středočeský kraj") }}
             {{> molecules-person-contact-big-block(name: "Olga Richterová", function: "poslankyně, místopředsedkyně PSP ČR") }}
             {{> molecules-person-contact-big-block(name: "Jakub Michálek", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Pepa Honzů", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Jakub Zajíček", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Ondra Chochol", function: "předseda poslaneckého klubu Pirátů") }}
+          </template>
+          <template v-if="isCurrentView('other1')">
+            {{> molecules-person-contact-big-block(name: "Pepa Honzů", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Jakub Zajíček", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Ondra Chochol", function: "předseda poslaneckého klubu Pirátů") }}
+          </template>
+          <template v-if="isCurrentView('other2')">
+            {{> molecules-person-contact-big-block(name: "Miloslav Procházka", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Ladislav Zechmeister", function: "předseda poslaneckého klubu Pirátů") }}
+            {{> molecules-person-contact-big-block(name: "Václav Bukva", function: "předseda poslaneckého klubu Pirátů") }}
           </template>
         </div>
       </ui-view-provider>

main/styleguide/source/css/molecules/switch.pcss

 .switch {
-  @apply flex flex-wrap justify-center;
+  @apply py-5 justify-center;
 }
 
 .switch__item {
-  @apply bg-grey-150 cursor-pointer px-4 py-2 mr-2 mb-2 font-alt font-normal text-black text-center text-lg;
+  @apply bg-grey-150 cursor-pointer px-5 py-2 mr-2 mb-2 font-alt font-normal text-black text-center text-lg;
 
   &:hover {
     @apply no-underline bg-grey-200;
@@ -24,3 +24,29 @@
   }
 
 }
+/* HORIZONTAL SCROLLABLE */
+.horizontal-scrolling {
+  display: block;
+  margin-left: -15px;
+  margin-right: -15px;
+  max-width: calc(100% + 30px);
+  overflow-x: scroll;
+  overflow-y: hidden;
+  padding: 0 15px;
+  text-align: center;
+  white-space: nowrap;
+}
+.horizontal-scrolling.draggable {
+  cursor: grab;
+}
+.horizontal-scrolling.draggable.active, .horizontal-scrolling.draggable.active a {
+  cursor: grabbing;
+}
+
+.no-scrollbars {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  scrollbar-width: none;
+}
+.no-scrollbars::-webkit-scrollbar {
+  display: none;
+}

main/styleguide/source/js/components/HorizontalScrollable.vue

+<template>
+  <div ref="slider"
+       class="horizontal-scrolling draggable no-scrollbars"
+       :class="{'active': isDown}"
+       v-on:mousedown="mousedown"
+       v-on:mouseleave="mouseleave"
+       v-on:mouseup="mouseup"
+       v-on:mousemove="mousemove"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    isDown: false,
+    startX: null,
+    scrollLeft: null
+  }),
+  methods: {
+    mousemove: function (e){
+      if (!this.isDown) return
+      e.preventDefault()
+      const distance = this.$refs.slider.getBoundingClientRect().left | null
+      const x = e.pageX - distance
+      const walk = x - this.startX
+      this.$refs.slider.scrollLeft = this.scrollLeft - walk
+    },
+    mouseleave: function (){
+      this.isDown = false
+    },
+    mouseup: function (){
+      this.isDown = false
+    },
+    mousedown: function (e){
+      this.isDown = true;
+      const distance = this.$refs.slider.getBoundingClientRect().left | null
+      this.startX = e.pageX - distance
+      this.scrollLeft = this.$refs.slider.scrollLeft
+    }
+  }
+}
+</script>

main/styleguide/source/js/main.js

@@ -13,6 +13,7 @@ import ViewProvider from "./components/ViewProvider";
 import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
+import HorizontalScrollable from "./components/HorizontalScrollable";
 
 
 Vue.component("ui-article-carousel", ArticleCarousel);
@@ -26,6 +27,7 @@ Vue.component("ui-view-provider", ViewProvider);
 Vue.component("ui-navbar", Navbar);
 Vue.component("ui-footer-collapsible", FooterCollapsible);
 Vue.component("ui-flip-clock", FlipClock);
+Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
 
 
 import UiApp from "./components/UiApp.vue";