From: petarpetkovic <ppetkovic@wikimedia.org>
Date: Wed, 6 Dec 2017 17:56:23 +0000 (+0100)
Subject: RCFilters: Reserve space between filters and results
X-Git-Tag: 1.31.0-rc.0~1272
X-Git-Url: https://git.cyclocoop.org/%7B%24admin_url%7Dmembres/cotisations/Bar?a=commitdiff_plain;h=3318cbb6355d999fc27440766a1ade0ad55d5092;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Reserve space between filters and results

- Add bottom margin to RCFilters head. There is no more reserved space
for "View newest changes" link, so we need to make sure we have enough
white space separator between head and results.

Bug: T182149
Change-Id: I592ab7bb1f12785d5bd802bb16f11b4e74fb26b7
---

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 74b81fa16d..84b4654763 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -2,9 +2,10 @@
 @import 'mediawiki.ui/variables';
 @import 'mw.rcfilters.mixins';
 
-@rcfilters-spinner-width: 70px;
-@rcfilters-head-min-height: 250px;
-@rcfilters-wl-head-min-height: 320px;
+@rcfilters-spinner-size: 12px;
+@rcfilters-head-min-height: 210px;
+@rcfilters-head-margin-bottom: 20px;
+@rcfilters-wl-head-min-height: 300px;
 
 // Corrections for the standard special page
 .client-js {
@@ -15,6 +16,7 @@
 	// Reserve space for the UI while it loads
 	.rcfilters-head {
 		min-height: @rcfilters-head-min-height;
+		margin-bottom: @rcfilters-head-margin-bottom;
 	}
 
 	// On the watchlist, reserve a bit more
@@ -65,11 +67,6 @@
 		}
 	}
 
-	.rcfilters-container {
-		min-height: 100px;
-		margin: 0;
-	}
-
 	.mw-changeslist {
 		// Reserve space for the highlight circles
 		ul,
@@ -93,9 +90,8 @@
 		display: none;
 		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;
+		margin-left: -3 * @rcfilters-spinner-size / 2;
 
 		opacity: 0.8;
 		white-space: nowrap;
@@ -105,8 +101,8 @@
 		&:after {
 			content: '';
 			display: inline-block;
-			width: 12px;
-			height: 12px;
+			width: @rcfilters-spinner-size;
+			height: @rcfilters-spinner-size;
 			background-color: @colorGray12;
 			border-radius: 100%;
 			.animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both );
@@ -123,7 +119,7 @@
 	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;
+		margin-top: -( @rcfilters-head-min-height + @rcfilters-head-margin-bottom ) / 2;
 	}
 	body.mw-rcfilters-ui-loading .rcfilters-spinner {
 		display: block;