diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache
index eb2161160568e398cefd182263144b68f5010a8b..9092b4a218be6c5b158e3b23718d8bf263414b38 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 ffd89a756bd1a214ee80677dc40989e55c36b0f3..2494575245e965ef959bd190cf9b8971c05a07f2 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 997b01a55d1bd3693367068539122470c1505bf0..b2b80c0b77cec5a4c23783dac49d62753c55a917 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
}
}
]