bigbuffet/bigbuffet-rw
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 39 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/index.ejs
View file

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

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

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

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

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

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

@ -867,3 +867,13 @@
.column-list { .column-list {
position: relative; 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
View file

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