Skip to content
Snippets Groups Projects
Commit c2a045be authored by Štěpán Farka's avatar Štěpán Farka
Browse files

[ADD] make carousels as slots

parent 22755ceb
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Show whitespace changes
Inline Side-by-side
main/styleguide/source/_patterns/organisms/articles-section.mustache
+ 53
− 1
View file @ c2a045be
...@@ -6,7 +6,59 @@ ...@@ -6,7 +6,59 @@
</h2> </h2>
{{> molecules-main-article-preview }} {{> molecules-main-article-preview }}
<div class="__js-root"> <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> </div>
</div> </div>
main/styleguide/source/_patterns/templates/homepage.mustache
+ 41
− 1
View file @ c2a045be
...@@ -2,7 +2,47 @@ ...@@ -2,7 +2,47 @@
<main role="main"> <main role="main">
<div class="__js-root"> <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> </div>
{{> organisms-twitter-section }} {{> organisms-twitter-section }}
{{> organisms-articles-section }} {{> organisms-articles-section }}
......
main/styleguide/source/js/components/articles/ArticleCarousel.vue
+ 1
− 51
View file @ c2a045be
<template> <template>
<vue-slick-carousel v-bind="settings" class="article-carousel"> <vue-slick-carousel v-bind="settings" class="article-carousel">
<div> <slot></slot>
<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>
</vue-slick-carousel> </vue-slick-carousel>
</template> </template>
......
main/styleguide/source/js/components/header/HeaderCarousel.vue
+ 2
− 61
View file @ c2a045be
<template> <template>
<div class="header-carousel mb-8 xl:mb-32"> <div class="header-carousel mb-8 xl:mb-32">
<vue-slick-carousel v-bind="settings"> <vue-slick-carousel v-bind="settings">
<div class="xl:h-screen relative"> <slot>
<img src="https://unsplash.it/792/387?image=4" draggable="false"> </slot>
<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&#45;&#45;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>-->
</vue-slick-carousel> </vue-slick-carousel>
</div> </div>
</template> </template>
...@@ -69,9 +13,6 @@ import VueSlickCarousel from 'vue-slick-carousel' ...@@ -69,9 +13,6 @@ import VueSlickCarousel from 'vue-slick-carousel'
export default { export default {
components: {VueSlickCarousel}, components: {VueSlickCarousel},
name: 'HeaderCarousel', name: 'HeaderCarousel',
created() {
console.log('test')
},
data: () => ({ data: () => ({
settings: { settings: {
"fade": true, "fade": true,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft