@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 {
border: 0;
}
+ // Reserve space for the UI while it loads
.rcfilters-head {
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;
+ }
+
body:not( .mw-rcfilters-ui-initialized ) .rcfilters-head {
opacity: 0.5;
pointer-events: none;
// message of our own
display: none;
}
+
+ // Reserve space for the highlight circles
+ ul,
+ table.mw-enhanced-rc {
+ .result-circle-margin();
+ }
}
body.mw-rcfilters-ui-loading .mw-changeslist {
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 {
}
}
+// A mixin for changes list containers. Applies enough margin-left to fit the 5 highlight circles.
+.result-circle-margin() {
+ margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
+}
+
// A mixin just for changesListWrapperWidget page, to output the scope of the widget
// so it is before the rest of the rule; we need the li& to be in
// between the wrapper scope and the color-cX class, which doesn't
background-color: #dee0e3;
}
- h4:first-of-type {
- margin-top: 0;
- padding-top: 0;
- }
-
- ul {
- // Each li's margin-left should be the width of the highlights
- // element + the margin
- margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
- }
-
&-highlighted {
ul {
list-style: none;
// Correction for Enhanced RC
// This is outside the scope of the 'highlights' wrapper
table.mw-enhanced-rc {
- margin-left: ~'calc( ( @{result-circle-diameter} + @{result-circle-margin} ) * 5 + @{result-circle-general-margin} )';
-
td:last-child {
width: 100%;
}
float: right;
}
- .mw-rcfilters-ui-table {
+ &-savedLinksTable {
margin-top: 1em;
}
// We handle our own display/hide of the empty results message
.removeClass( 'mw-changeslist-empty' );
- this.setupNewChangesButtonContainer( this.$element );
+ this.setupNewChangesButtonContainer();
};
/* Initialization */
/**
* Setup the container for the 'new changes' button.
- *
- * @param {jQuery} $content
*/
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function ( $content ) {
+ mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function () {
this.showNewChangesLink = new OO.ui.ButtonWidget( {
framed: false,
label: mw.message( 'rcfilters-show-new-changes' ).text(),
this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
this.showNewChangesLink.toggle( false );
- $content.before(
+ // HACK: Add the -newChanges div inside rcfilters-head, rather than right above us
+ // Visually it's the same place, but by putting it inside rcfilters-head we are
+ // able to use the min-height rule to prevent the page from jumping when this is added.
+ this.$element.parent().find( '.rcfilters-head' ).append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' )
.append( this.showNewChangesLink.$element )
$bottomTable = $( '<div>' )
.addClass( 'mw-rcfilters-ui-table' )
+ .addClass( 'mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable' )
.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-row' )