From 32bf846613f524e9aa6d4cd4cb25a5851d559653 Mon Sep 17 00:00:00 2001 From: Jon Robson Date: Fri, 22 Mar 2024 13:05:57 -0700 Subject: [PATCH] Apply history styles to watchlist The changes here only apply to the AMC-disabled mode and only apply when visiting the watchlist with the following configuraton: $wgMFUseDesktopSpecialWatchlistPage = [ 'amc' => true, 'base' => true, ]; This change will allow us eventually to remove the special page in MobileFrontend. Bug: T109277 Change-Id: I15e95cbae77edde36ca822345a461d791ea5f29d --- .../mediawiki.action.history.styles.less | 54 ------- skinStyles/mediawiki.special.changeslist.less | 142 +++++++++++++++++- 2 files changed, 135 insertions(+), 61 deletions(-) diff --git a/skinStyles/mediawiki.action.history.styles.less b/skinStyles/mediawiki.action.history.styles.less index 716f40c79..d95c862fa 100644 --- a/skinStyles/mediawiki.action.history.styles.less +++ b/skinStyles/mediawiki.action.history.styles.less @@ -35,22 +35,8 @@ content: none !important; } } - /* Make the previous link cover the entire row. */ - .mw-history-histlinks-previous { - position: absolute; - right: 0; - left: 0; - top: 0; - bottom: 0; - color: transparent; - z-index: @z-index-above-content; - } &.action-history #pagehistory li { - padding: 12px 16px 12px 85px; - font-size: 1rem; - min-height: 90px; - .history-user a { color: var( --color-subtle ); @@ -58,46 +44,6 @@ word-break: break-word; } } - - .mw-userlink::before { - content: ''; - .cdx-mixin-css-icon( @cdx-icon-user-avatar, var(--color-subtle) ); - margin-right: 8px; - } - - .mw-anonuserlink::before { - .cdx-mixin-css-icon( @cdx-icon-user-anonymous, var(--color-subtle) ); - } - - .mw-tempuserlink::before { - .cdx-mixin-css-icon( @cdx-icon-user-temporary, var(--color-subtle) ); - } - - .comment { - -webkit-line-clamp: 2; - max-height: 2.6em; - color: var( --color-subtle ); - line-height: 1.4; - white-space: normal; - display: -webkit-box; - -webkit-box-orient: vertical; - font-size: 0.875rem; - font-style: normal; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .mw-diff-bytes, - .mw-changeslist-time { - position: absolute; - top: 12px; - left: 16px; - font-size: 0.875rem; - } - - .mw-diff-bytes { - top: 36px; } } diff --git a/skinStyles/mediawiki.special.changeslist.less b/skinStyles/mediawiki.special.changeslist.less index f107e2f9f..59bf30462 100644 --- a/skinStyles/mediawiki.special.changeslist.less +++ b/skinStyles/mediawiki.special.changeslist.less @@ -14,11 +14,6 @@ font-size: @font-size-tag-line; } -.mw-changeslist h4 { - font-size: @font-size-h3; - padding: 1em 0 0 0 !important; // overriding .content h4 -} - ul.mw-contributions-list, ul.special { padding-left: 0 !important; // overriding `.content ul` @@ -184,8 +179,141 @@ ul.mw-contributions-list li .mw-rollback-link { } // `.content` must be specified to override padding of -// `.content h2` rule provided by ResourceLoaderSkinModule. -.content .mw-index-pager-list-header { +// `.content h2` and `.content h4` rule provided by ResourceLoaderSkinModule. +// Must apply to Watchlist h4s which currently do not use mw-index-pager-list-header. +.content .mw-index-pager-list-header, +.mw-special-Watchlist .content h4 { .changeslist-header(); box-sizing: border-box; } + +.mw-mf-amc-disabled { + /* Watchlist modifications */ + &.mw-special-Watchlist { + /* Traditionally not in default experience for mobile. + Can be restored once have design and PM approves. */ + .mw-pager-tool, + .mw-changeslist-history, + .mw-tag-markers, + .mw-pager-tools, + .mw-usertoollinks, + /* visually not needed */ + .mw-changeslist-separator--semicolon, + .mw-changeslist-separator { + display: none; + } + + .mw-title { + /* Negative margin to counteract ‎ tags providing enforced spacing. */ + margin: 0 0 -1em; + display: block; + float: none; + + a { + color: var( --color-subtle ); + } + } + + .mw-userlink { + color: var( --color-subtle ); + display: block; + + bdi { + word-break: break-word; + } + } + + /* disable pseudo UI */ + .mw-changeslist-links > span::after, + .mw-changeslist-links > span::before { + content: none; + } + + .mw-history-histlinks-previous, + .mw-changeslist-diff { + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + color: transparent; + z-index: @z-index-above-content; + } + + /** Reduce clutter on mobile devices. Users can use "Use desktop site" to reveal these. */ + @media all and ( max-width: @width-breakpoint-tablet ) { + /* Reduce space at top of page */ + .mw-rcfilters-ui-filterWrapperWidget-bottom-mobile, + .mw-rcfilters-ui-watchlistTopSectionWidget, + .mw-rcfilters-ui-watchlistTopSectionWidget-watchlistDetails, + .mw-rcfilters-ui-watchlistTopSectionWidget-savedLinksTable { + display: none; + } + /* Since we hid the above elements no need to compensate with a minimum height */ + .mw-rcfilters-head { + min-height: auto !important; + } + /* Space reserved while filters load. */ + .watchlistDetails { + visibility: hidden; + } + /* Make "Active filters" fill up entire page when collapsed. */ + .mw-rcfilters-ui-filterTagMultiselectWidget { + /* Important so it also applies to collapsed view. */ + width: 100% !important; + } + } + } + + /** These apply to history and watchlist page */ + &.mw-special-Watchlist, + &.action-history { + .mw-diff-bytes, + .mw-changeslist-time { + position: absolute; + top: 12px; + left: 16px; + font-size: 0.875rem; + } + + .mw-diff-bytes { + top: 36px; + } + + .mw-changeslist li, + .mw-contributions-list li { + padding: 12px 16px 12px 85px; + font-size: 1rem; + min-height: 90px; + box-sizing: border-box; + + .comment { + -webkit-line-clamp: 2; + max-height: 2.6em; + color: var( --color-subtle ); + line-height: 1.4; + white-space: normal; + display: -webkit-box; + -webkit-box-orient: vertical; + font-size: 0.875rem; + font-style: normal; + overflow: hidden; + text-overflow: ellipsis; + } + + .mw-userlink::before { + content: ''; + .cdx-mixin-css-icon( @cdx-icon-user-avatar, var(--color-subtle) ); + margin-right: 8px; + } + + .mw-anonuserlink::before { + .cdx-mixin-css-icon( @cdx-icon-user-anonymous, var(--color-subtle) ); + } + + .mw-tempuserlink::before { + .cdx-mixin-css-icon( @cdx-icon-user-temporary, var(--color-subtle) ); + } + } + } +}