mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

LoadingIndicator: refactor styles, improve look of ColumnLoading

merge-requests/784/head
Alex Gleason 2021-10-04 16:46:55 -05:00
rodzic 63a001ae7d
commit 115d324e9b
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
5 zmienionych plików z 39 dodań i 14 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
app/index.ejs
Wyświetl plik

@ -11,7 +11,9 @@
<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__figure"></div>
<div class="loading-indicator__container">
<div class="loading-indicator__figure"></div>
</div>
</div>
</div>
<noscript>To use this website, please enable JavaScript.</noscript>

4
app/soapbox/components/loading_indicator.js
Wyświetl plik

@ -3,7 +3,9 @@ import { FormattedMessage } from 'react-intl';
const LoadingIndicator = () => (
<div className='loading-indicator'>
<div className='loading-indicator__figure' />
<div className='loading-indicator__container'>
<div className='loading-indicator__figure' />
</div>
<span><FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' /></span>
</div>
);

7
app/soapbox/features/ui/components/column_loading.js
Wyświetl plik

@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import Column from '../../../components/column';
import Column from './column';
import ColumnHeader from '../../../components/column_header';
import ImmutablePureComponent from 'react-immutable-pure-component';
import LoadingIndicator from 'soapbox/components/loading_indicator';
@ -23,7 +22,9 @@ export default class ColumnLoading extends ImmutablePureComponent {
return (
<Column>
<ColumnHeader icon={icon} title={title} focusable={false} />
<LoadingIndicator />
<div className='column-loading'>
<LoadingIndicator />
</div>
</Column>
);
}

10
app/styles/components/columns.scss
Wyświetl plik

@ -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;
}

28
app/styles/loading.scss
Wyświetl plik

@ -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,8 +45,14 @@
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
.app-body--loading .loading-indicator__figure {
border-color: #ddd;
.app-body--loading .loading-indicator {
width: 100vw;
height: 100vh;
align-items: center;
&__figure {
border-color: #ddd;
}
}
@keyframes loader-figure {