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