Amire80 has uploaded a new change for review.
https://gerrit.wikimedia.org/r/237363
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, 40 insertions(+), 15 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/63/237363/1
diff --git a/modules/stats/ext.cx.stats.js b/modules/stats/ext.cx.stats.js
index b0a0245..a6dd339 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( {
+ dir: $.uls.data.getDir( model[ i
].language ),
+ lang: model[ i ].language
+ } )
+ .text( $.uls.data.getAutonym( model[ i
].language ) );
+
$total = $( '<span>' )
.addClass( 'cx-stats-chart__total' )
.text( fmt( model[ i ][ property ] ) );
@@ -397,18 +415,17 @@
.addClass( 'cx-stats-chart__total' )
.text( fmt( model[ i ][ property ] ) );
}
+
+ $rowLabelContainer = $( '<span>' )
+ .addClass(
'cx-stats-chart__row-label-container' )
+ .append(
+ $langCode,
+ $autonym,
+ $total
+ );
+
$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,
+ $rowLabelContainer,
$translations
);
diff --git a/modules/stats/styles/ext.cx.stats.less
b/modules/stats/styles/ext.cx.stats.less
index 02b43fb..df979a0 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;
color: @gray-darker;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
+ overflow: hidden;
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: newchange
Gerrit-Change-Id: I426c4f7ca9651b63a74bcf8b867a072e4a6eb0f9
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Amire80 <amir.ahar...@mail.huji.ac.il>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
