r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Fixes #1284 - Center loader in sketch list, collection list, and asset list

Browse source
This commit is contained in:
Cassie Tarakajian 2020-04-02 13:43:34 -04:00
parent eeb7e345f3
commit 68d4bddf66
4 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
client/modules/App/components/loader.jsx
View file

@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
const Loader = () => ( const Loader = () => (
<div className="loader"> <div className="loader-container">
<div className="loader__circle1" /> <div className="loader">
<div className="loader__circle2" /> <div className="loader__circle1" />
<div className="loader__circle2" />
</div>
</div> </div>
); );
export default Loader; export default Loader;

2
client/styles/components/_asset-list.scss
View file

@ -1,7 +1,7 @@
.asset-table-container { .asset-table-container {
overflow-y: auto; overflow-y: auto;
max-width: 100%; max-width: 100%;
min-height: #{400 / $base-font-size}rem; min-height: 100%;
} }
.asset-table { .asset-table {

10
client/styles/components/_loader.scss
View file

@ -1,9 +1,17 @@
.loader-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loader { .loader {
width: #{80 / $base-font-size }rem; width: #{80 / $base-font-size }rem;
height: #{80 / $base-font-size}rem; height: #{80 / $base-font-size}rem;
position: relative; position: relative;
margin: #{100 / $base-font-size}rem auto;
} }
.loader__circle1, .loader__circle1,

2
client/styles/components/_sketch-list.scss
View file

@ -1,7 +1,7 @@
.sketches-table-container { .sketches-table-container {
overflow-y: auto; overflow-y: auto;
max-width: 100%; max-width: 100%;
min-height: #{400 / $base-font-size}rem; min-height: 100%;
} }
.sketches-table { .sketches-table {