Adrien/beau-gosse-du-92
1
0
Fork 0
Code Issues 2 Pull Requests 1 Packages Projects Releases Wiki Activity

♻️ Make Spinner reusable (not only by loading view)

Browse Source
This commit is contained in:
Adrien
2024-03-03 23:32:55 +01:00
parent 257b36eae1
commit 46c251ef90
5 changed files with 103 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/loading.rs
View File

@@ -1,8 +1,8 @@
use dioxus::prelude::*;
use tracing::debug;
use crate::components::spinner::Spinner;
use crate::components::wallpaper::Wallpaper;
use super::spinner::Spinner;
use super::wallpaper::Wallpaper;
turf::style_sheet!("src/components/loading.scss");
@@ -18,7 +18,10 @@ pub fn LoadingPage(cx: Scope) -> Element {
Wallpaper {},
div {
class: ClassName::SPINNER,
Spinner {},
}
}
})
}

70
src/components/loading.scss
View File

@@ -1,4 +1,5 @@
@import "../_base.scss"
@import "./spinner.scss"
.root {
height: 100%;
@@ -8,6 +9,73 @@
align-items: center;
justify-content: center;
overflow: hidden;
.spinner {
height: 5%;
aspect-ratio: $logo-aspect-ratio;
position: absolute;
$logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));
@media (0px < height <= calc($background-height * 5)) {
top: $logo-center-pos;
}
@media (calc($background-height * 5) < height <= calc($background-height * 6)) {
top: calc($logo-center-pos + ($background-height * 1));
}
@media (calc($background-height * 6) < height <= calc($background-height * 8)) {
top: calc($logo-center-pos + ($background-height * 2));
}
@media (calc($background-height * 8) < height <= calc($background-height * 10)) {
top: calc($logo-center-pos + ($background-height * 3));
}
@media (calc($background-height * 10) < height <= calc($background-height * 12)) {
top: calc($logo-center-pos + ($background-height * 4));
}
@media (calc($background-height * 12) < height <= calc($background-height * 14)) {
top: calc($logo-center-pos + ($background-height * 5));
}
@media (calc($background-height * 14) < height <= calc($background-height * 16)) {
top: calc($logo-center-pos + ($background-height * 6));
}
@media (calc($background-height * 16) < height <= calc($background-height * 18)) {
top: calc($logo-center-pos + ($background-height * 7));
}
@media (calc($background-height * 18) < height <= calc($background-height * 20)) {
top: calc($logo-center-pos + ($background-height * 8));
}
@media (calc($background-height * 20) < height <= calc($background-height * 22)) {
top: calc($logo-center-pos + ($background-height * 9));
}
@media (calc($background-height * 22) < height <= calc($background-height * 24)) {
top: calc($logo-center-pos + ($background-height * 10));
}
@media (calc($background-height * 24) < height <= calc($background-height * 26)) {
top: calc($logo-center-pos + ($background-height * 11));
}
@media (calc($background-height * 26) < height <= calc($background-height * 28)) {
top: calc($logo-center-pos + ($background-height * 12));
}
@media (calc($background-height * 28) < height <= calc($background-height * 30)) {
top: calc($logo-center-pos + ($background-height * 13));
}
@media (calc($background-height * 30) < height <= calc($background-height * 32)) {
top: calc($logo-center-pos + ($background-height * 14));
}
@media (calc($background-height * 32) < height <= calc($background-height * 34)) {
top: calc($logo-center-pos + ($background-height * 15));
}
@media (calc($background-height * 34) < height <= calc($background-height * 36)) {
top: calc($logo-center-pos + ($background-height * 16));
}
@media (calc($background-height * 36) < height <= calc($background-height * 38)) {
top: calc($logo-center-pos + ($background-height * 17));
}
@media (calc($background-height * 38) < height <= calc($background-height * 40)) {
top: calc($logo-center-pos + ($background-height * 18));
}
background-color: $greyscale-0;
}
}

80
src/components/spinner.scss
View File

@@ -1,78 +1,14 @@
@import "../_base.scss"
$background-height: 128px;
$background-width: 384px;
$logo-height: calc(32px * 2);
$logo-width: calc(64px * 2);
$logo-aspect-ratio: calc($logo-width / $logo-height);
.root {
$background-height: 128px;
$background-width: 384px;
$logo-height: calc(32px * 2);
$logo-width: calc(64px * 2);
height: $logo-height;
width: $logo-width;
position: absolute;
z-index: 1;
$logo-center-pos: calc(50% + ($background-height / 2) - ($logo-height / 2));
@media (0px < height <= calc($background-height * 5)) {
top: $logo-center-pos;
}
@media (calc($background-height * 5) < height <= calc($background-height * 6)) {
top: calc($logo-center-pos + ($background-height * 1));
}
@media (calc($background-height * 6) < height <= calc($background-height * 8)) {
top: calc($logo-center-pos + ($background-height * 2));
}
@media (calc($background-height * 8) < height <= calc($background-height * 10)) {
top: calc($logo-center-pos + ($background-height * 3));
}
@media (calc($background-height * 10) < height <= calc($background-height * 12)) {
top: calc($logo-center-pos + ($background-height * 4));
}
@media (calc($background-height * 12) < height <= calc($background-height * 14)) {
top: calc($logo-center-pos + ($background-height * 5));
}
@media (calc($background-height * 14) < height <= calc($background-height * 16)) {
top: calc($logo-center-pos + ($background-height * 6));
}
@media (calc($background-height * 16) < height <= calc($background-height * 18)) {
top: calc($logo-center-pos + ($background-height * 7));
}
@media (calc($background-height * 18) < height <= calc($background-height * 20)) {
top: calc($logo-center-pos + ($background-height * 8));
}
@media (calc($background-height * 20) < height <= calc($background-height * 22)) {
top: calc($logo-center-pos + ($background-height * 9));
}
@media (calc($background-height * 22) < height <= calc($background-height * 24)) {
top: calc($logo-center-pos + ($background-height * 10));
}
@media (calc($background-height * 24) < height <= calc($background-height * 26)) {
top: calc($logo-center-pos + ($background-height * 11));
}
@media (calc($background-height * 26) < height <= calc($background-height * 28)) {
top: calc($logo-center-pos + ($background-height * 12));
}
@media (calc($background-height * 28) < height <= calc($background-height * 30)) {
top: calc($logo-center-pos + ($background-height * 13));
}
@media (calc($background-height * 30) < height <= calc($background-height * 32)) {
top: calc($logo-center-pos + ($background-height * 14));
}
@media (calc($background-height * 32) < height <= calc($background-height * 34)) {
top: calc($logo-center-pos + ($background-height * 15));
}
@media (calc($background-height * 34) < height <= calc($background-height * 36)) {
top: calc($logo-center-pos + ($background-height * 16));
}
@media (calc($background-height * 36) < height <= calc($background-height * 38)) {
top: calc($logo-center-pos + ($background-height * 17));
}
@media (calc($background-height * 38) < height <= calc($background-height * 40)) {
top: calc($logo-center-pos + ($background-height * 18));
}
background-color: $greyscale-0;
height: 100%;
width: 100%;
svg {
$fps: 4;

4
src/components/wallpaper.rs
View File

@@ -8,6 +8,10 @@ pub fn Wallpaper(cx: Scope) -> Element {
style { STYLE_SHEET },
div {
class: ClassName::ROOT,
div {
class: ClassName::CONTENT,
}
}
})
}

12
src/components/wallpaper.scss
View File

@@ -1,9 +1,21 @@
@import "../_base.scss"
.root {
height: 100%;
width: 100%;
z-index: -1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.content {
background-image: url("./images/background.svg");
background-position: center;
width: 150%;
height: 150%;
}
}