Merge "Fix changes list misaligned arrow"

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / styles / mw.rcfilters.less

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index cc5ecd4..7e2a67d 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,22 +1,57 @@
 @import 'mediawiki.mixins.animation';
+@import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
 
+@rcfilters-spinner-width: 70px;
+@rcfilters-head-min-height: 250px;
+@rcfilters-wl-head-min-height: 320px;
+
 // Corrections for the standard special page
 .client-js {
        .cloptions {
                border: 0;
        }
 
+       // Reserve space for the UI while it loads
        .rcfilters-head {
-               min-height: 200px;
+               min-height: @rcfilters-head-min-height;
+       }
+
+       // On the watchlist, reserve a bit more
+       .mw-special-Watchlist .rcfilters-head {
+               min-height: @rcfilters-wl-head-min-height;
+       }
+
+       .mw-recentchanges-toplinks {
+               margin-bottom: 0.5em;
+               padding: 0 0.5em 0.5em 0.5em;
+               border: 1px solid transparent;
+
+               &:not( .mw-recentchanges-toplinks-collapsed ) {
+                       // Same as the legend
+                       border: 1px solid @colorGray12;
+               }
+       }
+
+       body:not( .mw-rcfilters-ui-initialized ) {
+               .mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
+                       // Similar to the watchlist-details hack, we are going to make this float left
+                       // while loading to prevent jumpiness in the min-height calculation
+                       float: left;
+
+                       .mw-recentchanges-toplinks-content {
+                               display: none;
+                       }
+               }
 
-               &:not( .mw-rcfilters-ui-ready ) {
+               .rcfilters-head {
                        opacity: 0.5;
                        pointer-events: none;
 
                        .cloptions {
                                display: none;
                        }
+
                }
        }
 
@@ -33,21 +68,27 @@
                        display: none;
                }
 
-               &:not( .mw-rcfilters-ui-ready ) {
-                       opacity: 0.5;
+               // Reserve space for the highlight circles
+               ul,
+               table.mw-enhanced-rc {
+                       .result-circle-margin();
                }
        }
 
+       body.mw-rcfilters-ui-loading .mw-changeslist {
+               opacity: 0.5;
+       }
+
        .rcfilters-spinner {
-               margin: -2em auto 0;
-               width: 70px;
-               opacity: 0.8;
                display: none;
-               white-space: nowrap;
+               position: absolute;
+               left: 50%;
+               width: @rcfilters-spinner-width;
+               // Make sure the middle of the spinner is centered, rather than its left edge
+               margin-left: -@rcfilters-spinner-width/2;
 
-               &:not( .mw-rcfilters-ui-ready ) {
-                       display: block;
-               }
+               opacity: 0.8;
+               white-space: nowrap;
 
                & .rcfilters-spinner-bounce,
                &:before,
@@ -56,7 +97,7 @@
                        display: inline-block;
                        width: 12px;
                        height: 12px;
-                       background-color: #c8ccd1;
+                       background-color: @colorGray12;
                        border-radius: 100%;
                        .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
                }
@@ -69,12 +110,27 @@
                        .animation-delay( 0s );
                }
        }
+       body:not( .mw-rcfilters-ui-initialized ) .rcfilters-spinner {
+               display: block;
+               // When initializing, display the spinner on top of the area where the UI will appear
+               margin-top: -@rcfilters-head-min-height/2;
+       }
+       body.mw-rcfilters-ui-loading .rcfilters-spinner {
+               display: block;
+               // When loading new results, display the spinner on top of the results area
+               margin-top: 2em;
+       }
 
        #contentSub,
-       .watchlistDetails,
        form#mw-watchlist-resetbutton {
                display: none;
        }
+
+       // Make the watchlist-details message display while loading, but make it not take up any
+       // space. This makes the min-height trick work better.
+       .watchlistDetails {
+               float: left;
+       }
 }
 
 .mw-rcfilters-staticfilters-selected {
@@ -89,7 +145,7 @@
                transform: scale( 0.7 );
        }
        40% {
-               background-color: #a2a9b1;
+               background-color: @colorGray10;
                -webkit-transform: scale( 1 );
                transform: scale( 1 );
        }
@@ -103,7 +159,7 @@
                transform: scale( 0.7 );
        }
        40% {
-               background-color: #a2a9b1;
+               background-color: @colorGray10;
                -moz-transform: scale( 0.7 );
                transform: scale( 1 );
        }
@@ -116,7 +172,7 @@
                transform: scale( 0.7 );
        }
        40% {
-               background-color: #a2a9b1;
+               background-color: @colorGray10;
                transform: scale( 1 );
        }
 }