wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-23 23:44:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix notification page width responsiveness issues

Browse source 
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
This commit is contained in:
Ed Sanders 2016-09-01 17:52:26 -07:00
parent b40ad3cd3c
commit b54576564b
5 changed files with 12 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
modules/echo.variables.less
View file

@ -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;

4
modules/nojs/mw.echo.special.less
View file

@ -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 @@ div.mw-htmlform-ooui-wrapper {
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;

16
modules/styles/mw.echo.ui.DatedSubGroupListWidget.less
View file

@ -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;
}
@ -40,9 +31,4 @@
display: none;
}
}
@media all and ( max-width: @specialpage-mobile-width-small ) {
// Make narrow with margin
width: @specialpage-mobile-width-small - 32px;
}
}

2
modules/styles/mw.echo.ui.NotificationItemWidget.less
View file

@ -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;

13
modules/styles/mw.echo.ui.NotificationsInboxWidget.less
View file

@ -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 {