diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache index 9092b4a218be6c5b158e3b23718d8bf263414b38..2964214dbd80d0d5b5c6fdaa2fc3485ebf05ceb1 100644 --- a/main/styleguide/source/_patterns/organisms/articles-section.mustache +++ b/main/styleguide/source/_patterns/organisms/articles-section.mustache @@ -6,7 +6,59 @@ </h2> {{> molecules-main-article-preview }} <div class="__js-root"> - <ui-article-carousel></ui-article-carousel> + <ui-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> + <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> + <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> + </ui-article-carousel> </div> </div> </div> diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache index 398d05afa4559ef71ebf1d713a4a6b92ef0362bc..dc0b7349c2f82af05de79e4043bc2358beee71d1 100644 --- a/main/styleguide/source/_patterns/templates/homepage.mustache +++ b/main/styleguide/source/_patterns/templates/homepage.mustache @@ -2,7 +2,47 @@ <main role="main"> <div class="__js-root"> - <ui-header-carousel></ui-header-carousel> + <ui-header-carousel> + <div class="xl:h-screen relative"> + <img src="https://unsplash.it/792/387?image=4" draggable="false"> + <div class="header-carousel--text grid-container"> + <div class="grid-content-with-right-side"> + <h1 class="text-white">72% domácností bylo</h1> + <h1 class="text-orange-250">násilně digitalizováno</h1> + <a href="" class="btn btn__slide__wrap "> + <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span> + <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span> + </a> + </div> + </div> + </div> + <div class="xl:h-screen relative"> + <img src="https://unsplash.it/792/387?image=4" draggable="false"> + <div class="header-carousel--text grid-container"> + <div class="grid-content-with-right-side"> + <h1 class="text-white">72% domácností bylo</h1> + <h1 class="text-orange-250">násilně digitalizováno</h1> + <a href="" class="btn btn__slide__wrap "> + <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span> + <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span> + </a> + </div> + </div> + </div> + <div class="xl:h-screen relative"> + <img src="https://unsplash.it/792/387?image=4" draggable="false"> + <div class="header-carousel--text grid-container"> + <div class="grid-content-with-right-side"> + <h1 class="text-white">72% domácností33 bylo</h1> + <h1 class="text-orange-250">násilně digitalizováno</h1> + <a href="" class="btn btn__slide__wrap "> + <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span> + <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span> + </a> + </div> + </div> + </div> + </ui-header-carousel> </div> {{> organisms-twitter-section }} {{> organisms-articles-section }} diff --git a/main/styleguide/source/js/components/articles/ArticleCarousel.vue b/main/styleguide/source/js/components/articles/ArticleCarousel.vue index b2b80c0b77cec5a4c23783dac49d62753c55a917..5c4ba2ba61675f751723c9b473e693206d60be46 100644 --- a/main/styleguide/source/js/components/articles/ArticleCarousel.vue +++ b/main/styleguide/source/js/components/articles/ArticleCarousel.vue @@ -1,56 +1,6 @@ <template> <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> - <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> - <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> + <slot></slot> </vue-slick-carousel> </template> diff --git a/main/styleguide/source/js/components/header/HeaderCarousel.vue b/main/styleguide/source/js/components/header/HeaderCarousel.vue index 0a2f742ce0aa8873cdda6a27c062f4fda53a90d4..c431c54e4721a4874d72e733a898a1cd62b928c0 100644 --- a/main/styleguide/source/js/components/header/HeaderCarousel.vue +++ b/main/styleguide/source/js/components/header/HeaderCarousel.vue @@ -1,64 +1,8 @@ <template> <div class="header-carousel mb-8 xl:mb-32"> <vue-slick-carousel v-bind="settings"> - <div class="xl:h-screen relative"> - <img src="https://unsplash.it/792/387?image=4" draggable="false"> - <div class="header-carousel--text grid-container"> - <div class="grid-content-with-right-side"> - <h1 class="text-white">72% domácností bylo</h1> - <h1 class="text-orange-250">násilně digitalizováno</h1> - <a href="" class="btn btn__slide__wrap "> - <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span> - <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span> - </a> - </div> - </div> - </div> - <div class="xl:h-screen relative"> - <img src="https://unsplash.it/792/387?image=4" draggable="false"> - <div class="header-carousel--text grid-container"> - <div class="grid-content-with-right-side"> - <h1 class="text-white">72% domácností bylo</h1> - <h1 class="text-orange-250">násilně digitalizováno</h1> - <a href="" class="btn btn__slide__wrap "> - <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span> - <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span> - </a> - </div> - </div> - </div> - <div class="xl:h-screen relative"> - <img src="https://unsplash.it/792/387?image=4" draggable="false"> - <div class="header-carousel--text grid-container"> - <div class="grid-content-with-right-side"> - <h1 class="text-white">72% domácností33 bylo</h1> - <h1 class="text-orange-250">násilně digitalizováno</h1> - <a href="" class="btn btn__slide__wrap "> - <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span> - <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span> - </a> - </div> - </div> - </div> -<!-- <div class="xl:h-screen relative">--> -<!-- <img src="https://unsplash.it/792/387?image=1" draggable="false">--> -<!-- <div class="header-carousel--text">--> -<!-- <h1 class="text-white">72% domácností bylo</h1>--> -<!-- <h1 class="text-orange-250">násilně digitalizováno</h1>--> -<!-- </div>--> -<!-- </div>--> - <!-- <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">--> - <!-- <div class="container">--> - <!-- <h1 class="head-8xl">72% domácností bylo</h1>--> - <!-- <h1 class="head-8xl">násilně digitalizováno</h1>--> - <!-- </div>--> - <!-- </div>--> - <!-- <div class="homepage-item" style="background: url('https://placeimg.com/1920/1080/any?1') no-repeat center / cover">--> - <!-- <div class="container">--> - <!-- <h1 class="head-8xl">72% domácností bylo</h1>--> - <!-- <h1 class="head-8xl">násilně digitalizováno</h1>--> - <!-- </div>--> - <!-- </div>--> + <slot> + </slot> </vue-slick-carousel> </div> </template> @@ -69,9 +13,6 @@ import VueSlickCarousel from 'vue-slick-carousel' export default { components: {VueSlickCarousel}, name: 'HeaderCarousel', - created() { - console.log('test') - }, data: () => ({ settings: { "fade": true,