X-Git-Url: http://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.less;h=80aff74a4f4ab6e9d6fdc0950ece52eb12930648;hb=a0c00f005388c87461cb8f398accbe3967791df5;hp=d5528e1f516b74747d16b2e663c3ef968b2f234b;hpb=e7720b8f8e09287384ddee271641d1b1721318bb;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index d5528e1f51..80aff74a4f 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,46 +1,31 @@
 @import 'mediawiki.mixins.animation';
 @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;
 	}
 
-	.mw-recentchanges-toplinks {
-		padding: 0 0.5em;
-
-		.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
-			padding: 0 2.5em 0 0.5em;
-		}
-
-		&-title,
-		.mw-collapsible-text {
-			// Same as the legend
-			font-size: 0.85em;
-		}
-
-		&:not( .mw-collapsed ) {
-			// Same as the legend
-			border: 1px solid #ddd;
-		}
-
-		&:not( .mw-rcfilters-ui-ready ) {
-			display: none;
-		}
-	}
-
+	// Reserve space for the UI while it loads
 	.rcfilters-head {
-		min-height: 220px;
-		margin-top: 1em;
+		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;
+	}
 
-		&:not( .mw-rcfilters-ui-ready ) {
-			opacity: 0.5;
-			pointer-events: none;
+	body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head {
+		opacity: 0.5;
+		pointer-events: none;
 
-			.cloptions {
-				display: none;
-			}
+		.cloptions {
+			display: none;
 		}
 	}
 
@@ -57,21 +42,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,
@@ -93,6 +84,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,
+	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 {