monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Minor scrollable list fixes 

* Make sure loading indicator has enough vertical space
* Respect reduce_motion setting for loading indicator

Port 4ede51743e to glitch-soc
This commit is contained in:
Thibaut Girka 2018-12-17 21:32:27 +01:00 committed by ThibG
parent 8266d224ef
commit 30de4e4dfc
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/features/account_gallery/index.js
View File

@ -107,7 +107,7 @@ export default class AccountGallery extends ImmutablePureComponent {
); );
} }
if (hasMore) { if (hasMore && !(isLoading && medias.size === 0)) {
loadOlder = <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />; loadOlder = <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />;
} }

15
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -606,6 +606,7 @@
&__append { &__append {
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
min-height: 120px;
} }
} }
@ -992,7 +993,6 @@
transform: translateX(-50%); transform: translateX(-50%);
margin: 82px 0 0 50%; margin: 82px 0 0 50%;
white-space: nowrap; white-space: nowrap;
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
} }
} }
@ -1001,11 +1001,20 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 0; width: 42px;
height: 0; height: 42px;
box-sizing: border-box; box-sizing: border-box;
background-color: transparent;
border: 0 solid lighten($ui-base-color, 26%); border: 0 solid lighten($ui-base-color, 26%);
border-width: 6px;
border-radius: 50%; border-radius: 50%;
}
.no-reduce-motion .loading-indicator span {
animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
.no-reduce-motion .loading-indicator__figure {
animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000); animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
} }