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

[ADD] final footer

parent 9625c3c2
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9431 passed
Stage: build
Show 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 @ b7bb7dc3
<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 @ b7bb7dc3
<footer class="bg-black footer-clip text-white pt-12"> <footer class="footer footer-clip bg-black text-white __js-root">
<div class="footer__container sm:mt-0"> <ui-app inline-template>
<div class="flex flex-wrap justify-center font-alt mb-10 md:justify-end md:text-right text-2xl"> <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 Zůstaňte s námi v konaktu
</div> </div>
<div class="flex flex-col mb-16 ml-5 justify-center sm:justify-end sm:text-right sm:flex-row"> <div
<div class="mb-2 sm:mb-0"> class="flex flex-col space-y-2 lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-4">
<a href="" class="sm:ml-8"> <a href="" class="flex items-center hover:no-underline">
<i class="ico--facebook mr-1"></i> <i class="ico--facebook mr-1"></i>
@ceska.piratska.strana <span class="text-sm">@ceska.piratska.strana</span>
</a> </a>
</div> <a href="" class="flex items-center hover:no-underline">
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--twitter mr-1"></i> <i class="ico--twitter mr-1"></i>
#piratskastrana <span class="text-sm">#piratskastrana</span>
</a> </a>
</div> <a href="" class="flex items-center hover:no-underline">
<div class="mb-2 sm:mb-0">
<a href="" class="sm:ml-8">
<i class="ico--instagram mr-1"></i> <i class="ico--instagram mr-1"></i>
@pirati.cz <span class="text-sm">@pirati.cz</span>
</a> </a>
</div> <a href="" class="flex items-center hover:no-underline">
<div>
<a href="" class="sm:ml-8">
<i class="ico--youtube mr-1"></i> <i class="ico--youtube mr-1"></i>
pirati.cz <span class="text-sm">pirati.cz</span>
</a> </a>
</div> </div>
</div> </section>
<div class="flex flex-wrap mb-16 w-full sm:justify-center"> <section class="footer__main-links text-white lg:flex lg:justify-between gap-8">
<div class="mb-8 md:mb-0"> <div class="pt-8 pb-4 lg:py-0">
<h6 class="font-alt text-2xl mb-6 sm:mb-12"> <ui-footer-collapsible label="Navigace">
Navigace <ul class="text-white py-8 space-y-4 xl:space-y-8">
</h6> <li>
<div class="grid grid-flow-col grid-rows-6 max-h-60"> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Jak pracujeme <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Program <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé </ul>
</a> </ui-footer-collapsible>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </div>
Lidé <div class="py-4 lg:py-0">
</a> <ui-footer-collapsible label="Transparence">
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <ul class="text-white py-8 space-y-4 xl:space-y-8">
Lidé <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé <li>
</a> <a href="#">Lorem ipsum</a>
</div> </li>
</div> <li>
<div class="mb-8 md:mb-0"> <a href="#">Lorem ipsum</a>
<h6 class="font-alt text-2xl mb-6 sm:mb-12"> </li>
Transparance </ul>
</h6> </ui-footer-collapsible>
<div class="grid grid-flow-col grid-rows-6 max-h-60"> </div>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <div class="py-4 lg:py-0">
Jak pracujeme <ui-footer-collapsible label="osobní stránky">
</a> <ul class="text-white py-8 space-y-4 xl:space-y-8">
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <li>
Program <a href="#">Lorem ipsum</a>
</a> </li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <li>
Lidé <a href="#">Lorem ipsum</a>
</a> </li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <li>
Lidé <a href="#">Lorem ipsum</a>
</a> </li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </ul>
Lidé </ui-footer-collapsible>
</a> </div>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <div class="py-4 lg:py-0">
Lidé <ui-footer-collapsible label="další projekty">
</a> <ul class="text-white py-8 space-y-4 xl:space-y-8 xl:columns-3">
</div> <li class="mr-16">
</div> <a href="#">Lorem ipsum</a>
<div class="mb-8 md:mb-0"> </li>
<h6 class="font-alt text-2xl mb-6 sm:mb-12"> <li>
Osobní stránky <a href="#">Lorem ipsum</a>
</h6> </li>
<div class="grid grid-flow-col grid-rows-6 max-h-60"> <li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <a href="#">Lorem ipsum</a>
olgarichterova.cz </li>
</a> <li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <a href="#">Lorem ipsum</a>
gregorova.eu </li>
</a> <li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <a href="#">Lorem ipsum</a>
mikulas-peksa.eu </li>
</a> <li>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <a href="#">Lorem ipsum</a>
kolaja.eu </li>
</a> <li>
</div> <a href="#">Lorem ipsum</a>
</div> </li>
<div class="flex flex-col mb-6 md:mb-0"> <li>
<h6 class="font-alt text-2xl mb-6 sm:mb-12"> <a href="#">Lorem ipsum</a>
Další projekty </li>
</h6> <li>
<div class="flex flex-col sm:grid sm:grid-flow-col sm:grid-rows-6 sm:max-h-60"> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Jak pracujeme <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Program <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
budoucnostresimeted.cz <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé <li>
</a> <a href="#">Lorem ipsum</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé </ul>
</a> </ui-footer-collapsible>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </div>
Jak pracujeme <div class="pt-4 lg:py-0">
</a> <ui-footer-collapsible label="média">
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <ul class="text-white py-8 space-y-4 xl:space-y-8">
Program <li>
</a> <a href="#">Foto</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé <li>
</a> <a href="#">Video</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé <li>
</a> <a href="#">Newsletter</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé <li>
</a> <a href="#">Grafika</a>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </li>
Lidé </ul>
</a> </ui-footer-collapsible>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </div>
Jak pracujeme </section>
</a> </div>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <section class="bg-black py-8 xl:pb-36">
Program <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
</a> <div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0">
<a class="cursor-pointer hover:no-underline mb-5 w-48"> {{> molecules-footer-person-contact }}
Lidé {{> molecules-footer-person-contact }}
</a> </div>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> <div class="max-w-xs">
Lidé <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>
</a> </div>
<a class="cursor-pointer hover:no-underline mb-5 w-48"> </div>
voda.pirati.cz </section>
</a> </div>
</div> </ui-app>
</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">
</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>
</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">
</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>
</div>
</div>
</div>
</div>
</footer> </footer>
main/styleguide/source/css/atoms/container.pcss
+ 2
− 1
View file @ b7bb7dc3
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
} }
.container--wide { .container--wide {
@apply px-5;
margin: auto; margin: auto;
max-width: 1400px; max-width: 1400px;
} }
...@@ -33,7 +34,7 @@ ...@@ -33,7 +34,7 @@
} }
.container { .container {
@apply: mx-auto; @apply mx-auto px-4;
max-width: 1150px; max-width: 1150px;
} }
......
main/styleguide/source/css/organisms/footer.pcss
+ 44
− 6
View file @ b7bb7dc3
...@@ -6,10 +6,48 @@ ...@@ -6,10 +6,48 @@
} }
} }
.footer__container { .footer__main {
/* TODO user common container from container.pcss */ @apply grid;
margin-left: auto; grid-template-areas:
margin-right: auto; "brand"
max-width: 1416px; "social"
padding: 2rem; "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 @ b7bb7dc3
<template> <template>
<div :class="[wrapperclass, 'footer-collapsible']"> <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]"> <div v-show="show || isLgScreenSize" :class="[slotwrapperclass]">
<slot> <slot>
</slot> </slot>
......
main/styleguide/tailwind.config.js
+ 1
− 0
View file @ b7bb7dc3
...@@ -76,6 +76,7 @@ module.exports = { ...@@ -76,6 +76,7 @@ module.exports = {
'150': '#ECECEC', '150': '#ECECEC',
'200': '#ADADAD', '200': '#ADADAD',
'300': '#4c4c4c', '300': '#4c4c4c',
'350': '#4F4F4F',
'400': '#343434', '400': '#343434',
'500': '#303132', '500': '#303132',
'600': '#262626', '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