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

[ADD] some bugs on HP

parent 1c775789
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9297 failed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 187 additions and 139 deletions
main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
+ 4
− 4
View file @ 682f3de8
<div class="flex flex-col mb-5 lg:flex-row lg:mb-10"> <div class="flex flex-wrap mb-5 lg:mb-10">
<img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt="" <img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt=""
class="max-w-xl lg:mr-12"> class="lg:max-w-lg lg:mr-11">
<div class="flex flex-col items-start"> <div class="flex flex-col max-w-xl items-start">
<span class="text-green-500 head-3xl mt-12 mb-4 lg:mb-8">2.3.2022</span> <span class="text-green-500 head-3xl mt-10 mb-4 lg:mb-8">2.3.2022</span>
<h5 class="head-4xl mb-5 lg:mb-10">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska <h5 class="head-4xl mb-5 lg:mb-10">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině</h5> a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině</h5>
<p class="leading-6 mb-4 lg:mb-8"> <p class="leading-6 mb-4 lg:mb-8">
......
main/styleguide/source/_patterns/organisms/articles-section.mustache
+ 2
− 2
View file @ 682f3de8
<div class="mb-32 section-clip py-32 bg-no-repeat" <div class="section-clip mb-8 py-16 bg-no-repeat lg:py-36 lg:mb-16"
style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')"> style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
<div class="container--medium mx-auto px-4"> <div class="container--medium mx-auto px-4">
<h2 class="head-7xl text-center mb-16 pb-4 lg:pb-8"> <h2 class="head-7xl text-center mb-6 xl:mb-28">
Aktuality z paluby Aktuality z paluby
</h2> </h2>
{{> molecules-main-article-preview }} {{> molecules-main-article-preview }}
......
main/styleguide/source/_patterns/organisms/region-section.mustache
+ 2
− 2
View file @ 682f3de8
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
Piráti zastupují občany Piráti zastupují občany
</h2> </h2>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-12/12 flex items-center justify-center lg:w-7/12"> <div class="__js-root w-12/12 flex items-center justify-center lg:w-7/12">
MAPA <ui-region-map class="w-full"></ui-region-map>
</div> </div>
<div class="w-12/12 lg:w-5/12"> <div class="w-12/12 lg:w-5/12">
<div class="flex flex-col justify-center"> <div class="flex flex-col justify-center">
......
main/styleguide/source/_patterns/organisms/representatives-section.mustache
+ 2
− 2
View file @ 682f3de8
<div class="container--medium mb-32"> <div class="container--medium mb-8 lg:mb-16">
<h2 class="head-7xl text-center mb-14 lg:mb-28"> <h2 class="head-7xl text-center mb-6 xl:mb-28">
Piráti zastupují občany Piráti zastupují občany
</h2> </h2>
<div class="flex flex-wrap space-x-1 justify-center items-center"> <div class="flex flex-wrap space-x-1 justify-center items-center">
......
main/styleguide/source/_patterns/organisms/twitter-section.mustache
+ 1
− 1
View file @ 682f3de8
<div class="container--medium mx-auto mb-6 lg:mb-16"> <div class="container--medium mx-auto mb-8 lg:mb-16">
<h2 class="head-7xl text-center mb-6 xl:mb-28"> <h2 class="head-7xl text-center mb-6 xl:mb-28">
Co právě děláme Co právě děláme
</h2> </h2>
......
main/styleguide/source/css/atoms/container.pcss
+ 5
− 1
View file @ 682f3de8
...@@ -18,7 +18,11 @@ ...@@ -18,7 +18,11 @@
} }
.section-clip { .section-clip {
clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0% 100%); clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
@screen xl {
clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
}
} }
.header-max-width { .header-max-width {
......
main/styleguide/source/css/atoms/heading.pcss
+ 7
− 110
View file @ 682f3de8
...@@ -135,6 +135,10 @@ ...@@ -135,6 +135,10 @@
} }
} }
.header-clip { .header-clip {
clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
} }
...@@ -150,11 +154,11 @@ ...@@ -150,11 +154,11 @@
} }
.head-3xl { .head-3xl {
@apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8; @apply text-lg leading-4 uppercase xl:text-3xl xl:leading-8;
} }
.head-4xl { .head-4xl {
@apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10; @apply text-xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10 lg:text-4xl;
} }
.head-7xl { .head-7xl {
...@@ -163,117 +167,10 @@ ...@@ -163,117 +167,10 @@
p { p {
@apply leading-6; @apply text-sm leading-6 lg:text-base;
} }
.vertical-time-line { .vertical-time-line {
border-left: 1px solid green; border-left: 1px solid green;
} }
.header-carousel {
display: block;
margin: 0 auto;
position: relative;
.header-carousel--text {
@apply text-2xl uppercase font-medium lg:text-7xl;
position: absolute;
top: 20%;
left: 10%;
max-width: 1200px;
@screen sm {
top: 35%;
}
@screen lg {
top: 45%;
}
}
img {
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 100%;
transition: all 800ms ease-in-out;
transform: scale(1.15, 1.15);
}
.slick-slide {
clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
}
.slick-active {
img {
transform: scale(1, 1);
}
.header-carousel--text {
animation: right_to_left 500ms ease;
}
}
@keyframes right_to_left {
from {
left: 15%;
}
to {
left: 10%;
}
}
.slick-arrow {
font-size: 0;
position: absolute;
top: 80%;
right: 10%;
z-index: 10;
@screen lg {
top: 60%;
}
&:before, &:after {
color: white;
border-right: 2px solid white;
border-bottom: 2px solid white;
content: '';
position: absolute;
width: .8rem;
height: .8rem;
@screen lg {
width: 1rem;
height: 1rem;
}
}
&.slick-next {
transform: rotate(-45deg);
}
&.slick-prev {
transform: rotate(135deg);
}
}
.slick-dots {
position: absolute;
left: 5%;
color: white;
top: 60%;
z-index: 10;
li {
height: 6px;
width: 6px;
margin-bottom: 6px;
border: 1px solid white;
border-radius: 50%;
&.slick-active {
background-color: white;
}
button {
font-size: 0;
}
}
}
}
main/styleguide/source/css/molecules/carousels.pcss 0 → 100644
+ 112
− 0
View file @ 682f3de8
.header-carousel {
display: block;
margin: 0 auto;
position: relative;
.header-carousel--text {
@apply text-2xl uppercase font-medium lg:text-7xl;
left: 10%;
max-width: 1200px;
position: absolute;
top: 20%;
@screen sm {
top: 35%;
}
@screen lg {
top: 45%;
}
}
img {
bottom: 0;
left: 0;
right: 0;
top: 0;
transition: all 800ms ease-in-out;
transform: scale(1.15, 1.15);
width: 100%;
}
.slick-slide {
clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
}
.slick-active {
img {
transform: scale(1, 1);
}
.header-carousel--text {
animation: right_to_left 500ms ease;
}
}
@keyframes right_to_left {
from {
left: 15%;
}
to {
left: 10%;
}
}
.slick-arrow {
font-size: 0;
position: absolute;
right: 10%;
top: 80%;
z-index: 10;
@screen lg {
top: 60%;
}
&:before, &:after {
border-right: 2px solid white;
border-bottom: 2px solid white;
color: white;
content: '';
height: .8rem;
position: absolute;
width: .8rem;
@screen lg {
height: 1rem;
width: 1rem;
}
}
&.slick-next {
transform: rotate(-45deg);
}
&.slick-prev {
transform: rotate(135deg);
}
}
.slick-dots {
color: white;
left: 5%;
position: absolute;
top: 60%;
z-index: 10;
li {
border: 1px solid white;
border-radius: 50%;
height: 6px;
margin-bottom: 6px;
width: 6px;
&.slick-active {
background-color: white;
}
button {
font-size: 0;
}
}
}
}
main/styleguide/source/css/style.pcss
+ 1
− 0
View file @ 682f3de8
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
@import "./atoms/heading.pcss"; @import "./atoms/heading.pcss";
@import "./atoms/icons.pcss"; @import "./atoms/icons.pcss";
@import "molecules/carousels.pcss";
@import "./molecules/contact_box.pcss"; @import "./molecules/contact_box.pcss";
@import "./molecules/sliding_button.pcss"; @import "./molecules/sliding_button.pcss";
@import "./molecules/switch.pcss"; @import "./molecules/switch.pcss";
......
main/styleguide/source/js/components/RegionMap.vue
+ 1
− 9
View file @ 682f3de8
<template> <template>
<div class="region-map flex justify-start items-center space-x-16 "> <div class="region-map flex justify-start items-center space-x-16 ">
<div class=""> <div class="w-full max-w-xl">
<h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
<ul class="region-map__list leading-loose whitespace-no-wrap text-sm">
<li v-for="region in regions" :key="region.id">
<a href="#" @click="selectRegion(region)" @mouseover="current = region" @mouseout="current = null">{{ region.name }}</a>
</li>
</ul>
</div>
<div class="w-full max-w-xl hidden md:block">
<svg <svg
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
......
main/styleguide/source/js/components/articles/ArticleCarousel.vue
+ 50
− 8
View file @ 682f3de8
<template> <template>
<div> <div>
<vue-slick-carousel v-bind="settings"> <vue-slick-carousel v-bind="settings">
<div class="flex max-w-md"> <div>
<img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" class="mr-4"> <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>
<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>
<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"> <div class="flex flex-col justify-between items-start">
<span class="text-green-500">23.2.2022</span> <span class="text-green-500">23.2.2022</span>
<h4 class="uppercase"> <h4 class="uppercase">
...@@ -11,6 +39,7 @@ ...@@ -11,6 +39,7 @@
</h4> </h4>
</div> </div>
</div> </div>
</div>
</vue-slick-carousel> </vue-slick-carousel>
</div> </div>
</template> </template>
...@@ -24,6 +53,19 @@ export default { ...@@ -24,6 +53,19 @@ export default {
data: () => ({ data: () => ({
settings: { settings: {
"dots": false, "dots": false,
"infinite": false,
"speed": 500,
"slidesToShow": 3,
"slidesToScroll": 1,
"responsive": [
{
"breakpoint": 1200,
"settings": {
"slidesToShow": 1,
"slidesToScroll": 1
}
}
]
} }
}) })
} }
......
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