From 30de4e4dfccfde6e8fffce40fb7c1e47b06dc3be Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Mon, 17 Dec 2018 21:32:27 +0100 Subject: [PATCH] [Glitch] Minor scrollable list fixes * Make sure loading indicator has enough vertical space * Respect reduce_motion setting for loading indicator Port 4ede51743e5b9121a49e9131f91cf012fab410f8 to glitch-soc --- .../glitch/features/account_gallery/index.js | 2 +- .../flavours/glitch/styles/components/index.scss | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/features/account_gallery/index.js b/app/javascript/flavours/glitch/features/account_gallery/index.js index 3f61af0e8..a5fa01444 100644 --- a/app/javascript/flavours/glitch/features/account_gallery/index.js +++ b/app/javascript/flavours/glitch/features/account_gallery/index.js @@ -107,7 +107,7 @@ export default class AccountGallery extends ImmutablePureComponent { ); } - if (hasMore) { + if (hasMore && !(isLoading && medias.size === 0)) { loadOlder = ; } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 873dfa98d..8e90aa545 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -606,6 +606,7 @@ &__append { flex: 1 1 auto; position: relative; + min-height: 120px; } } @@ -992,7 +993,6 @@ transform: translateX(-50%); margin: 82px 0 0 50%; 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%; left: 50%; transform: translate(-50%, -50%); - width: 0; - height: 0; + width: 42px; + height: 42px; box-sizing: border-box; + background-color: transparent; border: 0 solid lighten($ui-base-color, 26%); + border-width: 6px; 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); }