RCFilters: Make the interface not jump around while loading
authorRoan Kattouw <roan.kattouw@gmail.com>
Thu, 21 Sep 2017 00:11:22 +0000 (17:11 -0700)
committerCatrope <roan@wikimedia.org>
Thu, 21 Sep 2017 16:58:31 +0000 (16:58 +0000)
commita0c00f005388c87461cb8f398accbe3967791df5
treeaa5e1390e7d7bfe8d0c41cc0f4dd9eddc6de6926
parentd36805669ed93d203ddec9287b07d046f1f93905
RCFilters: Make the interface not jump around while loading

* Move the "show new changes" widget into the .rcfilters-head container
** It doesn't conceptually belong here, but this way the min-height
   trick can capture it
* Increase the min-height to account for "show new changes" and drift
* Set a different (higher) min-height on the watchlist
* Adjust the loading spinner position to account for "show new changes" having moved
* Don't apply a margin-top to the first table in WatchlistTopSectionWidget,
  only the second one
* Make .watchlistDetails float while loading
** This is because it starts outside rcfilters-head but is then moved into it.
   Floating it makes it not take any space, which makes the min-height math
   a lot easier (and tolerant to taller .watchlistDetails divs like on enwiki)
* Don't remove the margin and padding from the first h4, this causes jumpiness
** This does increase whitespace slightly, if we want to fix that we could
   set a negative margin-bottom on rcfilters-head instead
* Move the margin-left rules making space for the highlights into a mixin,
  and apply it before initialization instead of after

Bug: T176300
Change-Id: I353deab90cd944209d7540559c6b41decad20e7d
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.WatchlistTopSectionWidget.js