From 3318cbb6355d999fc27440766a1ade0ad55d5092 Mon Sep 17 00:00:00 2001
From: petarpetkovic <ppetkovic@wikimedia.org>
Date: Wed, 6 Dec 2017 18:56:23 +0100
Subject: [PATCH] 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
---
 .../styles/mw.rcfilters.less                  | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

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;
-- 
2.20.1