jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/400452 )
Change subject: Support long titles in selected source page
......................................................................
Support long titles in selected source page
- When the title is longer than 60, reduce the font size to 16px.
- Make sure there is padding around the selected page detail info.
- Don't use ellipsis to truncate language codes. Only truncate full,
autonym language names.
- Reduce smallest supported width for modal selected source page dialog,
from 375px to 320px. Make dialog width more uniform on 700px-1500px range.
- Hide discard button on selected source page for screens below 500px.
- Remove language filter duplicate code in ext.cx.lists.common.less
Bug: T181701
Change-Id: I69b8a541b32f4ccd81eef110086dc6cb43899d41
---
M modules/dashboard/styles/ext.cx.lists.common.less
M modules/source/ext.cx.SelectedSourcePage.js
M modules/source/styles/ext.cx.SelectedSourcePage.less
M modules/ui/styles/mw.cx.ui.LanguageFilter.less
4 files changed, 46 insertions(+), 111 deletions(-)
Approvals:
jenkins-bot: Verified
Nikerabbit: Checked; Looks good to me, approved
diff --git a/modules/dashboard/styles/ext.cx.lists.common.less
b/modules/dashboard/styles/ext.cx.lists.common.less
index 1497887..9a40089 100644
--- a/modules/dashboard/styles/ext.cx.lists.common.less
+++ b/modules/dashboard/styles/ext.cx.lists.common.less
@@ -43,97 +43,14 @@
.flex-center-justify;
- .translation-language-filter {
- background-color: @colorGray15;
- .box-sizing( border-box );
- max-width: 33.33%;
- max-height: 34px;
- border: 1px solid @colorGray10;
- border-radius: @borderRadius;
- padding: 0;
+ > span {
+ min-width: 0;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ }
- .flex-display( box ); // Support 2009 syntax
- .flex-display;
-
- .translation-language-source-container,
- .translation-language-target-container {
- position: relative;
- .box-sizing( border-box );
- cursor: pointer;
-
- .flex-item;
- overflow: hidden;
- }
-
- .translation-language-source-container {
- margin-right: -8px;
- padding-right: 8px;
- }
-
- .translation-language-target-container {
- margin-left: -8px;
- padding-left: 8px;
- }
-
- .translation-source-language-filter,
- .translation-target-language-filter {
- background-color: @colorGray15;
- color: @colorGray2;
- font-size: 16px;
- line-height: 1;
-
- @media only screen and ( min-width: @narrow ) {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- white-space: nowrap;
- }
-
- .translation-source-language-filter {
- padding: 8px 12px 8px 16px;
- }
-
- .translation-target-language-filter {
- padding: 8px 16px 8px 12px;
- }
-
- .translation-language-arrow {
- position: relative;
- width: 0;
- height: 32px;
- margin-right: 16px;
- }
-
- .translation-language-arrow:after,
- .translation-language-arrow:before {
- content: ' ';
-
- position: absolute;
- top: 50%;
- left: 100%;
-
- width: 0;
- height: 0;
- border: solid transparent;
-
- pointer-events: none;
- }
-
- .translation-language-arrow:after {
- margin-top: -16px;
- border-color: rgba( 255, 255, 255, 0 );
- border-left-color: @colorGray15;
- border-width: 16px;
- border-left-width: 12px;
- }
-
- .translation-language-arrow:before {
- margin-top: -17px;
- border-color: rgba( 157, 157, 157, 0 );
- border-left-color: @colorGray10;
- border-width: 17px;
- border-left-width: 13px;
- }
+ .cx-language-filter {
+ margin-left: 8px;
}
}
diff --git a/modules/source/ext.cx.SelectedSourcePage.js
b/modules/source/ext.cx.SelectedSourcePage.js
index e49251a..8f71385 100644
--- a/modules/source/ext.cx.SelectedSourcePage.js
+++ b/modules/source/ext.cx.SelectedSourcePage.js
@@ -83,7 +83,7 @@
.addClass( 'cx-selected-source-page__language-count' );
this.$selectedSourcePageViewsCount = $( '<span>' )
.addClass( 'cx-selected-source-page__views-count' );
- $selectedSourcePageMetrics = $( '<span>' )
+ $selectedSourcePageMetrics = $( '<div>' )
.addClass( 'cx-selected-source-page__metrics' )
.append( this.$selectedSourcePageLanguageCount,
this.$selectedSourcePageViewsCount );
@@ -179,7 +179,7 @@
href: href,
title: title,
text: title
- } );
+ } ).toggleClass( 'cx-selected-source-page__link--long',
title.length >= 60 );
this.sourceTitle = title;
}
};
@@ -292,6 +292,7 @@
target: '_blank',
text: pageTitle
} );
+ this.$selectedSourcePageLink.toggleClass(
'cx-selected-source-page__link--long', pageTitle.length >= 60 );
this.sourceTitle = pageTitle;
this.check();
diff --git a/modules/source/styles/ext.cx.SelectedSourcePage.less
b/modules/source/styles/ext.cx.SelectedSourcePage.less
index c1a9a43..152e117 100644
--- a/modules/source/styles/ext.cx.SelectedSourcePage.less
+++ b/modules/source/styles/ext.cx.SelectedSourcePage.less
@@ -12,7 +12,7 @@
.transform( translate( -50%, -50% ) );
width: 95%;
- min-width: 375px;
+ min-width: 320px;
.box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) );
@media only screen and ( min-width: @very-narrow ) {
@@ -20,10 +20,7 @@
}
@media only screen and ( min-width: @narrow ) {
- max-width: 80%;
- }
-
- @media only screen and ( min-width: @wide ) {
+ width: 80%;
max-width: 850px;
}
@@ -72,10 +69,10 @@
&__info {
color: @colorGray1;
- .flex-around;
-
- max-width: 60%;
+ .box-sizing( border-box );
+ min-width: 0;
min-height: @item-height;
+ padding: 5px 0;
font-size: 1.2em;
}
@@ -90,10 +87,17 @@
padding-right: 16px;
font-size: 18px;
font-weight: bold;
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+
+ &--long {
+ font-size: 16px;
+ }
}
&__metrics {
color: @colorGray7;
+ margin-top: 10px;
font-size: 14px;
}
@@ -131,7 +135,21 @@
font-size: 12px;
}
+ .cx-language-filter {
+ margin-left: auto;
+ margin-right: 10px;
+
+ @media only screen and ( min-width: @very-narrow ) {
+ margin-right: 0;
+ }
+ }
+
.cx-selected-source-page__discard {
- margin-left: 8px;
+ display: none;
+
+ @media only screen and ( min-width: @very-narrow ) {
+ display: inline;
+ margin-left: 8px;
+ }
}
}
diff --git a/modules/ui/styles/mw.cx.ui.LanguageFilter.less
b/modules/ui/styles/mw.cx.ui.LanguageFilter.less
index 82da6ba..95fee04 100644
--- a/modules/ui/styles/mw.cx.ui.LanguageFilter.less
+++ b/modules/ui/styles/mw.cx.ui.LanguageFilter.less
@@ -4,17 +4,13 @@
.cx-language-filter {
background-color: @colorGray15;
box-sizing: border-box;
- width: auto;
- max-width: 30%;
max-height: 34px;
border: 1px solid #9d9d9d;
border-radius: @borderRadius;
- padding: 0;
font-weight: bold;
.flex-display( box ); // Support 2009 syntax
.flex-display;
- margin-left: auto;
@media only screen and ( min-width: @narrow ) {
max-width: 40%;
@@ -28,17 +24,20 @@
cursor: pointer;
.flex-item;
- overflow: hidden;
+
+ @media only screen and ( min-width: @narrow ) {
+ overflow: hidden;
+ }
}
.cx-language-filter-button {
line-height: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-
- z-index: 1;
+ @media only screen and ( min-width: @narrow ) {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
.cx-language-filter-source-language {
--
To view, visit https://gerrit.wikimedia.org/r/400452
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I69b8a541b32f4ccd81eef110086dc6cb43899d41
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Petar.petkovic <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Petar.petkovic <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
