Skip to content
Snippets Groups Projects
Commit 9e722e39 authored by fanky's avatar fanky
Browse files

Floating nav on lg-screens, carousel & detail prog point finishing

parent 6681e52c
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 35 additions and 66 deletions
source/_patterns/00-atoms/04-lists/steps-list.mustache
+ 1
− 1
View file @ 9e722e39
<ol class="ordered-list ordered-list-squared"> <ol class="ordered-list ordered-list-squared">
<li>{{ headline.short }}< <li>{{ headline.short }}
<ul class="unordered-list unordered-list-colored"> <ul class="unordered-list unordered-list-colored">
<li>{{ headline.short }}</li> <li>{{ headline.short }}</li>
<li>{{ headline.short }}</li> <li>{{ headline.short }}</li>
......
source/_patterns/00-atoms/09-cards/colored-card.mustache
+ 1
− 1
View file @ 9e722e39
<div class="card shadow-none bg-{{# cardColor }}{{ cardColor }}{{/ cardColor}}{{^ cardColor}}grey-125{{/ cardColor }} {{ classes }}"> <div class="card shadow-none bg-{{# cardColor }}{{ cardColor }}{{/ cardColor}}{{^ cardColor}}grey-125{{/ cardColor }} {{ classes }}">
<div class="card__body"> <div class="card__body">
<h1 class="card-headline mb-8"><a href="#">{{ title }}{{^ title }}{{ headline.short }}{{/ title }}</a></h1> <h1 class="card-headline mb-8"><a href="#">{{ title }}{{^ title }}{{ headline.short }}{{/ title }}</a></h1>
<p class="card-body-text">{{ excerpt.short }}</p> <p class="card-body-text">{{ description }}</p>
</div> </div>
</div> </div>
source/_patterns/01-molecules/26-floating-nav/floating-nav-pirati-stan.mustache
+ 1
− 1
View file @ 9e722e39
<div class="floating-nav-wrapper" id="floatingNavBarWrapper"> <div class="floating-nav-wrapper hidden lg:block" id="floatingNavBarWrapper">
<div class="floating-nav-panel {{classes}}" id="floatingNavBar"> <div class="floating-nav-panel {{classes}}" id="floatingNavBar">
<div class="opener py-6 pb-16 px-11 bg-acidgreen text-white font-alt"> <div class="opener py-6 pb-16 px-11 bg-acidgreen text-white font-alt">
RYCHLÁ NAVIGACE RYCHLÁ NAVIGACE
......
source/_patterns/01-molecules/27-carousel/carousel-card-list.mustache
+ 10
− 41
View file @ 9e722e39
...@@ -5,50 +5,19 @@ ...@@ -5,50 +5,19 @@
<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 :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"> <carousel :per-page=1 :navigation-enabled="true" class="article-card-list pb-8">
<slide> <slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md: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ů", description: "Short description" )}}
{{> 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ů", description: "Short description" )}}
{{> 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ů", description: "Short description" )}}
{{> 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ů", description: "Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. " )}}
</div> </div>
</slide> </slide>
<slide> <slide>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-2 md: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ů", description: "Short description" )}}
{{> 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ů", description: "Short description" )}}
{{> 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ů", description: "Short description" )}}
{{> 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ů", description: "Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. Long description. " )}}
</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> </div>
</slide> </slide>
</carousel> </carousel>
......
source/_patterns/03-templates/coalition-program-points/detail-program-pirati-stan.mustache
+ 4
− 3
View file @ 9e722e39
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="program-detail container container--default pt-4 pb-20"> <div class="program-detail container container--default pt-4 pb-20">
<div class="w-full md:w-4/6 relative"> <div class="w-full lg:w-4/6 relative">
{{> molecules-floating-nav-pirati-stan}} {{> molecules-floating-nav-pirati-stan}}
<header class="w-full md:w-5/6"> <header class="w-full md:w-5/6">
...@@ -81,8 +81,9 @@ ...@@ -81,8 +81,9 @@
{{> molecules-accordeon }} {{> molecules-accordeon }}
<h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3> <h3 id="relatedpoints" class="head-alt-base mb-8 mt-20">Související body:</h3>
{{> molecules-carousel }} <div class="">
{{> molecules-carousel-card-list }}
</div>
<h3 class="head-alt-base mb-3 mt-20">Které části jsou závazné</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> <p><a href="#" class="text-acidgreen underline">Zjistit více</a></p>
......
source/css/molecules/carousel.pcss
+ 18
− 12
View file @ 9e722e39
...@@ -3,15 +3,12 @@ ...@@ -3,15 +3,12 @@
max-width:1224px max-width:1224px
} }
.VueCarousel-navigation { .VueCarousel-navigation {
display: block;
text-align: left!important; text-align: left!important;
height: 0; height: 0;
} }
.VueCarousel-pagination {
display:none
}
.VueCarousel-dot-container{ .VueCarousel-dot-container{
margin-top: 10px!important; margin-top: 10px!important;
margin-left: 14px!important
} }
.VueCarousel-dot { .VueCarousel-dot {
border-radius:0!important; border-radius:0!important;
...@@ -21,37 +18,46 @@ ...@@ -21,37 +18,46 @@
top:-4px top:-4px
} }
.VueCarousel-slide { .VueCarousel-slide {
/* padding:0 12px 16px 12px;*/ @apply px-6;
} }
.VueCarousel-navigation-prev { .VueCarousel-navigation-prev {
top: calc(50% - 54px)!important; /* minus pagination */
left: -1rem!important;
font-size: 0; font-size: 0;
position:absolute!important; position:absolute!important;
transform:translateY(-78%)!important; transform: translateY(-50%) !important;
padding-left: 0!important;
&:after{ &:after{
font-family: "pirati-ui"; font-family: "pirati-ui";
content: "\e924"; content: "\e924";
font-size:40px font-size:40px
} }
&:focus{
outline: none!important;
}
} }
.VueCarousel-navigation-next { .VueCarousel-navigation-next {
top: calc(50% - 54px)!important; /* minus pagination */
right: -1rem!important;
font-size: 0; font-size: 0;
position:absolute!important; position:absolute!important;
transform:translateY(-78%)!important; transform: translateY(-50%) !important;
padding-right: 0!important;
&:after{ &:after{
font-family: "pirati-ui"; font-family: "pirati-ui";
content: "\e923"; content: "\e923";
font-size:40px font-size:40px
} }
&:focus{
outline: none!important;
}
} }
@screen md{ @screen md{
.VueCarousel-navigation {
display:none;
}
.VueCarousel-pagination { .VueCarousel-pagination {
display: block; display: block;
......
source/css/molecules/floating-nav-pirati-stan.pcss
+ 0
− 7
View file @ 9e722e39
...@@ -45,10 +45,3 @@ ...@@ -45,10 +45,3 @@
.floating-nav-panel.fixed { .floating-nav-panel.fixed {
margin-top: 0; margin-top: 0;
} }
@media only screen and (max-width: 1400px) {
.floating-nav-panel {
display: none;
}
}
\ No newline at end of file
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