bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LoadingIndicator: refactor styles, improve look of ColumnLoading

Browse source
This commit is contained in:
Alex Gleason 2021-10-04 16:46:55 -05:00
parent 63a001ae7d
commit 115d324e9b
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
5 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/index.ejs
View file

@ -11,9 +11,11 @@
<body class="app-body app-body--loading theme-mode-light no-reduce-motion">
<div class="app-holder" id="soapbox">
<div class="loading-indicator">
<div class="loading-indicator__container">
<div class="loading-indicator__figure"></div>
</div>
</div>
</div>
<noscript>To use this website, please enable JavaScript.</noscript>
</body>
</html>

BIN
app/soapbox/components/loading_indicator.js
View file

Binary file not shown.

BIN
app/soapbox/features/ui/components/column_loading.js
View file

Binary file not shown.

10
app/styles/components/columns.scss
View file

@ -867,3 +867,13 @@
.column-list {
position: relative;
}
.column-loading {
background-color: var(--foreground-color);
display: flex;
position: relative;
align-items: center;
justify-content: center;
padding: 15px;
border-radius: 0 0 10px 10px;
}

26
app/styles/loading.scss
View file

@ -4,20 +4,24 @@
font-weight: 400;
text-transform: uppercase;
overflow: visible;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
span {
display: block;
float: left;
transform: translateX(-50%);
margin: 82px 0 0 50%;
margin-top: 10px;
white-space: nowrap;
}
}
.loading-indicator__container {
width: 42px;
height: 42px;
position: relative;
}
.loading-indicator__figure {
position: absolute;
top: 50%;
@ -41,9 +45,15 @@
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.app-body--loading .loading-indicator__figure {
.app-body--loading .loading-indicator {
width: 100vw;
height: 100vh;
align-items: center;
&__figure {
border-color: #ddd;
}
}
@keyframes loader-figure {
0% {