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