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

[ADD] representatives section

parent 984dbbdd
Branches
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9288 failed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 75 additions and 70 deletions
main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
+ 5
− 5
View file @ 7f43ffea
<div class="flex flex-col md:flex-row mb-10">
<div class="flex flex-col mb-5 lg:flex-row lg:mb-10">
<img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt=""
class="md:mr-12">
class="max-w-xl lg:mr-12">
<div class="flex flex-col items-start">
<span class="text-green-500 text-3xl mt-12 mb-8">2.3.2022</span>
<h5 class="uppercase mb-10 h-allcaps head-alt-md ">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
<span class="text-green-500 head-3xl mt-12 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
a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině</h5>
<p class="leading-6 mb-8">
<p class="leading-6 mb-4 lg:mb-8">
Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z
prostředků rozpočtu České republiky.
Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných
......
main/styleguide/source/_patterns/molecules/representative-box.mustache 0 → 100644
+ 12
− 0
View file @ 7f43ffea
<div class="w-full max-w-xs mb-1 w-80 h-80 flex flex-col items-center justify-center"
style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
<h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
main/styleguide/source/_patterns/organisms/articles-section.mustache
+ 5
− 5
View file @ 7f43ffea
<div class="mb-32 section-clip py-32 bg-no-repeat"
style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
<div class="container--wide mx-auto px-4 ">
<h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
<div class="container--medium mx-auto px-4">
<h2 class="head-7xl text-center mb-16 pb-4 lg:pb-8">
Aktuality z paluby
</h2>
{{> molecules-main-article-preview }}
<div class="flex w-11/12">
{{> molecules-small-article-preview }}
{{> molecules-small-article-preview }}
{{> molecules-small-article-preview }}
<div class="__js-root">
<ui-article-carousel></ui-article-carousel>
</div>
</div>
</div>
</div>
main/styleguide/source/_patterns/organisms/representatives-section.mustache 0 → 100644
+ 11
− 0
View file @ 7f43ffea
<div class="container--medium mb-32">
<h2 class="head-7xl text-center mb-14 lg:mb-28">
Piráti zastupují občany
</h2>
<div class="flex flex-wrap space-x-1 justify-center items-center">
{{> molecules-representative-box }}
{{> molecules-representative-box }}
{{> molecules-representative-box }}
{{> molecules-representative-box }}
</div>
</div>
main/styleguide/source/_patterns/organisms/twitter-section.mustache
+ 1
− 1
View file @ 7f43ffea
<div class="container--medium mx-auto pt-8 lg:py-16 mb-16">
<h2 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
<h2 class="head-7xl text-center pb-4 lg:pb-8">
Co právě děláme
</h2>
<div class="mb-8 flex flex-wrap justify-center">
......
main/styleguide/source/_patterns/templates/homepage.mustache
+ 1
− 55
View file @ 7f43ffea
......@@ -6,61 +6,7 @@
</div>
{{> organisms-twitter-section }}
{{> organisms-articles-section }}
<div class="container--wide mx-auto px-4 mb-32">
<h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
Piráti zastupují občany
</h2>
<div class="flex flex-col md:flex-row justify-center items-center">
<div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
<h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
<div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
<h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
<div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
<h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
<div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
<h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
<a href="" class="btn btn__slide__wrap w-32 mt-">
<span class="btn bg-black text-white w-32">
Poslanecký klub
</span>
<span class="btn bg-white text-black w-32">
Poslanecký klub
</span>
</a>
</div>
</div>
</div>
{{> organisms-representatives-section }}
{{> organisms-region-section }}
{{> organisms-newsletter-section }}
......
main/styleguide/source/css/atoms/container.pcss
+ 1
− 1
View file @ 7f43ffea
......@@ -9,7 +9,7 @@
.container--medium {
margin: auto;
max-width: 1280px;
max-width: 1300px;
}
.container--wide {
......
main/styleguide/source/css/atoms/heading.pcss
+ 7
− 3
View file @ 7f43ffea
......@@ -149,12 +149,16 @@
@apply text-2xl font-bold leading-8 uppercase
}
.head-3xl {
@apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8;
}
.head-4xl {
@apply text-4xl font-bold leading-10 uppercase mb-5;
@apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10;
}
.head-8xl {
@apply text-7xl font-bold uppercase;
.head-7xl {
@apply text-3xl font-bold uppercase lg:text-7xl;
}
......
main/styleguide/source/js/components/articles/ArticleCarousel.vue 0 → 100644
+ 30
− 0
View file @ 7f43ffea
<template>
<div>
<vue-slick-carousel v-bind="settings">
<div class="flex max-w-md">
<img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" class="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>
</vue-slick-carousel>
</div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
export default {
components: {VueSlickCarousel},
name: 'ArticleCarousel',
data: () => ({
settings: {
"dots": false,
}
})
}
</script>
main/styleguide/source/js/main.js
+ 2
− 0
View file @ 7f43ffea
......@@ -2,6 +2,7 @@ import Vue from "vue";
import { forEachNode } from "./utils";
import ArticleCarousel from "./components/articles/ArticleCarousel";
import HeaderCarousel from "./components/header/HeaderCarousel";
import Renderer from "./components/calendar/Renderer";
import DummyProvider from "./components/calendar/DummyProvider";
......@@ -13,6 +14,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
import FlipClock from "./components/FlipClock";
Vue.component("ui-article-carousel", ArticleCarousel);
Vue.component("ui-header-carousel", HeaderCarousel);
Vue.component("ui-calendar-renderer", Renderer);
Vue.component("ui-calendar-dummy-provider", DummyProvider);
......
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