Jarrettmunton has uploaded a new change for review.
https://gerrit.wikimedia.org/r/247514
Change subject: Dashboard: Fix broken layout on small screens
......................................................................
Dashboard: Fix broken layout on small screens
This commit changes the sidebar behavior when the window is smaller
than 1000px. The sidebar collapses, showing just icons which are clickable
as the original links. Clicking elsewhere on the sidebar expands it over
existing content.
Bug: T106556
Change-Id: I298e5ebd072a95ca74e75ffd7029daeab795b5c9
---
M modules/dashboard/ext.cx.dashboard.js
M modules/dashboard/styles/ext.cx.dashboard.less
2 files changed, 69 insertions(+), 1 deletion(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/14/247514/1
diff --git a/modules/dashboard/ext.cx.dashboard.js
b/modules/dashboard/ext.cx.dashboard.js
index abd0165..bd1ac06 100644
--- a/modules/dashboard/ext.cx.dashboard.js
+++ b/modules/dashboard/ext.cx.dashboard.js
@@ -285,6 +285,23 @@
}
} );
+ this.$sidebar.click( function ( e ) {
+ var $sidebar = $( e.target );
+
+ if ( $sidebar.is( 'a' ) ) {
+ // Do not toggle size on click of link.
+ return;
+ }
+
+ if ( self.$sidebar.hasClass( 'compact' ) ){
+ if ( self.$sidebar.hasClass( 'expanded' ) ){
+ self.$sidebar.removeClass( 'expanded' );
+ } else {
+ self.$sidebar.addClass( 'expanded' );
+ }
+ }
+ } );
+
this.$sourceLanguageFilter.uls( {
onSelect: function ( language ) {
setFilter( 'sourceLanguage', language );
@@ -314,6 +331,8 @@
this.initSourceSelector();
// Scroll handler
$( window ).scroll( $.throttle( 250, $.proxy( this.scroll, this
) ) );
+ // Resize handler
+ $( window ).resize( $.throttle( 250, $.proxy( this.resize, this
) ) );
};
CXDashboard.prototype.setFilter = function ( type, value ) {
@@ -343,7 +362,6 @@
CXDashboard.prototype.scroll = function () {
var scrollTop = $( window ).scrollTop(),
offsetTop = this.$dashboard.offset().top;
-
if ( scrollTop > offsetTop ) {
this.$sidebar.addClass( 'sticky' );
} else if ( scrollTop <= offsetTop ) {
@@ -351,6 +369,27 @@
}
};
+ CXDashboard.prototype.resize = function () {
+ if ( $( window ).width() < 1000 ) {
+ this.$sidebar.addClass( 'compact' );
+ this.$translationListContainer.addClass( 'compact' );
+ } else {
+ this.$sidebar.removeClass( 'compact' );
+ this.$translationListContainer.removeClass( 'compact' );
+ this.$sidebar.removeClass( 'expanded' )
+ }
+ };
+
+ CXDashboard.prototype.sidebarClick = function () {
+ if ( this.$sidebar.hasClass( 'compact' ) ){
+ if ( this.$sidebar.hasClass( 'expanded' ) ){
+ this.$sidebar.removeClass( 'expanded' );
+ } else {
+ this.$sidebar.addClass( 'expanded' );
+ }
+ }
+ };
+
$.fn.cxDashboard = function ( siteMapper, options ) {
return this.each( function () {
var $this = $( this ),
diff --git a/modules/dashboard/styles/ext.cx.dashboard.less
b/modules/dashboard/styles/ext.cx.dashboard.less
index ab53784..58441f6 100644
--- a/modules/dashboard/styles/ext.cx.dashboard.less
+++ b/modules/dashboard/styles/ext.cx.dashboard.less
@@ -35,6 +35,8 @@
.cx-dashboard__sidebar {
.mw-ui-one-third;
+ transition: width 0.25s;
+ -webkit-transition: width 0.25s;
float: right;
position: relative;
@@ -46,6 +48,27 @@
.cx-sidebar {
min-height: 100vh;
+ }
+ }
+ &.compact {
+ position: absolute;
+ width: 40px;
+ right: 0;
+ overflow: hidden;
+ z-index: 1000;
+ .cx-sidebar {
+ width: 1000px;
+ padding-left: 10px;
+ }
+ .cx-sidebar__title {
+ visibility: hidden;
+ }
+ &.expanded{
+ width: 50%;
+ right: 0px;
+ .cx-sidebar__title {
+ visibility: visible;
+ }
}
}
}
@@ -122,6 +145,12 @@
padding: 0 10px 0 0;
background-color: #f0f0f0;
+
+ &.compact {
+ width: 100%;
+ transition: width 0.25s;
+ -webkit-transition: width 0.25s;
+ }
}
.cx-translationlist-container.sticky .translation-filter {
--
To view, visit https://gerrit.wikimedia.org/r/247514
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I298e5ebd072a95ca74e75ffd7029daeab795b5c9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Jarrettmunton <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
