jenkins-bot has submitted this change and it was merged. Change subject: Adjust width of language code, autonym and count in CXStats ......................................................................
Adjust width of language code, autonym and count in CXStats * Put the three elements inside one container, to make it possible to adjust their widths independently of the table. * Set widths for the three elements, tested with long codes like be-tarask and map-bms, and with 6-digit translation count. * Reduce font size for the language code, and set ltr direction, to ensure that it aligns correctly and that long codes has less chance of overlapping the autonym on small screns. * Set overflow: hidden for the case long autonyms do become too long on small screens. Bug: T110862 Change-Id: I426c4f7ca9651b63a74bcf8b867a072e4a6eb0f9 --- M modules/stats/ext.cx.stats.js M modules/stats/styles/ext.cx.stats.less 2 files changed, 39 insertions(+), 20 deletions(-) Approvals: Nikerabbit: Looks good to me, approved jenkins-bot: Verified diff --git a/modules/stats/ext.cx.stats.js b/modules/stats/ext.cx.stats.js index b0a0245..b6bb788 100644 --- a/modules/stats/ext.cx.stats.js +++ b/modules/stats/ext.cx.stats.js @@ -297,10 +297,10 @@ CXStats.prototype.drawTranslationsChart = function ( direction, status, property ) { var $chart, $bar, translations, $translations, model, i, j, $rows = [], $callout, - $total, $row, width, max = 0, $tail, tailWidth = 0, tail, + $langCode, $autonym, $total, $rowLabelContainer, fmt = mw.language.convertNumber; $chart = $( '<div>' ).addClass( 'cx-stats-chart' ); @@ -379,6 +379,24 @@ content: $callout } ); + $langCode = $( '<span>' ) + .addClass( 'cx-stats-chart__langcode' ) + // Always Latin (like English). + // Make sure it's aligned correctly on all screen sizes. + .prop( { + lang: 'en', + dir: 'ltr' + } ) + .text( model[ i ].language ); + + $autonym = $( '<span>' ) + .addClass( 'cx-stats-chart__autonym' ) + .prop( { + lang: model[ i ].language, + dir: $.uls.data.getDir( model[ i ].language ) + } ) + .text( $.uls.data.getAutonym( model[ i ].language ) ); + $total = $( '<span>' ) .addClass( 'cx-stats-chart__total' ) .text( fmt( model[ i ][ property ] ) ); @@ -397,23 +415,16 @@ .addClass( 'cx-stats-chart__total' ) .text( fmt( model[ i ][ property ] ) ); } - $row.append( - $( '<span>' ) - .addClass( 'cx-stats-chart__langcode' ) - .text( model[ i ].language ), - $( '<span>' ) - .addClass( 'cx-stats-chart__autonym' ) - .prop( { - dir: $.uls.data.getDir( model[ i ].language ), - lang: model[ i ].language - } ) - .text( $.uls.data.getAutonym( model[ i ].language ) ), - $total, - $translations - ); + + $rowLabelContainer = $( '<span>' ) + .addClass( 'cx-stats-chart__row-label-container' ) + .append( $langCode, $autonym, $total ); + + $row.append( $rowLabelContainer, $translations ); $rows.push( $row ); } + $chart.append( $rows ); return $chart; diff --git a/modules/stats/styles/ext.cx.stats.less b/modules/stats/styles/ext.cx.stats.less index 02b43fb..0039f67 100644 --- a/modules/stats/styles/ext.cx.stats.less +++ b/modules/stats/styles/ext.cx.stats.less @@ -93,25 +93,33 @@ } } + &__row-label-container { + .mw-ui-one-quarter; + } + &__langcode { - .mw-ui-one-twelfth; + .mw-ui-one-quarter; text-align: right; text-transform: uppercase; + font-size: 0.9em; color: @gray; + overflow: hidden; + text-overflow: ellipsis; } &__autonym { - .mw-ui-one-twelfth; + .mw-ui-one-half; + text-align: left; color: @gray-darker; + overflow: hidden; + text-overflow: ellipsis; font-weight: bold; white-space: nowrap; - text-overflow: ellipsis; - text-align: left; } &__total, &__total:visited { - .mw-ui-one-twelfth; + .mw-ui-one-quarter; color: @gray; text-align: right; border-right: 1px solid @gray; -- To view, visit https://gerrit.wikimedia.org/r/237363 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I426c4f7ca9651b63a74bcf8b867a072e4a6eb0f9 Gerrit-PatchSet: 4 Gerrit-Project: mediawiki/extensions/ContentTranslation Gerrit-Branch: master Gerrit-Owner: Amire80 <amir.ahar...@mail.huji.ac.il> Gerrit-Reviewer: Amire80 <amir.ahar...@mail.huji.ac.il> Gerrit-Reviewer: Nikerabbit <niklas.laxst...@gmail.com> Gerrit-Reviewer: Pginer <pgi...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits