Skip to content
Snippets Groups Projects
Commit 48b2b575 authored by xaralis's avatar xaralis
Browse files

Candidate detail page, various fine tunings

parent abbf8140
No related branches found
No related tags found
No related merge requests found
Pipeline #775 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 170 additions and 42 deletions
source/_patterns/01-molecules/00-badge/basic-badge.mustache
+ 1
− 1
View file @ 48b2b575
......@@ -2,7 +2,7 @@
{{^ hideAvatar }}
{{# avatarSizeXl }}
{{> atoms-basic-avatar(classes: "avatar--xl badge__avatar") }}
{{/ avatarSizeXl}}
{{/ avatarSizeXl }}
{{^ avatarSizeXl }}
{{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
{{/ avatarSizeXl }}
......
source/_patterns/01-molecules/00-badge/condensed-badge.mustache
+ 9
− 2
View file @ 48b2b575
<div class="badge badge--condensed {{ classes }}">
{{> atoms-basic-avatar(classes: "avatar--sm badge__avatar") }}
{{^ hideAvatar }}
{{# avatarSizeMd }}
{{> atoms-basic-avatar(classes: "avatar--md badge__avatar") }}
{{/ avatarSizeMd }}
{{^ avatarSizeMd }}
{{> atoms-basic-avatar(classes: "avatar--sm badge__avatar") }}
{{/ avatarSizeMd }}
{{/ hideAvatar }}
<div class="badge__body">
<span class="head-heavy-xs badge__title">{{ person.first }} {{ person.last }}</span>
<span class="head-heavy-2xs badge__title">{{ person.first }} {{ person.last }}</span>
{{^ hideOccupation }}
<p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p>
{{/ hideOccupation }}
......
source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache
+ 2
− 2
View file @ 48b2b575
......@@ -3,10 +3,10 @@
<div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
<div class="candidate-card__avatar">
<div class="candidate-card__position">{{ person.position }}</div>
{{> atoms-basic-avatar(classes: "avatar--xl avatar--bordered") }}
{{> atoms-basic-avatar(classes: "avatar--md md:avatar--lg avatar--bordered") }}
</div>
<div class="candidate-card__bio">
<h1 class="head-alt-base md:head-alt-sm">{{ person.first }} {{ person.last }}</h1>
<h1 class="head-heavy-xs">{{ person.first }} {{ person.last }}</h1>
<div class="font-light mb-4">{{ person.email }}</div>
<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
</div>
......
source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache
+ 1
− 1
View file @ 48b2b575
<div class="candidate-table-row">
<div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
{{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
<div class="candidate-table-row__name head-allcaps-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
<div class="candidate-table-row__name head-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
<div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div>
<div class="candidate-table-row__affiliation">
{{> atoms-basic-avatar(classes: "w-6 mr-2") }}
......
source/_patterns/01-molecules/subsidiary-card/subsidiary-card.mustache
+ 1
− 1
View file @ 48b2b575
......@@ -9,7 +9,7 @@
{{> atoms-contact-line(icon: "fab fa-facebook-f text-brands-facebook", caption: "Svitavsko", classes: "font-light") }}
</div>
</div>
{{> molecules-basic-badge(hideAvatar: true, hideOccupation: true) }}
{{> molecules-condensed-badge(hideAvatar: true, hideOccupation: true) }}
</div>
<div class="hidden md:block">
<a href="#"><i class="fas fa-chevron-right text-3xl"></i></a>
......
source/_patterns/02-organisms/people/people-list.mustache
+ 1
− 1
View file @ 48b2b575
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 row-gap-8 col-gap-8 lg:col-gap-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 row-gap-8 col-gap-8">
{{> molecules-basic-badge(occupation: "předseda krajského sdružení Pardubického kraje") }}
{{> molecules-basic-badge(occupation: "1. místopředseda KS Pardubický kraj") }}
{{> molecules-basic-badge(occupation: "2. místopředsedkyně KS Pardubický kraj") }}
......
source/_patterns/03-templates/article-detail.mustache
+ 1
− 1
View file @ 48b2b575
......@@ -28,7 +28,7 @@
<section class="mt-16 md:mt-24">
<h1 class="head-alt-base md:head-alt-md pb-4">Další podobné články</h1>
{{> organisms-article-card-list(onlyThree: true) }}
<div class="text-center mt-8">
<div class="text-center mt-8 md:mt-16">
{{> atoms-icon-button(cta: "Zobrazit další", classes: "text-xl", icon: "fas fa-chevron-right") }}
</div>
</section>
......
source/_patterns/03-templates/candidate-detail.mustache 0 → 100644
+ 65
− 0
View file @ 48b2b575
{{> organisms-header }}
<article class="hero hero--image pt-24 pb-24 lg:pt-40 pb-24 candidate-detail__hero {{ classes }}" style="--image-url: url({{ img.landscape-16x9-fullhd.src }})">
<div class="container container--default text-center lg:text-left">
<h1 class="head-alt-md md:head-alt-xl">{{ person.first }} {{ person.last }}</h1>
<h2 class="head-xs mt-2">{{ person.occupation }}</h2>
</div>
</article>
<div class="container container--default py-8 lg:pb-24">
<main>
<div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-16">
<section class="lg:w-3/5 xl:w-2/3">
{{> molecules-content-block(classes: "w-full", noStartHeadline: true) }}
</section>
<section class="lg:w-2/5 xl:w-1/3 pt-8 lg:pt-0 order-first lg:order-last candidate-detail__sidebar">
<div class="container-zeropad lg:card lg:elevation-10 lg:container-autopad">
<div class="card__body p-4 lg:p-8">
<div class="text-center mb-8">
{{> atoms-basic-avatar(classes: "avatar--2xl lg:avatar--3xl avatar--bordered candidate-detail__avatar") }}
</div>
{{> molecules-basic-social-icon-group(classes: "text-lg") }}
<hr />
<div class="flex items-center">
{{> atoms-basic-avatar(classes: "w-6 mr-2") }}
<span class="font-bold font-condensed">{{ person.party }}</span>
</div>
<hr />
<div class="content-block">
<div class="space-y-4">
<div>
<h4>Telefon</h4>
{{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
</div>
<div>
<h4>Email</h4>
{{> atoms-contact-line(icon: "fas fa-envelope") }}
</div>
</div>
<hr />
<h2>Asistenti</h2>
<div class="space-y-4 mt-4">
{{> molecules-condensed-badge(occupation: "1. asistent", hideOccupation: true)}}
{{> molecules-condensed-badge(occupation: "2. asistent", hideOccupation: true)}}
</div>
<hr />
<h2>Kancelář</h2>
<h4>Poslanecká sněmovna</h4>
<p>
Jiřího náměstí 39, 290 33 Poděbrady
</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d82007.99920528589!2d15.688131074078123!3d50.034780639742856!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470dc94b239307b5%3A0x12d59894ccf624ae!2sPardubice!5e0!3m2!1scs!2scz!4v1589382658695!5m2!1scs!2scz" width="100%" height="300" id="mapa-mobile" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
<h4>Otevírací doba</h4>
<p>Pondělí 14:00 - 18:00 objednat se přes: kancelář-podebrady@pirati.cz nebo 778 111 462.</p>
<!-- Mobile divider -->
<hr class="block lg:hidden" />
</div>
</div>
</div>
</section>
</div>
</main>
</div>
{{> organisms-footer }}
source/_patterns/03-templates/contact.mustache
+ 3
− 3
View file @ 48b2b575
......@@ -39,15 +39,15 @@
<h2>Základní údaje</h2>
<div class="space-y-4">
<div>
<h6>Emailová adresa</h6>
<h4>Emailová adresa</h4>
{{> atoms-contact-line(icon: "fas fa-envelope") }}
</div>
<div>
<h6>Podatelna</h6>
<h4>Podatelna</h4>
{{> atoms-contact-line(icon: "fas fa-envelope") }}
</div>
<div>
<h6>Telefon</h6>
<h4>Telefon</h4>
{{> atoms-contact-line(icon: "fas fa-phone", cta: "+420 777 123 123") }}
</div>
</div>
......
source/_patterns/03-templates/election-program-point.mustache
+ 5
− 5
View file @ 48b2b575
......@@ -11,20 +11,20 @@
<section class="pt-8 lg:w-2/5 xl:w-1/3 lg:pt-0">
<div class="card elevation-10">
<div class="card__body">
{{> molecules-basic-badge(occupation: "Garant") }}
<hr class="hr--condensed">
{{> molecules-condensed-badge(occupation: "Garant") }}
<hr />
<div class="content-block">
<h2>Volby</h2>
<h3>Program na radnici</h3>
{{> atoms-linked-unordered-list }}
<hr class="hr--condensed">
<hr />
<h3>Program pro Pardubice V</h3>
{{> atoms-linked-unordered-list }}
<hr class="hr--condensed">
<hr />
<h3>Povolební strategie</h3>
<p>Přečtěte si, jak se zachováme po volbách. Nemusíte volit zajíce v pytli.</p>
{{> atoms-icon-button(cta: "Zjistit víc", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
<hr class="hr--condensed">
<hr />
<h3>Financování kampaně</h3>
<p>Transparentní financování kampaně je pro nás samozřejmost.</p>
{{> atoms-icon-button(cta: "Zjistit víc", icon: "fas fa-chevron-right", classes: "btn--black btn--hoveractive btn--fullwidth md:btn--autowidth") }}
......
source/_patterns/03-templates/pirate-center.mustache
+ 2
− 3
View file @ 48b2b575
......@@ -85,9 +85,8 @@
<p><small>Vstup do pirátského centra naleznete z boku budovy T-STRING naproti „AFI paláci“, vedle kadeřnictví. Vchod je v prostoru vjezdu na parkoviště ve vnitrobloku.</small></p>
<hr>
<h2>Kontakt</h2>
{{> molecules-condensed-badge(occupation: "Správce coworku")}}
{{> molecules-condensed-badge(occupation: "Produkce a program akcí", classes: "mt-4")}}
{{> molecules-condensed-badge(occupation: "Správce coworku", avatarSizeMd: true)}}
{{> molecules-condensed-badge(occupation: "Produkce a program akcí", classes: "mt-4", avatarSizeMd: true)}}
</div>
</div>
......
source/css/atoms/avatar.pcss
+ 22
− 17
View file @ 48b2b575
......@@ -6,23 +6,28 @@
}
}
.avatar--xs {
@apply w-12;
}
.avatar--sm {
@apply w-16;
}
.avatar--md {
@apply w-24;
}
.avatar--lg {
@apply w-28;
}
.avatar--xl {
@apply w-36;
}
.avatar--2xl {
@apply w-48;
@responsive {
.avatar--xs {
@apply w-12;
}
.avatar--sm {
@apply w-20;
}
.avatar--md {
@apply w-24;
}
.avatar--lg {
@apply w-28;
}
.avatar--xl {
@apply w-36;
}
.avatar--2xl {
@apply w-48;
}
.avatar--3xl {
@apply w-56;
}
}
.avatar--bordered {
......
source/css/atoms/container.pcss
+ 23
− 0
View file @ 48b2b575
.container {
}
.container--default {
@apply max-w-screen-xl;
}
......@@ -5,3 +8,23 @@
.container--wide {
max-width: 1430px;
}
@responsive {
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
.container-zeropad {
margin-left: -1rem;
margin-right: -1rem;
@screen xl {
margin-left: -2rem;
margin-right: -2rem;
}
}
.container-autopad {
margin-left: auto;
margin-right: auto;
}
}
source/css/molecules/content-block.pcss
+ 9
− 2
View file @ 48b2b575
......@@ -13,11 +13,18 @@
h1,
h2,
h3,
h3 {
margin-bottom: .4em;
&:not(:first-child) {
margin-top: .95em;
}
}
h4,
h5,
h6 {
margin-bottom: .5em;
margin-bottom: .3em;
&:not(:first-child) {
margin-top: .95em;
......
source/css/molecules/pagination.pcss
+ 1
− 1
View file @ 48b2b575
......@@ -3,5 +3,5 @@
}
.pagination-container {
@apply text-center py-8;
@apply text-center pt-16 pb-8;
}
source/css/organisms/footer.pcss
+ 1
− 1
View file @ 48b2b575
......@@ -37,7 +37,7 @@
}
.footer-contacts {
@apply grid grid-cols-12;
@apply grid grid-cols-12 gap-4;
}
.footer-contacts .footer-contacts__item {
......
source/css/style.pcss
+ 2
− 0
View file @ 48b2b575
......@@ -49,6 +49,8 @@
@import "./organisms/navbar.pcss";
@import "./organisms/subnav.pcss";
@import "./templates/candidate-detail.pcss";
/**
* This injects Tailwind's utility classes and any utility classes registered
* by plugins.
......
source/css/templates/candidate-detail.pcss 0 → 100644
+ 19
− 0
View file @ 48b2b575
.candidate-detail__hero {
z-index: -1;
}
.candidate-detail__sidebar {
@apply bg-white;
@screen lg {
margin-top: -6rem;
}
}
.candidate-detail__avatar {
margin-top: -9rem;
@screen lg {
margin-top: -11rem;
}
}
source/dist/style.pkgd.css
+ 1
− 1
View file @ 48b2b575
Source diff could not be displayed: it is too large. Options to address this: view the blob.
tailwind.config.js
+ 1
− 0
View file @ 48b2b575
......@@ -96,6 +96,7 @@ module.exports = {
},
container: {
center: true,
/* @note: needs to be kept in sync with tailwind css/atoms/container.pcss */
padding: {
default: '1rem',
xl: '2rem',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft