IMPR: Minor loading improvements

This commit is contained in:
Tony Air 2023-11-22 02:19:16 +02:00
parent c674bf539d
commit d2a2513837
3 changed files with 72 additions and 38 deletions

View File

@ -40,12 +40,23 @@
} }
to { to {
max-height: 500rem; max-height: 100vh;
max-height: 200vh; overflow: visible;
}
}
@keyframes shrink {
to {
max-height: 0;
overflow: hidden;
}
from {
max-height: 100vh;
overflow: visible; overflow: visible;
} }
} }
.no-transition { .no-transition {
transition: none!important; transition: none !important;
} }

View File

@ -4,6 +4,10 @@ body {
min-height: 100vh; min-height: 100vh;
} }
html {
overflow-y: scroll; // prevent content jumps produced by scroll bar
}
// sticky footer // sticky footer
body { body {
display: flex; display: flex;
@ -16,6 +20,7 @@ body {
--body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)}; --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
--body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)}; --body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
--body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)}; --body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
overflow-y: hidden; // prevent content jumps produced by scroll bar
.wrapper { .wrapper {
flex: 1 0 auto; flex: 1 0 auto;
@ -29,6 +34,7 @@ body {
} }
@media (min-width: $extra-large-screen) { @media (min-width: $extra-large-screen) {
html, html,
body { body {
font-size: 0.9vw !important; font-size: 0.9vw !important;
@ -95,12 +101,13 @@ option,
a, a,
.a, .a,
.btn { .btn {
&:hover, &:hover,
&.active { &.active {
opacity: 0.8; opacity: 0.8;
> .fa, >.fa,
> .svg-inline--fa { >.svg-inline--fa {
transform: scale(1.5); transform: scale(1.5);
} }
} }
@ -114,8 +121,8 @@ a,
[data-toggle][aria-expanded="true"] { [data-toggle][aria-expanded="true"] {
opacity: 0.8; opacity: 0.8;
> .fa, >.fa,
> .svg-inline--fa { >.svg-inline--fa {
transform: scale(1.5); transform: scale(1.5);
} }
} }

View File

@ -6,6 +6,22 @@
animation: fade 0.5s linear infinite; animation: fade 0.5s linear infinite;
} }
// slower animation speed for big objects
.carousel__img.loading {
animation: fade 3s linear infinite;
}
main.loading {
animation: shrink 0.5s linear 1;
max-height: 0;
overflow: hidden;
}
main.loaded {
animation: expand 0.5s linear 1;
max-height: fit-content;
}
.graphql-page { .graphql-page {
&.response-404 { &.response-404 {
cursor: not-allowed; cursor: not-allowed;