From c1ca57b8605f1367c1ea63dafe289edc94258cc7 Mon Sep 17 00:00:00 2001 From: Jan Drewniak Date: Tue, 24 Sep 2019 11:26:20 +0200 Subject: [PATCH] Improve the top section of Special:Watchlist for small screens Bug: T225127#5518870 Change-Id: I2d3e2cf27150487190b34cc9b76db9905599e27b --- .../mediawiki.rcfilters/styles/mw.rcfilters.less | 12 ++++++++++++ ...w.rcfilters.ui.WatchlistTopSectionWidget.less | 16 ++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index dff7881bbb..9559d3af4a 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less @@ -181,6 +181,18 @@ font-weight: bold; } +// on smaller screen, set .watchlistDetail to full width +// so that the spinner doesn't appear beside it. T225127#5518870 +@media screen and ( max-width: @width-breakpoint-tablet ) { + .client-js { + /* stylelint-disable-next-line selector-class-pattern */ + .watchlistDetails { + float: none; + width: auto; + } + } +} + @-webkit-keyframes rcfiltersBouncedelay { // 50% equals 800ms 0%, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less index 52f7ff20fc..75da5ddc5d 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less @@ -31,3 +31,19 @@ border-top: 2px solid @colorGray14; } } + +// On small screens, remove the table properties from the +// top section. T225127#5518870 +@media screen and ( max-width: @width-breakpoint-tablet ) { + .mw-rcfilters-ui-watchlistTopSectionWidget { + .mw-rcfilters-ui-table, + .mw-rcfilters-ui-row, + .mw-rcfilters-ui-cell { + display: block; + } + + &-editWatchlistButton { + margin-top: 1em; + } + } +} -- 2.20.1