X-Git-Url: http://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.rcfilters%2Fstyles%2Fmw.rcfilters.less;h=ef358e0944ebc0010fa4140b3edb17c5d7d09586;hb=433d2480f994932162da94b857e1d297d59cd4c8;hp=dd4f9d45d5f3d98efacceadca8b57f08e379e90a;hpb=d36805669ed93d203ddec9287b07d046f1f93905;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 dd4f9d45d5..ef358e0944 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,8 +1,10 @@
 @import 'mediawiki.mixins.animation';
+@import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
 
 @rcfilters-spinner-width: 70px;
-@rcfilters-head-min-height: 200px;
+@rcfilters-head-min-height: 250px;
+@rcfilters-wl-head-min-height: 320px;
 
 // Corrections for the standard special page
 .client-js {
@@ -10,15 +12,46 @@
 		border: 0;
 	}
 
+	// Reserve space for the UI while it loads
 	.rcfilters-head {
 		min-height: @rcfilters-head-min-height;
 	}
-	body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head {
-		opacity: 0.5;
-		pointer-events: none;
 
-		.cloptions {
-			display: none;
+	// 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;
+			}
+		}
+
+		.rcfilters-head {
+			opacity: 0.5;
+			pointer-events: none;
+
+			.cloptions {
+				display: none;
+			}
+
 		}
 	}
 
@@ -28,14 +61,20 @@
 	}
 
 	.mw-changeslist {
-		&-empty {
-			// Hide the 'empty' message when we load rcfilters
-			// since we replace it anyways with a specific
-			// message of our own
-			display: none;
+		// Reserve space for the highlight circles
+		ul,
+		table.mw-enhanced-rc {
+			.result-circle-margin();
 		}
 	}
 
+	// Temporarily hide any 'empty' or 'timeout' message while we
+	// load rcfilters.
+	.mw-changeslist-empty,
+	.mw-changeslist-timeout {
+		display: none;
+	}
+
 	body.mw-rcfilters-ui-loading .mw-changeslist {
 		opacity: 0.5;
 	}
@@ -58,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 );
 		}
@@ -79,13 +118,19 @@
 	body.mw-rcfilters-ui-loading .rcfilters-spinner {
 		display: block;
 		// When loading new results, display the spinner on top of the results area
-		margin-top: 4em;
+		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 {
@@ -100,7 +145,7 @@
 		transform: scale( 0.7 );
 	}
 	40% {
-		background-color: #a2a9b1;
+		background-color: @colorGray10;
 		-webkit-transform: scale( 1 );
 		transform: scale( 1 );
 	}
@@ -114,7 +159,7 @@
 		transform: scale( 0.7 );
 	}
 	40% {
-		background-color: #a2a9b1;
+		background-color: @colorGray10;
 		-moz-transform: scale( 0.7 );
 		transform: scale( 1 );
 	}
@@ -127,7 +172,7 @@
 		transform: scale( 0.7 );
 	}
 	40% {
-		background-color: #a2a9b1;
+		background-color: @colorGray10;
 		transform: scale( 1 );
 	}
 }