Minor scrollable list fixes (#9551)

* Make sure loading indicator has enough vertical space

* Respect reduce_motion setting for loading indicator
main
ThibG 2018-12-17 17:02:59 +01:00 committed by Eugen Rochko
parent 3281df0df1
commit 4ede51743e
2 changed files with 13 additions and 4 deletions

View File

@ -103,7 +103,7 @@ 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} />;
} }

View File

@ -2153,6 +2153,7 @@ a.account__display-name {
&__append { &__append {
flex: 1 1 auto; flex: 1 1 auto;
position: relative; position: relative;
min-height: 120px;
} }
} }
@ -2946,7 +2947,6 @@ a.status-card.compact:hover {
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);
} }
} }
@ -2955,11 +2955,20 @@ a.status-card.compact:hover {
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);
} }