torjus/ministream-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix loading text alignment

Browse Source
This commit is contained in:
Torjus Håkestad 2023-12-06 01:35:16 +01:00
parent 3d333665f2
commit c6a6f46ff8
2 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/css/style.css
View File

@ -23,15 +23,29 @@ body {
font-weight: 600; font-weight: 600;
} }
.loader-wrapper {
margin-top: 10em;
width: 100%;
display: flex;
justify-content: center;
}
.loader { .loader {
display: flex; display: flex;
width: min-content;
vertical-align: middle;
} }
.loader .spinner { .loader .spinner {
margin-top: 0px; margin-top: auto;
margin-bottom: auto;
} }
.loader .loading-text { .loader .loading-text {
margin-top: 0px; margin-top: auto;
margin-bottom: auto;
margin-left: 0.5em; margin-left: 0.5em;
white-space: nowrap;
} }
.video-wrapper { .video-wrapper {
@ -98,6 +112,7 @@ a.menu-heading {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
} }
.menu-viewcount { .menu-viewcount {
font-family: 'Prompt', sans-serif; font-family: 'Prompt', sans-serif;
font-size: larger; font-size: larger;
@ -113,6 +128,7 @@ li.menu-item {
background-color: var(--menu-item-color); background-color: var(--menu-item-color);
margin-top: 1px; margin-top: 1px;
} }
li.menu-item:hover { li.menu-item:hover {
background-color: var(--menu-item-hover); background-color: var(--menu-item-hover);
} }
@ -127,15 +143,20 @@ li.menu-selected {
} }
.spinner { .spinner {
border: 4px solid var(--menu-header-text); border: 4px solid var(--menu-header-text);
border-top: 4px solid var(--menu-selected-color); border-top: 4px solid var(--menu-selected-color);
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
animation: spin 2s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
0% { transform: rotate(0deg); } 0% {
100% { transform: rotate(360deg); } transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} }

8
src/js/media.tsx
View File

@ -156,9 +156,11 @@ export function LoadingText({ text, spinner = false }: LoadingText) {
} }
return ( return (
<> <>
<div className="loader"> <div className="loader-wrapper">
{spinnerElement} <div className="loader">
<p className="loading-text">{text}</p> {spinnerElement}
<p className="loading-text">{text}</p>
</div>
</div> </div>
</> </>
) )