jenkins-bot has submitted this change and it was merged.
Change subject: Fix notification page width responsiveness issues
......................................................................
Fix notification page width responsiveness issues
Have the page hide the sidebar at 982px, when there is
not enough room for both (and when vector switches down to SD).
Make inbox responsive when resizing.
Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
---
M modules/echo.variables.less
M modules/nojs/mw.echo.special.less
M modules/styles/mw.echo.ui.DatedSubGroupListWidget.less
M modules/styles/mw.echo.ui.NotificationItemWidget.less
M modules/styles/mw.echo.ui.NotificationsInboxWidget.less
5 files changed, 12 insertions(+), 28 deletions(-)
Approvals:
Mooeypoo: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/echo.variables.less b/modules/echo.variables.less
index f6f0b9a..f70cf4e 100644
--- a/modules/echo.variables.less
+++ b/modules/echo.variables.less
@@ -22,10 +22,9 @@
@specialpage-separation-unit: 0.7em;
@specialpage-sidebar-width: 20em;
-@specialpage-mobile-width-small: 320px;
-@specialpage-mobile-width-medium: 768px;
+@specialpage-hd-width: 982px;
-@specialpage-width: 700px;
+@specialpage-width: 1000px;
@grey-light: #777;
@grey-medium: #555;
diff --git a/modules/nojs/mw.echo.special.less
b/modules/nojs/mw.echo.special.less
index 5b308b6..3eddbad 100644
--- a/modules/nojs/mw.echo.special.less
+++ b/modules/nojs/mw.echo.special.less
@@ -23,7 +23,7 @@
display: none;
}
-@media all and ( min-width: @specialpage-mobile-width-medium ) {
+@media all and ( min-width: @specialpage-hd-width ) {
.client-js #mw-content-text {
margin-top: 2em;
}
@@ -165,7 +165,7 @@
margin: 0;
}
-@media all and ( max-width: @specialpage-mobile-width-medium ) {
+@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
.pre-content.heading-holder {
// Center 'preferences' in mobile special page
text-align: center;
diff --git a/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less
b/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less
index edd109f..6582873 100644
--- a/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less
+++ b/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less
@@ -1,11 +1,5 @@
@import '../echo.variables';
.mw-echo-ui-datedSubGroupListWidget {
- // We have to reiterate the fixed width here so that the
- // concatenation works inside the items. This is an issue
- // with css' table-layout, which notification items are
- // set to
- width: @specialpage-width;
-
&-title {
font-weight: normal;
@@ -24,10 +18,7 @@
}
}
- @media all and ( max-width: @specialpage-mobile-width-medium ) {
- // Make narrow
- width: @specialpage-mobile-width-small;
-
+ @media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
.mw-echo-ui-subGroupListWidget-header-row-markAllReadButton {
font-size: 0.8em;
}
@@ -39,10 +30,5 @@
&-title-secondary {
display: none;
}
- }
-
- @media all and ( max-width: @specialpage-mobile-width-small ) {
- // Make narrow with margin
- width: @specialpage-mobile-width-small - 32px;
}
}
diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less
b/modules/styles/mw.echo.ui.NotificationItemWidget.less
index 1285a3a..795ff67 100644
--- a/modules/styles/mw.echo.ui.NotificationItemWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less
@@ -147,7 +147,7 @@
&-header {
width: 100%;
- @media all and ( min-width:
@specialpage-mobile-width-medium ) {
+ @media all and ( min-width:
@specialpage-hd-width ) {
// On small screens,
don't truncate
position: absolute;
.mw-echo-ui-mixin-one-line-truncated;
diff --git a/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
b/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
index 20c50e5..62be1d6 100644
--- a/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationsInboxWidget.less
@@ -1,6 +1,9 @@
@import '../echo.variables';
.mw-echo-ui-notificationsInboxWidget {
- width: @specialpage-width;
+ display: table;
+ width: 100%;
+ max-width: @specialpage-width;
+
&-row {
display: table-row;
width: 100%;
@@ -19,7 +22,7 @@
padding-right: 1em;
vertical-align: top;
- @media all and ( max-width: @specialpage-mobile-width-medium ) {
+ @media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
// Hide the sidebar for small screens
display: none;
}
@@ -27,7 +30,6 @@
&-main {
vertical-align: top;
- width: 100%;
&-toolbar {
&-top {
@@ -50,10 +52,7 @@
}
}
- @media all and ( max-width: @specialpage-mobile-width-medium ) {
- // Make narrow
- width: @specialpage-mobile-width-small;
-
+ @media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
// Override table-layout for the top toolbar so we get
// filters and pagination under one another
&-main {
--
To view, visit https://gerrit.wikimedia.org/r/308113
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Esanders <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
