Core mods to fix Loading Indicator usage

flarum · Apr 5, 2021 · 70f79c3 · 70f79c3
1 parent 6ad117a
commit 70f79c3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 9 deletions.
diff --git a/less/common/Checkbox.less b/less/common/Checkbox.less
@@ -15,13 +15,9 @@
     float: left;
     margin-left: -65px;
     margin-top: -4px;
-
-    .LoadingIndicator {
-      display: inline-block;
-      margin-left: 20px;
-    }
   }
 }
+
 .Checkbox--switch .Checkbox-display {
   width: 50px;
   height: 28px;
@@ -31,8 +27,28 @@
   background: @control-bg;
   .transition(background-color 0.2s);
 
+  .LoadingIndicator {
+    --size: 22px !important;
+
+    &-container {
+      height: 22px;
+    }
+  }
+
   .on& {
     background: #58a400;
+
+    .LoadingIndicator-container {
+      // Show loading indicator over the switch button
+      justify-content: flex-end;
+    }
+  }
+
+  .off& {
+    .LoadingIndicator-container {
+      // Show loading indicator over the switch button
+      justify-content: flex-start;
+    }
   }
 
   &:before {

diff --git a/less/forum/ActivityPage.less b/less/forum/ActivityPage.less
@@ -2,7 +2,7 @@
   text-align: center;
   margin-top: 10px;
 
-  .LoadingIndicator {
+  .LoadingIndicator-container {
     height: 46px;
   }
 }

diff --git a/less/forum/DiscussionList.less b/less/forum/DiscussionList.less
@@ -10,9 +10,10 @@
 .DiscussionList-loadMore {
   text-align: center;
   margin-top: 10px;
-}
-.DiscussionList-loadMore .LoadingIndicator {
-  height: 46px;
+
+  .LoadingIndicator-container {
+    height: 46px;
+  }
 }
 
 @media @phone {