Petar.petkovic has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/376629 )
Change subject: Limit CX dashboard width
......................................................................
Limit CX dashboard width
- Add maximum width for CX dashboard to avoid
stretching too much on wide screens.
- Rearrange CSS selectors and media queries
towards more mobile-first design.
Bug: T175004
Change-Id: Ic134ef9a16b4fc51c7af4447bf09446220a24074
---
M modules/dashboard/ext.cx.dashboard.js
M modules/dashboard/styles/ext.cx.dashboard.less
M modules/widgets/translator/ext.cx.translator.less
3 files changed, 49 insertions(+), 26 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/29/376629/1
diff --git a/modules/dashboard/ext.cx.dashboard.js
b/modules/dashboard/ext.cx.dashboard.js
index 1b6cf7b..74dfdf7 100644
--- a/modules/dashboard/ext.cx.dashboard.js
+++ b/modules/dashboard/ext.cx.dashboard.js
@@ -27,7 +27,6 @@
this.$listHeader = null;
this.$sourceSelector = null;
this.narrowLimit = 700;
- this.wideLimit = 1200;
this.isNarrowScreenSize = false;
this.filterLabels = {};
@@ -418,7 +417,7 @@
CXDashboard.prototype.scroll = function () {
var scrollTop = $( window ).scrollTop();
- if ( this.wideLimit && scrollTop > 0 ) {
+ if ( scrollTop > 0 ) {
this.$sidebar.addClass( 'sticky' );
} else {
this.$sidebar.removeClass( 'sticky' );
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index 8f8b962..cea58ae 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -16,6 +16,7 @@
// Container for list of items in dashboard has padding equal to following
variable value.
// Following variable is also used to align sticky header with container
@translationlist-container-padding-right: 10px;
+@maximum-dashboard-width: 1500px;
body {
background-color: @colorGray14;
@@ -23,28 +24,42 @@
.cx-dashboard {
color: @gray-darker;
+ max-width: @maximum-dashboard-width;
+ margin: 0 auto;
padding: 20px @dashboard-horizontal-padding;
}
.cx-dashboard-sidebar {
- .mw-ui-one-third;
+ .mw-ui-one-whole;
- padding: 0 0 0 20px;
- line-height: 1;
margin-bottom: 48px;
-
- @media only screen and ( max-width: @wide ) {
- .mw-ui-one-whole;
-
- padding: 0;
- }
+ padding: 0;
+ line-height: 1;
@media only screen and ( min-width: @wide ) {
- &.sticky {
+ .mw-ui-one-third;
+
+ padding: 0 0 0 20px;
+ }
+
+ @media only screen and ( min-width: @maximum-dashboard-width ) {
+ max-width: @maximum-dashboard-width / 3;
+ }
+
+ &.sticky {
+ @media only screen and ( min-width: @wide ) {
position: fixed;
top: @sticky-header-height;
right: @sticky-sidebar-right-position;
padding-right: @sticky-sidebar-width-adjustment;
+ }
+
+ // This assumes @maximum-dashboard-width is bigger than @wide
+ @media only screen and ( min-width: @maximum-dashboard-width ) {
+ right: auto;
+ left: 50%;
+ margin-left: @maximum-dashboard-width / 6;
+ padding-right: 0;
}
}
@@ -102,7 +117,7 @@
.box-shadow-card;
font-size: 16px;
- @media only screen and ( min-width: @narrow ) and ( max-width:
@wide ) {
+ @media only screen and ( min-width: @narrow ) and ( max-width:
( @wide - 1px ) ) {
width: 47.5%;
margin-left: 5%;
}
@@ -131,15 +146,17 @@
}
.cx-translationlist-container {
- .mw-ui-two-thirds;
+ .mw-ui-one-whole;
background-color: @colorGray14;
margin-bottom: 48px;
- padding: 0 @translationlist-container-padding-right 0 0;
+ padding: 0;
- @media only screen and ( max-width: @wide ) {
- .mw-ui-one-whole;
- padding: 0;
+ @media only screen and ( min-width: @wide ) {
+ .mw-ui-two-thirds;
+ // This is needed so sidebar doesn't wiggle
+ width: 66.667%;
+ padding: 0 @translationlist-container-padding-right 0 0;
}
}
@@ -161,14 +178,21 @@
// .cx-tlitem__actions__trigger has a zindex of 100 and the ULS from
language filters
// has a z-index of 1000. So a number in between is chosen.
z-index: 200;
- width: 66.66%;
- padding: 10px 0; // Defines top and bottom padding. Left and right
padding are defined separately for clarity
- padding-right: @sticky-sidebar-right-position +
@translationlist-container-padding-right;
- padding-left: @dashboard-horizontal-padding;
+ width: 100%;
+ padding: 10px @dashboard-horizontal-padding;
- @media only screen and ( max-width: @wide ) {
- width: 100%;
- padding: 10px @dashboard-horizontal-padding;
+ @media only screen and ( min-width: @wide ) {
+ width: 66.66%;
+ padding: 10px 0; // Defines top and bottom padding. Left and
right padding are defined separately for clarity
+ padding-right: @sticky-sidebar-right-position +
@translationlist-container-padding-right;
+ padding-left: @dashboard-horizontal-padding;
+ }
+
+ @media only screen and ( min-width: @maximum-dashboard-width ) {
+ left: 50%;
+ max-width: 2 * @maximum-dashboard-width / 3 +
@translationlist-container-padding-right;
+ margin-left: -@maximum-dashboard-width / 2 -
@translationlist-container-padding-right;
+ padding: 0 @translationlist-container-padding-right;
}
}
diff --git a/modules/widgets/translator/ext.cx.translator.less
b/modules/widgets/translator/ext.cx.translator.less
index 15868ec..ae7e6b9 100644
--- a/modules/widgets/translator/ext.cx.translator.less
+++ b/modules/widgets/translator/ext.cx.translator.less
@@ -10,7 +10,7 @@
padding: 1em;
.box-shadow-card;
- @media only screen and ( min-width: @narrow ) and ( max-width: @wide ) {
+ @media only screen and ( min-width: @narrow ) and ( max-width: ( @wide
- 1px ) ) {
width: 47.5%;
margin-bottom: 0;
}
--
To view, visit https://gerrit.wikimedia.org/r/376629
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic134ef9a16b4fc51c7af4447bf09446220a24074
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <ppetko...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
