diff --git a/extension.json b/extension.json index 19fcf66d9..fed228090 100644 --- a/extension.json +++ b/extension.json @@ -388,6 +388,11 @@ "styles/mw.echo.ui.CrossWikiUnreadFilterWidget.less", "styles/mw.echo.ui.SpecialHelpMenuWidget.less" ], + "skinStyles": { + "minerva": [ + "styles/mw.echo.ui.NotificationsInboxWidget.minerva.less" + ] + }, "dependencies": [ "ext.echo.ui", "mediawiki.Uri", diff --git a/modules/mobile/overlay.less b/modules/mobile/overlay.less index d38f79204..c0e511f1b 100644 --- a/modules/mobile/overlay.less +++ b/modules/mobile/overlay.less @@ -2,6 +2,8 @@ @import 'mediawiki.ui/variables.less'; @import 'mediawiki.mixins.less'; +@overlayHeaderHeight: 3em; + .notifications-overlay { // position: fixed + sliding drawer causes weird rendering bugs in Android // Browser (tested on 4.0.4 and 4.2.1) @@ -13,7 +15,7 @@ &-overlay { position: absolute; - bottom: 3em; + bottom: @overlayHeaderHeight; right: 0; left: 0; z-index: 1; @@ -44,10 +46,18 @@ padding-top: 0; padding-bottom: 0; max-width: none; // T219320 + top: @overlayHeaderHeight; + bottom: @overlayHeaderHeight; .mw-echo-ui-notificationsWidget { + top: @overlayHeaderHeight; height: 100%; } + + .mw-echo-ui-notificationItemWidget { + border-left: 0; + border-right: 0; + } } .user-button { diff --git a/modules/styles/mw.echo.ui.NotificationsInboxWidget.minerva.less b/modules/styles/mw.echo.ui.NotificationsInboxWidget.minerva.less new file mode 100644 index 000000000..1343ba4a3 --- /dev/null +++ b/modules/styles/mw.echo.ui.NotificationsInboxWidget.minerva.less @@ -0,0 +1,31 @@ +// TODO: These should be mobile customizations done in JS + +.mw-echo-ui-notificationsInboxWidget { + &-sidebar { + // echo notificationsInboxWidget cell + // in the desktop version is hidden + // in the mobile version. + &.mw-echo-ui-notificationsInboxWidget-cell { + display: none; + } + } + + &-main { + &-toolbar { + &-readState { + // echo notificationsInboxWidget cell for readState + // in the desktop version is hidden + // in the mobile version. + &.mw-echo-ui-notificationsInboxWidget-cell { + display: none; + } + } + } + } + + & &-toolbarWrapper { + height: auto; + position: static; + padding-bottom: 0.5em; + } +}