From c2435be6517b6682a67f2f6d3ddd15a2bb31cd63 Mon Sep 17 00:00:00 2001
From: Hugo NOUTS <hnouts@grandlyon.com>
Date: Thu, 28 Sep 2023 12:51:08 +0000
Subject: [PATCH] fix(splashScreen): loading bar hatched design
---
src/components/Splash/SplashScreen.tsx | 9 +++---
.../__snapshots__/SplashRoot.spec.tsx.snap | 2 +-
.../__snapshots__/SplashScreen.spec.tsx.snap | 2 +-
src/components/Splash/splashScreen.scss | 30 +++++--------------
4 files changed, 14 insertions(+), 29 deletions(-)
diff --git a/src/components/Splash/SplashScreen.tsx b/src/components/Splash/SplashScreen.tsx
index 7b068de2e..6b7182882 100644
--- a/src/components/Splash/SplashScreen.tsx
+++ b/src/components/Splash/SplashScreen.tsx
@@ -8,10 +8,9 @@ import './splashScreen.scss'
const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
const { t } = useI18n()
const getProgress = () => {
- const total: number = Object.values(InitSteps).length / 2
- const progress: number =
- initStep === 0 ? 10 : Math.round((initStep / total) * 100)
- return progress
+ const total = Object.values(InitSteps).length / 2
+ const progress = initStep === 0 ? 10 : Math.round((initStep / total) * 100)
+ return progress - 90 /* hack to make the progress bar start way left */
}
return (
<>
@@ -23,7 +22,7 @@ const SplashScreen = ({ initStep }: { initStep: InitSteps }) => {
<div className="splash-progress-bar-container">
<div
className="splash-progress-bar-content"
- style={{ width: `${getProgress()}%` }}
+ style={{ left: `${getProgress()}%` }}
/>
</div>
</div>
diff --git a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
index 16bb80e53..e08db15ef 100644
--- a/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashRoot.spec.tsx.snap
@@ -48,7 +48,7 @@ exports[`SplashRoot component should be rendered correctly 1`] = `
className="splash-progress-bar-content"
style={
Object {
- "width": "17%",
+ "left": "-73%",
}
}
/>
diff --git a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
index 03f304221..089fbbee7 100644
--- a/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreen.spec.tsx.snap
@@ -27,7 +27,7 @@ exports[`SplashScreen component should be rendered correctly 1`] = `
className="splash-progress-bar-content"
style={
Object {
- "width": "17%",
+ "left": "-73%",
}
}
/>
diff --git a/src/components/Splash/splashScreen.scss b/src/components/Splash/splashScreen.scss
index af366e848..a9456aaec 100644
--- a/src/components/Splash/splashScreen.scss
+++ b/src/components/Splash/splashScreen.scss
@@ -72,7 +72,6 @@
border-radius: 12px;
box-sizing: border-box;
max-width: 350px;
-
.splash-progress-bar-container {
flex: 1;
height: 12px;
@@ -90,29 +89,16 @@
background-size: 9px 9px;
border: solid 1px $gold-shadow;
border-radius: 12px;
+ overflow: hidden;
+ position: relative;
.splash-progress-bar-content {
- height: 12px;
- box-sizing: border-box;
background-color: $gold-shadow;
- border: solid 1px $gold-shadow;
- border-radius: 12px 4px 0 12px;
- border-right: none;
- transition: all 300ms ease;
- position: relative;
- overflow: hidden;
- top: -1px;
- left: -1px;
- &:after {
- content: '';
- position: absolute;
- display: block;
- transform: rotate(45deg);
- background-color: $dark-2;
- width: 15px;
- height: 15px;
- right: -9px;
- top: -8px;
- }
+ position: absolute;
+ bottom: -150px;
+ left: -100%;
+ height: 300px;
+ width: 100%;
+ transform: rotate(45deg);
}
}
}
--
GitLab