From d220c73e6dafae7b1a510add5171c4f2e905d412 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 10 Jul 2020 09:56:59 +0200
Subject: [PATCH] Improve article card usability
---
.../02-candidate-card/candidate-card.mustache | 4 ++--
source/css/atoms/list.pcss | 7 ++++---
source/css/molecules/article-card.pcss | 10 ++++++----
3 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache b/source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache
index 48f3381..883b680 100644
--- a/source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache
+++ b/source/_patterns/01-molecules/02-candidate-card/candidate-card.mustache
@@ -7,14 +7,14 @@
</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>
- <div class="font-light mb-4">{{ person.email }}</div>
+ <a href="#" class="block font-light mb-4">{{ person.email }}</a>
<h2 class="head-allcaps-4xs md:head-allcaps-3xs">{{ person.occupation }}</h2>
</div>
<div class="candidate-card__affiliation">
<div>{{ person.age }} let</div>
<div>
{{> atoms-basic-avatar(classes: "w-6 mr-2") }}
- <span class="font-bold font-condensed">{{ person.party }}</span>
+ <a href="#" class="font-bold font-condensed">{{ person.party }}</a>
</div>
</div>
<div class="card__body candidate-card__social">
diff --git a/source/css/atoms/list.pcss b/source/css/atoms/list.pcss
index f82a4ed..a4c182a 100644
--- a/source/css/atoms/list.pcss
+++ b/source/css/atoms/list.pcss
@@ -20,7 +20,7 @@
content: "\e919";
font-size: .5em;
font-weight: 600;
- margin-top: .5em;
+ margin-top: .7em;
}
}
@@ -41,8 +41,9 @@
}
}
-.unordered-list--dense {
- @apply row-gap-2;
+.unordered-list--dense,
+.content-block ul {
+ @apply row-gap-0;
}
.unordered-list--linked {
diff --git a/source/css/molecules/article-card.pcss b/source/css/molecules/article-card.pcss
index 70dc64e..524f738 100644
--- a/source/css/molecules/article-card.pcss
+++ b/source/css/molecules/article-card.pcss
@@ -13,17 +13,19 @@
&:before {
@apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
content: "";
- background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));
+ background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,.8));
}
}
.article-card-cover__details {
/* padding shall be kept in sync with general card */
- @apply absolute left-0 bottom-0 p-4;
+ /* No pointer events to make full article cover clickable */
+ @apply absolute left-0 bottom-0 p-4 pointer-events-none;
}
.article-card-sharing {
- @apply mb-4 transition duration-200 opacity-0;
+ /* Turn on pointer events to make sharer clickable */
+ @apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
}
.article-card:hover .article-card-sharing {
@@ -31,7 +33,7 @@
}
.article-card-meta {
- @apply text-sm text-white text-opacity-85;
+ @apply text-sm text-white;
}
.article-card-meta__item:not(:first-child) {
--
GitLab