[WIP] twitter

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

@@ -78,16 +78,20 @@
       </div>
     </section>
   </div>
-  <section class="grid-container no-max">
+  <section class="grid-container no-max mr-0 mb-8">
     <div class="grid-content-with-right-side">
       <h2 class="head-4xl text-center xl:text-left">
         Aktuálně na Twitteru
       </h2>
-      <div class="mb-8 flex flex-wrap">
-        <div class="md:w-1/3 lg:w-1/4">
+      <div class="__js-root twitter-carousel-root">
+      <ui-twitter-carousel>
+        <div class="md:w-1/3 lg:w-1/4 pr-2">
           {{> molecules-twitter-box }}
         </div>
-        <div class="md:w-1/3 lg:w-1/4">
+        <div class="md:w-1/3 lg:w-1/4 pr-2">
+          {{> molecules-twitter-box }}
+        </div>
+        <div class="md:w-1/3 lg:w-1/4 pr-2">
           {{> molecules-twitter-box }}
         </div>
         <div class="md:w-1/3 lg:w-1/4">
@@ -96,6 +100,7 @@
         <div class="md:w-1/3 lg:w-1/4">
           {{> molecules-twitter-box }}
         </div>
+      </ui-twitter-carousel>
       </div>
     </div>
   </section>

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

@@ -159,3 +159,39 @@
     }
   }
 }
+
+.twitter-carousel {
+  .slick-arrow {
+    right: 10%;
+    @screen lg {
+      right: 5%;
+    }
+
+    &:before, &:after {
+      border-color: black;
+    }
+
+    &.slick-disabled {
+      &:before, &:after {
+        border-color: #B3B3B3;
+      }
+    }
+  }
+}
+
+.twitter-carousel {
+  position: relative;
+
+  .slick-arrow {
+    top: -2.6rem;
+  }
+  &:before {
+    content: '';
+    height: 100%;
+    position: absolute;
+    right: 0;
+    width: 20%;
+    z-index: 100;
+    background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(255,255,255,1) 100%);
+  }
+}

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

+<template>
+  <vue-slick-carousel v-bind="settings" class="twitter-carousel">
+    <slot></slot>
+  </vue-slick-carousel>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel'
+
+export default {
+  components: {VueSlickCarousel},
+  name: 'TwitterCarousel',
+  data: () => ({
+    settings: {
+      "dots": false,
+      "infinite": false,
+      "slidesToShow": 4,
+      "slidesToScroll": 1,
+      "responsive": [
+        {
+          "breakpoint": 1200,
+          "settings": {
+            "slidesToShow": 1
+          }
+        }
+      ]
+    }
+  })
+}
+</script>

main/styleguide/source/js/main.js

@@ -8,6 +8,7 @@ import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
 import GoogleProvider from "./components/calendar/GoogleProvider";
 import RegionMap from "./components/RegionMap";
+import TwitterCarousel from "./components/TwitterCarousel";
 import ViewProvider from "./components/ViewProvider";
 import Navbar from "./components/navbar/Navbar";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
@@ -20,6 +21,7 @@ Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);
 Vue.component("ui-calendar-google-provider", GoogleProvider);
 Vue.component("ui-region-map", RegionMap);
+Vue.component("ui-twitter-carousel", TwitterCarousel);
 Vue.component("ui-view-provider", ViewProvider);
 Vue.component("ui-navbar", Navbar);
 Vue.component("ui-footer-collapsible", FooterCollapsible);