wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-09-24 02:39:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Fix notification page width responsiveness issues"

Browse source
This commit is contained in:
jenkins-bot 2016-09-02 17:22:00 +00:00 committed by Gerrit Code Review
parent cf7cf0dd66 b54576564b
commit 05d05d2c56
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;
}
@ -149,7 +149,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 {