From 88f269739da6065c1c0e724e4ac1e4778f0b35ef Mon Sep 17 00:00:00 2001 From: "fanky.eu" <jakub.webisti@gmail.com> Date: Fri, 14 May 2021 17:34:04 +0200 Subject: [PATCH] candidate cards mobile upgrade --- .../00-badge/sidebar-badge-pirati-stan.mustache | 2 +- .../candidate-card-pirati-stan.mustache | 4 ++-- .../css/molecules/candidate-card-pirati-stan.pcss | 15 ++++++++++++++- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/source/_patterns/01-molecules/00-badge/sidebar-badge-pirati-stan.mustache b/source/_patterns/01-molecules/00-badge/sidebar-badge-pirati-stan.mustache index 570b0a4..f6d3d29 100644 --- a/source/_patterns/01-molecules/00-badge/sidebar-badge-pirati-stan.mustache +++ b/source/_patterns/01-molecules/00-badge/sidebar-badge-pirati-stan.mustache @@ -6,7 +6,7 @@ {{/ hideAvatar}} <div class="badge__body"> <span class="head-heavy-xs">{{ person.first }} {{ person.last }}</span> - <a href="#" class="sidebar-badge__bio-item block mb-2">{{ person.email }}</a> + <a href="#" class="sidebar-badge__bio-item block pb-3 pt-3 md:pb-2 md:pt-0">{{ person.email }}</a> {{^ hideOccupation }} <p class="badge__occupation">{{ occupation }}{{^ occupation }}{{ person.occupation }}{{/ occupation }}</p> {{/ hideOccupation}} diff --git a/source/_patterns/01-molecules/03-candidate-card/candidate-card-pirati-stan.mustache b/source/_patterns/01-molecules/03-candidate-card/candidate-card-pirati-stan.mustache index 230150a..3d8337c 100644 --- a/source/_patterns/01-molecules/03-candidate-card/candidate-card-pirati-stan.mustache +++ b/source/_patterns/01-molecules/03-candidate-card/candidate-card-pirati-stan.mustache @@ -1,13 +1,13 @@ <div class="candidate-card candidate-card--pirati-stan container-padding--zero sm:container-padding--auto {{ classes }}"> <div class="candidate-card__wrapper h-full {{ wrapperClasses }} {{#stan}}candidate-card-list__item-wrapper--stan-candidate{{/stan}}"> - <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200 h-full"> + <div class="card candidate-card__body elevation-2 sm:elevation-0 hover:elevation-10 transition duration-200 h-full"> <div class="candidate-card__avatar sm:pl-0"> <div class="candidate-card__position">{{ demoposition }}</div> <a href="#" data-href="{{ link.templates-candidate-detail }}">{{> atoms-basic-avatar(classes: "avatar--sm sm:avatar--lg" ) }}</a> </div> <div class="candidate-card__bio"> <h1 class="head-heavy-xs"><a href="#" data-href="{{ link.templates-candidate-detail }}">{{ person.first }} {{ person.last }}</a></h1> - <a href="#" class="candidate-card__bio-item block mb-4">{{ person.email }}</a> + <a href="#" class="candidate-card__bio-item block pb-4 pt-3 md:pt-0 md:pb-4">{{ person.email }}</a> <h2 class="candidate-card__bio-item">{{# demooccupation }}{{ demooccupation }}{{/ demooccupation }}{{^ demooccupation }}{{ person.occupation }}{{/ demooccupation }}</h2> <h2 class="head-allcaps-4xs mt-4">{{ person.city }}</h2> </div> diff --git a/source/css/molecules/candidate-card-pirati-stan.pcss b/source/css/molecules/candidate-card-pirati-stan.pcss index 3d69553..d76fe54 100644 --- a/source/css/molecules/candidate-card-pirati-stan.pcss +++ b/source/css/molecules/candidate-card-pirati-stan.pcss @@ -15,10 +15,23 @@ } } } - + .candidate-card__body { + grid-template-areas: "avatar bio" + ". social" + "affiliation affiliation"; + } @screen sm { + .candidate-card { + @apply flex flex-col h-full; + padding-top: 3rem; + } + .candidate-card__body { + grid-template-areas: "avatar" + "bio" + "affiliation" + "social"; grid-template-rows: 63px auto 42px 50px; } } -- GitLab