From 44074f6988b6462874e8c656babc186dca0a0885 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Tue, 5 Nov 2024 13:09:43 +0000
Subject: [PATCH] feat(ui): responsive challenges
---
src/components/Action/ActionBegin/actionBegin.scss | 13 ++-----------
src/components/Challenge/challengeView.scss | 5 -----
src/components/Duel/DuelUnlocked/duelUnlocked.scss | 1 +
src/components/Exploration/explorationOngoing.scss | 11 ++---------
src/components/Quiz/QuizBegin/quizBegin.scss | 10 ++--------
5 files changed, 7 insertions(+), 33 deletions(-)
diff --git a/src/components/Action/ActionBegin/actionBegin.scss b/src/components/Action/ActionBegin/actionBegin.scss
index 607a3211f..29defe297 100644
--- a/src/components/Action/ActionBegin/actionBegin.scss
+++ b/src/components/Action/ActionBegin/actionBegin.scss
@@ -27,7 +27,7 @@
gap: 1.5rem;
text-align: center;
position: relative;
- padding: 5rem 1rem 1rem 1rem;
+ padding: 1rem;
@media (min-width: $width-large-desktop) {
margin: 6rem 1rem 1rem 1rem;
}
@@ -37,11 +37,7 @@
.icon-container {
width: 8.125rem;
height: 8.125rem;
- position: absolute;
- left: 0;
- right: 0;
margin: 0 auto;
- top: -70px;
background: $grey-linear-gradient-background;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 8px;
@@ -51,13 +47,8 @@
.action-icon {
margin: auto;
}
- .action-icon-stars {
- margin-top: -4rem;
- }
.stars {
- .star:not(:last-of-type) {
- margin-right: 0.4rem;
- }
+ display: flex;
}
.action-duration {
color: $grey-bright;
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index f603c9148..c553135b4 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -53,10 +53,5 @@
}
}
.sliderButtons {
- text-align: center;
margin: auto;
- margin-top: 1.5rem;
- @media all and (max-width: $width-tablet) {
- display: none;
- }
}
diff --git a/src/components/Duel/DuelUnlocked/duelUnlocked.scss b/src/components/Duel/DuelUnlocked/duelUnlocked.scss
index d1504cb20..f4e92452c 100644
--- a/src/components/Duel/DuelUnlocked/duelUnlocked.scss
+++ b/src/components/Duel/DuelUnlocked/duelUnlocked.scss
@@ -16,6 +16,7 @@
.duel-description {
color: $multi-color;
margin-top: 0.75rem;
+ font-weight: 700;
text-align: center;
}
.duel-average-info {
diff --git a/src/components/Exploration/explorationOngoing.scss b/src/components/Exploration/explorationOngoing.scss
index 6bf5a8d51..be5e83943 100644
--- a/src/components/Exploration/explorationOngoing.scss
+++ b/src/components/Exploration/explorationOngoing.scss
@@ -19,12 +19,8 @@
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: $grey-linear-gradient-background;
-
- svg {
- margin-top: -33%;
- }
-
+ background-color: $grey-1;
+ border: 1px solid $grey-2;
text-align: center;
@media (min-width: $width-large-phone) {
width: 60%;
@@ -35,9 +31,6 @@
padding: 0.5rem 1rem 2rem;
}
- .exploration-icon-stars {
- margin-top: -4rem;
- }
.exploration-explanation {
line-height: 24px;
height: 50%;
diff --git a/src/components/Quiz/QuizBegin/quizBegin.scss b/src/components/Quiz/QuizBegin/quizBegin.scss
index 5eddf3f64..7cb09ec7a 100644
--- a/src/components/Quiz/QuizBegin/quizBegin.scss
+++ b/src/components/Quiz/QuizBegin/quizBegin.scss
@@ -17,15 +17,12 @@
padding: 2rem 1rem;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
+ background-color: $grey-1;
+ border: 1px solid $grey-2;
transition: all 300ms ease;
color: $white;
- background: $grey-linear-gradient-background;
text-align: center;
- svg {
- margin-top: -33%;
- }
-
@media (min-width: $width-large-phone) {
max-width: 60%;
justify-content: space-evenly;
@@ -34,9 +31,6 @@
max-width: 40%;
padding: 0.5rem 1rem 2rem;
}
- .quiz-icon-stars {
- margin-top: -4rem;
- }
.quiz-explanation {
margin-bottom: 2rem;
line-height: 24px;
--
GitLab