From bee19ff13dfd2a4fb79461d06ebb1521166b6ab7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Tue, 23 Aug 2022 14:49:59 +0200
Subject: [PATCH] [ADD] article carousel
---
.../organisms/articles-section.mustache | 4 +-
.../source/css/molecules/carousels.pcss | 45 ++++++++++
.../components/articles/ArticleCarousel.vue | 88 ++++++++++---------
3 files changed, 94 insertions(+), 43 deletions(-)
diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache
index eb2161160..9092b4a21 100644
--- a/main/styleguide/source/_patterns/organisms/articles-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/articles-section.mustache
@@ -5,10 +5,8 @@
Aktuality z paluby
</h2>
{{> molecules-main-article-preview }}
- <div class="flex w-11/12">
- <div class="__js-root">
+ <div class="__js-root">
<ui-article-carousel></ui-article-carousel>
- </div>
</div>
</div>
</div>
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index ffd89a756..249457524 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -1,3 +1,29 @@
+.slick-slider .slick-arrow {
+ font-size: 0;
+ position: absolute;
+ top: -.7rem;
+ z-index: 10;
+ &:before, &:after {
+ border-right: 2px solid white;
+ border-bottom: 2px solid white;
+ content: '';
+ height: .8rem;
+ position: absolute;
+ width: .8rem;
+ @screen lg {
+ height: 1rem;
+ width: 1rem;
+ }
+ }
+ &.slick-next {
+ transform: rotate(-45deg);
+ }
+
+ &.slick-prev {
+ transform: rotate(135deg);
+ }
+}
+
.header-carousel {
display: block;
margin: 0 auto;
@@ -114,3 +140,22 @@
}
}
}
+
+.article-carousel {
+ .slick-arrow {
+ right: 10%;
+ @screen lg {
+ right: 0;
+ }
+
+ &:before, &:after {
+ border-color: black;
+ }
+
+ &.slick-disabled {
+ &:before, &:after {
+ border-color: #B3B3B3;
+ }
+ }
+ }
+}
diff --git a/main/styleguide/source/js/components/articles/ArticleCarousel.vue b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
index 997b01a55..b2b80c0b7 100644
--- a/main/styleguide/source/js/components/articles/ArticleCarousel.vue
+++ b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
@@ -1,47 +1,57 @@
<template>
- <div>
- <vue-slick-carousel v-bind="settings">
- <div>
- <div class="flex max-w-md items-start">
- <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
- class="w-16 mr-4">
- <div class="flex flex-col justify-between items-start">
- <span class="text-green-500">23.2.2022</span>
- <h4 class="uppercase">
- Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
- ale skutečná. Jak nenaletět internetovým šmejdům?
- </h4>
- </div>
+ <vue-slick-carousel v-bind="settings" class="article-carousel">
+ <div>
+ <div class="flex max-w-md items-start">
+ <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
+ class="w-16 xl:w-36 mr-4">
+ <div class="flex flex-col justify-between items-start">
+ <span class="text-green-500 mb-2">23.2.2022</span>
+ <h4 class="uppercase mb-2">
+ Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
+ ale skutečná. Jak nenaletět internetovým šmejdům?
+ </h4>
+ <a href="" class="btn btn__slide__wrap ">
+ <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+ <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
+ </a>
</div>
</div>
- <div>
- <div class="flex max-w-md items-start">
- <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
- class="w-16 mr-4">
- <div class="flex flex-col justify-between items-start">
- <span class="text-green-500">23.2.2022</span>
- <h4 class="uppercase">
- Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
- ale skutečná. Jak nenaletět internetovým šmejdům?
- </h4>
- </div>
+ </div>
+ <div>
+ <div class="flex max-w-md items-start">
+ <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
+ class="w-16 xl:w-36 mr-4">
+ <div class="flex flex-col justify-between items-start">
+ <span class="text-green-500 mb-2">23.2.2022</span>
+ <h4 class="uppercase mb-2">
+ Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
+ ale skutečná. Jak nenaletět internetovým šmejdům?
+ </h4>
+ <a href="" class="btn btn__slide__wrap ">
+ <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+ <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
+ </a>
</div>
</div>
- <div>
- <div class="flex max-w-md items-start">
- <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
- class="w-16 mr-4">
- <div class="flex flex-col justify-between items-start">
- <span class="text-green-500">23.2.2022</span>
- <h4 class="uppercase">
- Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
- ale skutečná. Jak nenaletět internetovým šmejdům?
- </h4>
- </div>
+ </div>
+ <div>
+ <div class="flex max-w-md items-start">
+ <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt=""
+ class="w-16 xl:w-36 mr-4">
+ <div class="flex flex-col justify-between items-start">
+ <span class="text-green-500 mb-2">23.2.2022</span>
+ <h4 class="uppercase mb-2">
+ Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
+ ale skutečná. Jak nenaletět internetovým šmejdům?
+ </h4>
+ <a href="" class="btn btn__slide__wrap ">
+ <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+ <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
+ </a>
</div>
</div>
- </vue-slick-carousel>
- </div>
+ </div>
+ </vue-slick-carousel>
</template>
<script>
@@ -54,15 +64,13 @@ export default {
settings: {
"dots": false,
"infinite": false,
- "speed": 500,
"slidesToShow": 3,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 1200,
"settings": {
- "slidesToShow": 1,
- "slidesToScroll": 1
+ "slidesToShow": 1
}
}
]
--
GitLab