about summary refs log tree commit diff
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-12-17 21:32:27 +0100
committerThibG <thib@sitedethib.com>2018-12-17 22:14:06 +0100
commit30de4e4dfccfde6e8fffce40fb7c1e47b06dc3be (patch)
tree4133d6374c4cf809e7e4a5a3a654ac91ca8fb940
parent8266d224effd3f92317cd68020ad8155b37d90b4 (diff)
[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
-rw-r--r--app/javascript/flavours/glitch/features/account_gallery/index.js2
-rw-r--r--app/javascript/flavours/glitch/styles/components/index.scss15
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 = <LoadMore visible={!isLoading} onClick={this.handleLoadOlder} />;
     }
 
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);
 }