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

Responsive candidate card

parent 8041e4d9
No related branches found
No related tags found
No related merge requests found
Pipeline #730 passed
Stage: build
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 99 additions and 52 deletions
source/_patterns/00-atoms/01-text/headings.mustache
+ 2
− 0
View file @ e7a0b0e3
......@@ -26,9 +26,11 @@
<div>
<h1 class="head-allcaps-2xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-3xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-4xs">{{ headline.short }}</h1>
</div>
<div>
<h1 class="head-allcaps-heavy-2xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-heavy-3xs">{{ headline.short }}</h1>
<h1 class="head-allcaps-heavy-4xs">{{ headline.short }}</h1>
</div>
</div>
source/_patterns/01-molecules/02-candidate-card/candidate-card-large-shift.mustache deleted 100644 → 0
+ 0
− 7
View file @ 8041e4d9
<div class="card candidate-card candidate-card--shift-lg {{ classes }} elevation-10">
{{> atoms-basic-avatar(classes: "avatar--2xl avatar--bordered candidate-card__avatar") }}
<div class="card__body">
<h1 class="head-sm-alt">{{ headline.short }}</h1>
<p>{{ excerpt.short }}</p>
</div>
</div>
source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache
+ 6
− 6
View file @ e7a0b0e3
<div class="candidate-card {{ classes }}">
<div class="candidate-card__wrapper">
<div class="candidate-card__wrapper {{ wrapperClasses }}">
<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") }}
</div>
<div class="card__body">
<h1 class="head-alt-sm">{{ person.first }} {{ person.last }}</h1>
<div class="candidate-card__bio">
<h1 class="head-alt-base md:head-alt-sm">{{ person.first }} {{ person.last }}</h1>
<div class="font-light mb-2">{{ person.email }}</div>
<h2 class="head-allcaps-3xs">{{ person.occupation }}</h2>
<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
</div>
<div class="candidate-card__affiliation">
<div>{{ person.age }} let</div>
......@@ -17,8 +17,8 @@
<span class="font-bold font-condensed">{{ person.party }}</span>
</div>
</div>
<div class="card__body">
<p class="font-light text-sm leading-snug italic mb-2">{{ person.claim }}</p>
<div class="card__body candidate-card__social">
<p class="font-light text-sm leading-snug italic mb-2 hidden md:block">{{ person.claim }}</p>
{{> molecules-basic-social-icon-group }}
</div>
</div>
......
source/_patterns/02-organisms/01-candidates/candidate-card-list.mustache
+ 11
− 11
View file @ e7a0b0e3
<div class="candidate-card-list grid-cols-5">
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
<div class="candidate-card-list grid-cols-1 md:grid-cols-5">
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper candidate-card-list__item-wrapper--last") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "candidate-card-list__item-wrapper candidate-card-list__item-wrapper--last") }}
</div>
source/_patterns/03-templates/elections-main.mustache
+ 9
− 9
View file @ e7a0b0e3
......@@ -25,14 +25,14 @@
<h1 class="head-alt-md text-center pt-8 pb-4">Kandidátka do krajských voleb</h1>
<div class="candidate-card-list grid-cols-4">
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item candidate-card-list__item--last") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
{{> molecules-candidate-card(classes: "candidate-card-list__item") }}
<div class="candidate-card-list grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border") }}
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder md:candidate-card-list__item-wrapper--border lg:candidate-card-list__item-wrapper--noborder") }}
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border") }}
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper sm:candidate-card-list__item-wrapper--noborder lg:candidate-card-list__item-wrapper--border") }}
{{> molecules-candidate-card(wrapperClasses: "sm:candidate-card-list__item-wrapper") }}
{{> molecules-banner(color: "bg-black", fullwidthButton: true)}}
</div>
......@@ -53,7 +53,7 @@
{{> atoms-icon-button(cta: "Zobrazit vše", classes: "text-xl btn--black btn--hoveractive", icon: "fas fa-chevron-right") }}
</div>
<div class="flex space-x-4 pt-8">
<div class="flex flex-col pt-8 space-y-4 md:space-y-0 md:flex-row md:space-x-4">
{{> atoms-super-button(cta: "Povolební strategie", icon: "fa fa-chess", classes: "bg-grey-125 hover:bg-black hover:text-white w-full") }}
{{> atoms-super-button(cta: "Financování kampaně", icon: "fa fa-calculator", classes: "bg-black text-white hover:bg-grey-125 hover:text-black w-full") }}
</div>
......
source/css/atoms/heading.pcss
+ 8
− 0
View file @ e7a0b0e3
......@@ -73,6 +73,10 @@
@apply text-base font-condensed uppercase leading-tight;
}
.head-allcaps-4xs {
@apply text-sm font-condensed uppercase leading-tight;
}
......@@ -83,5 +87,9 @@
.head-allcaps-heavy-3xs {
@apply text-base font-condensed font-bold uppercase leading-tight;
}
.head-allcaps-heavy-4xs {
@apply text-sm font-condensed font-bold uppercase leading-tight;
}
}
source/css/molecules/candidate-card.pcss
+ 53
− 12
View file @ e7a0b0e3
.candidate-card {
@apply text-center;
padding-top: 3rem;
.candidate-card__body {
@apply grid;
grid-template-areas: "avatar bio"
"affiliation affiliation"
"social social";
}
.candidate-card__avatar {
@apply inline-block relative;
margin-top: -3rem;
@apply relative w-8 py-2;
grid-area: avatar;
}
.candidate-card__position {
@apply w-5 h-5 absolute bg-black text-white rounded-full text-xl font-normal font-alt text-center;
top: 1.75rem;
left: -0.5rem;
line-height: 2.5rem;
@apply w-4 h-4 absolute bg-black text-white text-base rounded-full font-normal font-alt text-center;
top: 1rem;
left: 0.5rem;
line-height: 2rem;
}
.candidate-card__bio {
@apply px-1 py-2;
}
.candidate-card__affiliation {
......@@ -31,11 +38,45 @@
}
}
.candidate-card__bio {
grid-area: bio;
}
.candidate-card__affiliation {
grid-area: affiliation;
}
.candidate-card__social {
@apply text-center;
grid-area: social;
}
.candidate-card--shift-lg {
margin-top: 11rem;
@screen sm {
.candidate-card {
padding-top: 3rem;
}
.candidate-card__body {
@apply text-center;
grid-template-areas: "avatar"
"bio"
"affiliation"
"social";
}
.candidate-card__bio {
@apply p-2;
}
.candidate-card__avatar {
margin-top: -11rem;
@apply inline-block relative m-auto w-9 py-0;
margin-top: -3rem;
}
.candidate-card__position {
@apply w-5 h-5 text-xl;
top: 1.75rem;
left: -0.5rem;
line-height: 2.5rem;
}
}
source/css/organisms/candidate-card-list.pcss
+ 9
− 6
View file @ e7a0b0e3
......@@ -2,13 +2,16 @@
@apply grid grid-flow-row gap-0 row-gap-2;
}
.candidate-card-list__item .candidate-card__wrapper {
@apply px-1 border-r border-grey-100;
}
@responsive {
.candidate-card-list__item--last .candidate-card__wrapper {
.candidate-card-list__item-wrapper {
@apply px-1 border-r border-grey-100;
}
.candidate-card-list__item-wrapper--border {
@apply border-r;
}
.candidate-card-list__item-wrapper--noborder {
@apply border-0;
}
}
source/dist/style.pkgd.css
+ 1
− 1
View file @ e7a0b0e3
This diff is collapsed.
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