From 88884ed07565a4bd23afba9d0daf5ad55cd97fe8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Wed, 24 Aug 2022 15:05:50 +0200
Subject: [PATCH] [WIP] twitter
---
.../_patterns/templates/person.mustache | 13 ++++---
.../source/css/molecules/carousels.pcss | 36 +++++++++++++++++++
.../source/js/components/TwitterCarousel.vue | 30 ++++++++++++++++
main/styleguide/source/js/main.js | 2 ++
4 files changed, 77 insertions(+), 4 deletions(-)
create mode 100644 main/styleguide/source/js/components/TwitterCarousel.vue
diff --git a/main/styleguide/source/_patterns/templates/person.mustache b/main/styleguide/source/_patterns/templates/person.mustache
index d855f6c6..021b0eba 100644
--- a/main/styleguide/source/_patterns/templates/person.mustache
+++ b/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>
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index 4d0f6956..c6d4a530 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/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%);
+ }
+}
diff --git a/main/styleguide/source/js/components/TwitterCarousel.vue b/main/styleguide/source/js/components/TwitterCarousel.vue
new file mode 100644
index 00000000..9a4cd708
--- /dev/null
+++ b/main/styleguide/source/js/components/TwitterCarousel.vue
@@ -0,0 +1,30 @@
+<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>
diff --git a/main/styleguide/source/js/main.js b/main/styleguide/source/js/main.js
index 12575b69..06df5ade 100644
--- a/main/styleguide/source/js/main.js
+++ b/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);
--
GitLab