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

Make Special:Notifications responsive

Browse source 
As a first step for mobile support, make the page responsive,
hide the sidebar, and slightly adjust button/title positions and
sizes so they fit in a small screen.

Bug: T140687
Change-Id: I98f264948a57924f6370a861381456ce9c82f8d8
This commit is contained in:
Moriel Schottlender 2016-07-19 14:29:15 -07:00
parent 376407fdac
commit 8a69d86d18
4 changed files with 59 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
modules/echo.variables.less
View file

@ -18,6 +18,9 @@
@specialpage-separation-unit: 0.7em;
@specialpage-sidebar-width: 20em;
@specialpage-mobile-width-small: 320px;
@specialpage-mobile-width-medium: 768px;
@specialpage-width: 700px;
@grey-light: #777;

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

@ -152,3 +152,10 @@ ul.mw-echo-special-notifications {
div.mw-htmlform-ooui-wrapper {
margin: 0;
}
@media all and ( max-width: @specialpage-mobile-width-medium ) {
.pre-content.heading-holder {
// Center 'preferences' in mobile special page
text-align: center;
}
}

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

@ -20,4 +20,21 @@
color: #777777;
}
}
@media all and ( max-width: @specialpage-mobile-width-medium ) {
// Make narrow
width: @specialpage-mobile-width-small;
.mw-echo-ui-subGroupListWidget-header-row-markAllReadButton {
font-size: 0.8em;
}
&-title-primary {
font-size: 1.2em;
}
&-title-secondary {
display: none;
}
}
}

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

@ -1,7 +1,6 @@
@import '../echo.variables';
.mw-echo-ui-notificationsInboxWidget {
width: @specialpage-width;
&-row {
display: table-row;
width: 100%;
@ -19,6 +18,11 @@
width: @specialpage-sidebar-width;
padding-right: 1em;
vertical-align: top;
@media all and ( max-width: @specialpage-mobile-width-medium ) {
// Hide the sidebar for small screens
display: none;
}
}
&-main {
@ -42,4 +46,31 @@
}
}
@media all and ( max-width: @specialpage-mobile-width-medium ) {
// Make narrow
width: @specialpage-mobile-width-small;
// Override table-layout for the top toolbar so we get
// filters and pagination under one another
&-main {
&-toolbar {
&-top {
display: block;
margin-bottom: 1em;
.mw-echo-ui-notificationsInboxWidget-row {
display: block;
text-align: center;
}
}
&-readState {
display: inline-block;
}
&-pagination {
display: inline-block;
margin-top: 1em;
}
}
}
}
}