From 39e1fa005881393bbec3af2a8e371b4def36536d Mon Sep 17 00:00:00 2001
From: Guilhem CARRON <gcarron@grandlyon.com>
Date: Wed, 20 Oct 2021 14:16:13 +0000
Subject: [PATCH] fix(challenge): Improve challenge cards display for small
screens
---
src/components/Challenge/challengeCardDone.scss | 8 +++++---
src/components/Challenge/challengeCardLocked.scss | 2 +-
src/components/Challenge/challengeCardOnGoing.scss | 11 ++++++-----
src/components/Challenge/challengeCardUnlocked.scss | 2 +-
4 files changed, 13 insertions(+), 10 deletions(-)
diff --git a/src/components/Challenge/challengeCardDone.scss b/src/components/Challenge/challengeCardDone.scss
index f0044b838..b2b80c1ad 100644
--- a/src/components/Challenge/challengeCardDone.scss
+++ b/src/components/Challenge/challengeCardDone.scss
@@ -14,13 +14,15 @@
}
.iconResult {
display: flex;
- }
- .imgResult {
@media all and(max-height: 700px) {
- width: 80%;
+ width: 55%;
margin: auto;
}
}
+ .imgResult {
+ width: 100%;
+ height: 100%;
+ }
.labelResult {
font-weight: bold;
font-size: 24px;
diff --git a/src/components/Challenge/challengeCardLocked.scss b/src/components/Challenge/challengeCardLocked.scss
index a39157c6c..35d10645f 100644
--- a/src/components/Challenge/challengeCardLocked.scss
+++ b/src/components/Challenge/challengeCardLocked.scss
@@ -4,7 +4,7 @@
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
.challengeIcon {
@media all and(max-height: 700px) {
- width: 70%;
+ width: 60%;
margin: auto;
}
}
diff --git a/src/components/Challenge/challengeCardOnGoing.scss b/src/components/Challenge/challengeCardOnGoing.scss
index 6025b7438..e616648b2 100644
--- a/src/components/Challenge/challengeCardOnGoing.scss
+++ b/src/components/Challenge/challengeCardOnGoing.scss
@@ -21,17 +21,18 @@
margin: auto;
top: -1rem;
background: rgba(27, 28, 34, 1);
- max-width: 190px;
+ width: fit-content;
+ padding: 0 1rem;
+ max-width: 235px;
}
.smallCard {
- // outline: none;
border: none;
width: 100%;
background: linear-gradient(180deg, #323339 0%, #25262b 100%);
height: 24%;
max-height: 90px;
margin: 0.5rem 0;
- padding: 9%;
+ padding: 8%;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
color: $grey-bright;
@@ -42,11 +43,11 @@
@media all and(max-height: 800px) {
max-height: 85px;
- padding: 8%;
+ padding: 6%;
}
@media all and(max-height: 730px) {
max-height: 70px;
- padding: 6%;
+ padding: 3%;
}
&.finished {
border: 1px solid #7b7b7b;
diff --git a/src/components/Challenge/challengeCardUnlocked.scss b/src/components/Challenge/challengeCardUnlocked.scss
index 868c4daf4..643b024ea 100644
--- a/src/components/Challenge/challengeCardUnlocked.scss
+++ b/src/components/Challenge/challengeCardUnlocked.scss
@@ -15,7 +15,7 @@
}
.challengeIcon {
@media all and(max-height: 700px) {
- width: 80%;
+ width: 65%;
margin: auto;
}
}
--
GitLab