Skip to content
Snippets Groups Projects
Commit 6681e52c authored by fanky's avatar fanky
Browse files

program point detail feat. carousel

parent c11b4e30
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 195 additions and 42 deletions
source/_patterns/00-atoms/01-text/breadcrumbs.mustache 0 → 100644
+ 1
− 0
View file @ 6681e52c
<div class="space-x-4"><a class="opacity-30" href="#">HOME</a><a class="opacity-30" href="#">Lorem ipsum dolor</a><a href="#">Shortened title goes her…</a></div>
\ No newline at end of file
source/_patterns/00-atoms/01-text/source.mustache
+ 1
− 1
View file @ 6681e52c
<div id="source{{ sourceNumber }}" class="source leading-loose text-sm">
<div class="inline-block align-top w-9"><a class="text-fxactivecolor hover:no-underline" href="#reference{{ sourceNumber }}{{^ sourceNumber }}42{{/ sourceNumber }}">[{{ sourceNumber }}{{^ sourceNumber }}42{{/ sourceNumber }}]</a></div>
<div class="inline-block align-top">
<div class="inline-block align-top max-w-2xl">
{{# showDescription }}
<p>{{ headline.medium }}</p>
{{/ showDescription }}
......
source/_patterns/01-molecules/24-benefits/benefits-pirati-stan.mustache
+ 2
− 2
View file @ 6681e52c
<div class="benefit">
<img src="https://loremflickr.com/341/175"/>
<div class="benefit-detail bg-acidgreen">
<p class="head-heavy-base text-white w-full pr-8">Mladí a bezdětní včetně studentů</p>
<p class="text-sm text-white">Zachováme svobodný internet pro nastupující generace a zbavíme ho toxicity botů, kteří rozkládají naši společnost.</p>
<p class="head-heavy-base w-full pr-8">Mladí a bezdětní včetně studentů</p>
<p class="text-sm">Zachováme svobodný internet pro nastupující generace a zbavíme ho toxicity botů, kteří rozkládají naši společnost.</p>
</div>
</div>
\ No newline at end of file
source/_patterns/01-molecules/27-carousel/carousel-card-list.mustache 0 → 100644
+ 58
− 0
View file @ 6681e52c
<div class="__js-root">
<ui-app inline-template>
<ui-carousel>
<!--
<carousel :perPage="4" :perPageCustom="[ [200, 1], [768, 3], [1024, 4]]" :navigationEnabled="true" :navigationNextLabel="nextlabel" :navigationPrevLabel="prevlabel" class="article-card-list pt-12 pb-8">-->
<carousel :per-page=1 :navigation-enabled="true" class="article-card-list pb-8">
<slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
</div>
</slide>
<slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
</div>
</slide>
<slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
</div>
</slide><slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
</div>
</slide>
<slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
</div>
</slide>
<slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
</div>
</slide>
</carousel>
</ui-carousel>
</ui-app>
</div>
\ No newline at end of file
source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
+ 24
− 34
View file @ 6681e52c
{{> organisms-navbar-pirati-stan }}
<div class="program-detail container container--default py-8">
<div class="program-detail container container--default pt-4 pb-20">
<div class="w-full md:w-4/6 relative">
{{> molecules-floating-nav-pirati-stan}}
<header class="w-full md:w-5/6">
{{> atoms-breadcrumbs }}
<div class="mt-10 md:mt-12">
<h1 class="head-alt-md md:head-alt-lg head-alt-highlighted">konstruktivní boj <br>proti dezinformacím</h1>
<h2 class="head-alt-sm md:head-alt-md mb-20 mt-9"><div class="leading-tight">Dezinformacím věří až čtvrtina občanů České republiky. Prosadíme větší osvětu a reálnou právní odpovědnost dezinformátorů.</div></h2>
</div>
</header>
......@@ -33,7 +36,7 @@
</div>
<h3 class="head-alt-base mb-4 mt-20">Časový horizont</h3>
<h3 class="head-alt-base mb-8 mt-20">Časový horizont</h3>
{{> atoms-steps-list }}
......@@ -41,22 +44,20 @@
{{> atoms-figure(caption: "Popisek fotky") }}
<h3 class="head-alt-base my-4">BENEFITY</h3>
<h3 class="head-alt-base mb-8 mt-20">BENEFITY</h3>
<div class="program-detail-benefity grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
{{> molecules-benefits-pirati-stan}}
{{> molecules-benefits-pirati-stan}}
{{> molecules-benefits-pirati-stan}}
{{> molecules-benefits-pirati-stan}}
</div>
<h3 class="head-alt-base my-4">BENEFITY</h3>
<div class="article-card-list grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
{{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
{{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
{{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
{{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
{{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
{{> molecules-article-card-pirati-stan(classes: "emphasized-acidgreen") }}
<div class="program-detail-benefity mt-8 grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
{{> atoms-colored-card(cardColor: "acidgreen", classes: "text-black card--hoveractive", bodyClasses: "p-4", title: "Ekonomicky ohrožení" )}}
{{> atoms-colored-card(cardColor: "acidgreen", classes: "text-black card--hoveractive", bodyClasses: "p-4", title: "Ekonomicky ohrožení" )}}
{{> atoms-colored-card(cardColor: "acidgreen", classes: "text-black card--hoveractive", bodyClasses: "p-4", title: "Ekonomicky ohrožení" )}}
{{> atoms-colored-card(cardColor: "acidgreen", classes: "text-black card--hoveractive", bodyClasses: "p-4", title: "Ekonomicky ohrožení" )}}
{{> atoms-colored-card(cardColor: "acidgreen", classes: "text-black card--hoveractive", bodyClasses: "p-4", title: "Ekonomicky ohrožení" )}}
{{> atoms-colored-card(cardColor: "acidgreen", classes: "text-black card--hoveractive", bodyClasses: "p-4", title: "Ekonomicky ohrožení" )}}
</div>
......@@ -66,36 +67,26 @@
<h3 class="head-alt-base mb-4">V dlouhodobém horizontu přinese kriticky smýšlející společnost snížení nákladů, které jsou následkem dezinformací (soudy, veřejné zdraví).</h3>
<h3 class="head-alt-lg mb-20 text-5xl leading-tight mt-24">V dlouhodobém horizontu přinese kriticky smýšlející společnost snížení nákladů, které jsou následkem dezinformací (soudy, veřejné zdraví).</h3>
<h3 class="head-alt-base mb-4">Co už jsme udělali:</h3>
<h3 class="head-alt-base mb-10">Co už jsme udělali:</h3>
<h4 class="mb-4">Profesní vzdělávání učitelů a ředitelů:</h4>
{{> atoms-unordered-list-checks-pirati-stan}}
<h4 class="mb-4">Profesní vzdělávání učitelů a ředitelů:</h4>
{{> atoms-unordered-list-checks-pirati-stan}}
<h3 class="head-alt-base mb-4">FAQ</h3>
<h3 class="head-alt-base mb-8 mt-20">FAQ</h3>
{{> molecules-accordeon }}
<h3 class="head-alt-base mb-4">Související body:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Smart city" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Řízení a organizační struktura města" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Rozvoj města a bydlení" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Doprava" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Veřejný prostor a zeleň" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Vzdělávání" )}}
{{> atoms-colored-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Kultura a volný čas" )}}
</div>
<h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
{{> molecules-carousel }}
<h3 class="head-alt-base mb-4 mt-20">paging bodů</h3>
<h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</h3>
<p><a href="#" class="text-acidgreen underline">Zjistit více</a></p>
<h3 class="head-alt-base mb-4 mt-20">Zdroje:</h3>
<h3 class="head-alt-base mb-8 mt-8">Zdroje:</h3>
{{> atoms-source(sourceNumber: 1) }}
{{> atoms-source(sourceNumber: 2, showDescription: true) }}
......@@ -107,7 +98,6 @@
{{> atoms-source(sourceNumber: 8) }}
{{> atoms-source(sourceNumber: 9) }}
{{> atoms-source(sourceNumber: 10) }}
<h3 class="head-alt-base mt-20 mb-4">Které části jsou závazné</h3>
</div>
</div>
......
source/css/molecules/carousel.pcss 0 → 100644
+ 60
− 0
View file @ 6681e52c
#tha_carousel_cont {
max-width:1224px
}
.VueCarousel-navigation {
display: block;
text-align: left!important;
height: 0;
}
.VueCarousel-pagination {
display:none
}
.VueCarousel-dot-container{
margin-top: 10px!important;
}
.VueCarousel-dot {
border-radius:0!important;
width:24px!important;
height:4px!important;
position:relative;
top:-4px
}
.VueCarousel-slide {
/* padding:0 12px 16px 12px;*/
}
.VueCarousel-navigation-prev {
font-size: 0;
position:absolute!important;
transform:translateY(-78%)!important;
&:after{
font-family: "pirati-ui";
content: "\e924";
font-size:40px
}
}
.VueCarousel-navigation-next {
font-size: 0;
position:absolute!important;
transform:translateY(-78%)!important;
&:after{
font-family: "pirati-ui";
content: "\e923";
font-size:40px
}
}
@screen md{
.VueCarousel-navigation {
display:none;
}
.VueCarousel-pagination {
display: block;
text-align: left!important;
}
}
source/css/style.pcss
+ 1
− 0
View file @ 6681e52c
......@@ -53,6 +53,7 @@
@import "./molecules/candidate-card.pcss";
@import "./molecules/candidate-card-pirati-stan.pcss";
@import "./molecules/candidate-table-row.pcss";
@import "./molecules/carousel.pcss";
@import "./molecules/chips.pcss";
@import "./molecules/content-block.pcss";
@import "./molecules/cta-cards.pcss";
......
source/js/components/Carousel.vue 0 → 100644
+ 46
− 0
View file @ 6681e52c
<template>
<div>
<slot/>
<!--
<div v-on:click="prev">prev</div>
<div v-on:click="next">next</div>
-->
</div>
</template>
<script>
import Vue from 'vue';
import Carousel from 'vue-carousel';
Vue.use(Carousel);
import Slide from 'vue-carousel';
Vue.use(Slide);
export default {
mounted(){
var nextlabel="<i class='ico--chevron-right'></i>";
var prevlabel="<i class='ico--chevron-left'></i>";
},
components: {
'carousel': Carousel,
'slide': Slide
},
methods: {
/* next() {
this.$refs.carousel.handleNavigation()
},
prev() {
this.$refs.carousel.handleNavigation('backward')
}*/
},
props: {
},
data() {
return {
nextlabel: "<i class='ico--chevron-right'></i>",
prevlabel: "<i class='ico--chevron-left'></i>"
}
}
}
</script>
source/js/main.js
+ 2
− 5
View file @ 6681e52c
import Vue from "vue";
import { forEachNode } from "./utils";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
import GoogleProvider from "./components/calendar/GoogleProvider";
......@@ -15,6 +10,7 @@ import Navbar from "./components/navbar/Navbar";
import FooterCollapsible from "./components/footer/FooterCollapsible";
import FlipClock from "./components/FlipClock";
import Ellipsis from './components/Ellipsis';
import Carousel from './components/Carousel';
Vue.component("ui-calendar-renderer", Renderer);
......@@ -27,6 +23,7 @@ Vue.component("ui-navbar", Navbar);
Vue.component("ui-footer-collapsible", FooterCollapsible);
Vue.component("ui-flip-clock", FlipClock);
Vue.component("ui-ellipsis", Ellipsis);
Vue.component("ui-carousel", Carousel);
import UiApp from "./components/UiApp.vue";
......
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