From 9a04308a16dc18d584cc5e8fb352fac5ab17dc6b Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Fri, 6 May 2022 08:51:59 +0200
Subject: [PATCH] fix: article card shouldn't hide sharer box on mobile devices
---
.../01-molecules/06-banner/color-variants.mustache | 6 +++---
source/css/molecules/article-card.pcss | 13 ++++++++++---
2 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/source/_patterns/01-molecules/06-banner/color-variants.mustache b/source/_patterns/01-molecules/06-banner/color-variants.mustache
index e0c7e1b..4ee8057 100644
--- a/source/_patterns/01-molecules/06-banner/color-variants.mustache
+++ b/source/_patterns/01-molecules/06-banner/color-variants.mustache
@@ -1,8 +1,8 @@
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
{{> molecules-banner(color: "bg-black") }}
- {{> molecules-banner(color: "bg-violet-300") }}
- {{> molecules-banner(color: "bg-green-200") }}
- {{> molecules-banner(color: "bg-blue-200") }}
+ {{> molecules-banner(color: "bg-violet-500") }}
+ {{> molecules-banner(color: "bg-red-600") }}
+ {{> molecules-banner(color: "bg-blue-300") }}
{{> molecules-banner(color: "bg-brands-facebook") }}
{{> molecules-banner(color: "bg-brands-twitter") }}
</div>
diff --git a/source/css/molecules/article-card.pcss b/source/css/molecules/article-card.pcss
index 524f738..bdb972a 100644
--- a/source/css/molecules/article-card.pcss
+++ b/source/css/molecules/article-card.pcss
@@ -21,15 +21,22 @@
/* padding shall be kept in sync with general card */
/* No pointer events to make full article cover clickable */
@apply absolute left-0 bottom-0 p-4 pointer-events-none;
+
}
.article-card-sharing {
- /* Turn on pointer events to make sharer clickable */
- @apply mb-4 transition duration-200 opacity-0 pointer-events-auto;
+ @apply mb-4 ;
+
+ @screen lg {
+ /* Turn on pointer events to make sharer clickable */
+ @apply transition duration-200 opacity-0 pointer-events-auto;
+ }
}
.article-card:hover .article-card-sharing {
- @apply opacity-100;
+ @screen lg {
+ @apply opacity-100;
+ }
}
.article-card-meta {
--
GitLab