Skip to content
Snippets Groups Projects
Commit 2d9910c8 authored by OndraPetrzilka's avatar OndraPetrzilka
Browse files

Merge branch 'feature/pirati-cz' into feature/pirati-cz-ondra

parents 12da933e a0f3d95e
No related branches found
No related tags found
3 merge requests!607Pirati.cz,!589Feature/pirati cz ondra,!575Feature/pirati cz
Pipeline #9434 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 224 additions and 228 deletions
main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache 0 → 100644
+ 20
− 0
View file @ 2d9910c8
<div class="flex space-x-2 mb-4 xl:mb-0">
<div class="mr-5">
<img class="rounded-full shadow-sm w-16 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
alt="user image">
</div>
<div class="flex flex-col leading-6">
<h6 class="font-alt text-xl text-uppercase">
Veronika Šmídová
</h6>
<strong class="font-bold text-sm text-grey-300">
Tisková mluvčí
</strong>
<span>
+420 778 111 466
</span>
<span class="text-turquoise-500 text-sm">
veronika.smidova@pirati.cz
</span>
</div>
</div>
main/styleguide/source/_patterns/organisms/footer.mustache
+ 156
− 220
View file @ 2d9910c8
<footer class="bg-black footer-clip text-white pt-12">
<div class="footer__container sm:mt-0">
<div class="flex flex-wrap justify-center font-alt mb-10 md:justify-end md:text-right text-2xl">
Zůstaňte s námi v konaktu
</div>
<div class="flex flex-col mb-16 ml-5 justify-center sm:justify-end sm:text-right sm:flex-row">
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--facebook mr-1"></i>
@ceska.piratska.strana
</a>
</div>
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--twitter mr-1"></i>
#piratskastrana
</a>
</div>
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--instagram mr-1"></i>
@pirati.cz
</a>
</div>
<div>
<a href="" class="sm:ml-8">
<i class="ico--youtube mr-1"></i>
pirati.cz
</a>
</div>
</div>
<div class="flex flex-wrap mb-16 w-full sm:justify-center">
<div class="mb-8 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Navigace
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
</div>
</div>
<div class="mb-8 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Transparance
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
</div>
</div>
<div class="mb-8 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Osobní stránky
</h6>
<div class="grid grid-flow-col grid-rows-6 max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
olgarichterova.cz
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
gregorova.eu
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
mikulas-peksa.eu
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
kolaja.eu
</a>
</div>
</div>
<div class="flex flex-col mb-6 md:mb-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12">
Další projekty
</h6>
<div class="flex flex-col sm:grid sm:grid-flow-col sm:grid-rows-6 sm:max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
budoucnostresimeted.cz
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
voda.pirati.cz
</a>
</div>
</div>
<div>
<h6 class="font-alt text-2xl mb-8 md:mb-12">
Média
</h6>
<div class="flex flex-col flex-wrap max-h-60">
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Foto
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Video
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Newsletter
</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48">
Grafika
</a>
</div>
</div>
</div>
<div class="flex flex-wrap items-end pb-2">
<div class="text-grey-300 w-full mb-10 lg:mb-0 lg:w-1/2">
&copy; Piráti 2022. Všechna práva vyhlazena.<br>
Sdílejte a nechte ostatní sdílet za stejných podmínek.
</div>
<div class="flex flex-col justify-end-full sm:flex-row lg:w-1/2">
<div class="flex ml-4 mb-10 sm:mb-0">
<div class="mr-5">
<img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
<footer class="footer footer-clip bg-black text-white __js-root">
<ui-app inline-template>
<div>
<div class="footer__main py-4 lg:py-16 container--wide">
<section class="footer__brand">
<img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
alt=""
class="w-32 md:w-40 pb-6"
/>
</section>
<section class="footer__social lg:text-right lg:mb-10">
<div class="font-alt text-2xl mb-4">
Zůstaňte s námi v konaktu
</div>
<div class="flex flex-col leading-6">
<h6 class="font-alt text-2xl text-uppercase">
Veronika Šmídová
</h6>
<strong class="font-bold mb-1 text-grey-300">
Tisková mluvčí
</strong>
<span>
+420 778 111 466
</span>
<span class="text-turquoise-500">
veronika.smidova@pirati.cz
</span>
<div
class="flex flex-col space-y-2 lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-4">
<a href="" class="flex items-center hover:no-underline">
<i class="ico--facebook mr-1"></i>
<span class="text-sm">@ceska.piratska.strana</span>
</a>
<a href="" class="flex items-center hover:no-underline">
<i class="ico--twitter mr-1"></i>
<span class="text-sm">#piratskastrana</span>
</a>
<a href="" class="flex items-center hover:no-underline">
<i class="ico--instagram mr-1"></i>
<span class="text-sm">@pirati.cz</span>
</a>
<a href="" class="flex items-center hover:no-underline">
<i class="ico--youtube mr-1"></i>
<span class="text-sm">pirati.cz</span>
</a>
</div>
</div>
<div class="flex ml-4">
<div class="mr-5">
<img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
</section>
<section class="footer__main-links text-white lg:flex lg:justify-between gap-8">
<div class="pt-8 pb-4 lg:py-0">
<ui-footer-collapsible label="Navigace">
<ul class="text-white py-8 space-y-4 xl:space-y-8">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</ui-footer-collapsible>
</div>
<div class="flex flex-col leading-6">
<h6 class="font-alt text-2xl text-uppercase">
Veronika Šmídová
</h6>
<strong class="font-bold mb-1 text-grey-300">
Tisková mluvčí
</strong>
<span>
+420 778 111 466
</span>
<span class="text-turquoise-500">
veronika.smidova@pirati.cz
</span>
<div class="py-4 lg:py-0">
<ui-footer-collapsible label="Transparence">
<ul class="text-white py-8 space-y-4 xl:space-y-8">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</ui-footer-collapsible>
</div>
</div>
<div class="py-4 lg:py-0">
<ui-footer-collapsible label="osobní stránky">
<ul class="text-white py-8 space-y-4 xl:space-y-8">
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</ui-footer-collapsible>
</div>
<div class="py-4 lg:py-0">
<ui-footer-collapsible label="další projekty">
<ul class="text-white py-8 space-y-4 xl:space-y-8 columns-2 xl:columns-3">
<li class="mr-16">
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
<li>
<a href="#">Lorem ipsum</a>
</li>
</ul>
</ui-footer-collapsible>
</div>
<div class="pt-4 lg:py-0">
<ui-footer-collapsible label="média">
<ul class="text-white py-8 space-y-4 xl:space-y-8">
<li>
<a href="#">Foto</a>
</li>
<li>
<a href="#">Video</a>
</li>
<li>
<a href="#">Newsletter</a>
</li>
<li>
<a href="#">Grafika</a>
</li>
</ul>
</ui-footer-collapsible>
</div>
</section>
</div>
<section class="bg-black py-8 xl:pb-36">
<div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
<div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0">
{{> molecules-footer-person-contact }}
{{> molecules-footer-person-contact }}
</div>
<div class="max-w-xs">
<span class="text-xs text-grey-350 ">© Piráti, 2022. Všechna práva vyhlazena. Sdílejte a nechte ostatní sdílet za stejných podmínek</span>
</div>
</div>
</section>
</div>
</div>
</ui-app>
</footer>
main/styleguide/source/css/atoms/container.pcss
+ 2
− 1
View file @ 2d9910c8
......@@ -14,6 +14,7 @@
}
.container--wide {
@apply px-5;
margin: auto;
max-width: 1400px;
}
......@@ -33,7 +34,7 @@
}
.container {
@apply: mx-auto;
@apply mx-auto px-4;
max-width: 1150px;
}
......
main/styleguide/source/css/organisms/footer.pcss
+ 44
− 6
View file @ 2d9910c8
......@@ -6,10 +6,48 @@
}
}
.footer__container {
/* TODO user common container from container.pcss */
margin-left: auto;
margin-right: auto;
max-width: 1416px;
padding: 2rem;
.footer__main {
@apply grid;
grid-template-areas:
"brand"
"social"
"main-links";
}
.footer__brand {
grid-area: brand;
}
.footer__social {
grid-area: social;
}
.footer__main-links {
grid-area: main-links;
.footer__main--link {
@apply mt-6 w-fit xl:mr-2
}
}
.footer-collapsible__toggle {
@apply flex items-center cursor-pointer;
&:after {
content: "\e925";
font-family: "pirati-ui";
@apply ml-auto font-light text-2xl transition duration-200;
}
&.footer-collapsible__toggle--open:after {
transform: rotate(-180deg);
}
@screen lg {
&:after {
@apply hidden;
@apply cursor-auto;
}
}
}
main/styleguide/source/js/components/footer/FooterCollapsible.vue
+ 1
− 1
View file @ 2d9910c8
<template>
<div :class="[wrapperclass, 'footer-collapsible']">
<span class="text-xl uppercase text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
<span class="text-xl font-alt uppercase tracking-wide text-white footer-collapsible__toggle" :class="[labelclass, show ? 'footer-collapsible__toggle--open' : '']" @click="handleClick">{{ label }}</span>
<div v-show="show || isLgScreenSize" :class="[slotwrapperclass]">
<slot>
</slot>
......
main/styleguide/tailwind.config.js
+ 1
− 0
View file @ 2d9910c8
......@@ -76,6 +76,7 @@ module.exports = {
'150': '#ECECEC',
'200': '#ADADAD',
'300': '#4c4c4c',
'350': '#4F4F4F',
'400': '#343434',
'500': '#303132',
'600': '#262626',
......
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