Petar.petkovic has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/396565 )
Change subject: Use gradients on CX suggestion descriptions
......................................................................
Use gradients on CX suggestion descriptions
- Remove justified text approach used to align ellipsis indicator
with the description, which was introduced in Iabadfca8ed.
- Use gradients instead of ellipsis to indicate truncated text.
Bug: T182479
Change-Id: I2e0c62bf1caf51714c90a31fc091837f0309d09a
---
M extension.json
M modules/dashboard/ext.cx.suggestionlist.js
M modules/dashboard/styles/ext.cx.suggestionlist.less
M modules/widgets/common/ext.cx.common.less
4 files changed, 113 insertions(+), 25 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/65/396565/1
diff --git a/extension.json b/extension.json
index 086cc12..5e8b3ab 100644
--- a/extension.json
+++ b/extension.json
@@ -994,7 +994,6 @@
"oojs-ui.styles.icons-interactions"
],
"messages": [
- "ellipsis",
"cx-suggestionlist-collapse",
"cx-suggestionlist-empty-desc",
"cx-suggestionlist-empty-title",
diff --git a/modules/dashboard/ext.cx.suggestionlist.js
b/modules/dashboard/ext.cx.suggestionlist.js
index 67d8911..259e4a7 100644
--- a/modules/dashboard/ext.cx.suggestionlist.js
+++ b/modules/dashboard/ext.cx.suggestionlist.js
@@ -539,10 +539,6 @@
lang: suggestion.sourceLanguage,
dir: sourceDir
} )
- // We need to set ellipsis for pseudo element through
data attribute
- // as there is no way to add localized message to LESS
or manipulate
- // pseudo elements directly with JS
- .attr( 'data-ellipsis', mw.msg( 'ellipsis' ) )
.addClass( 'cx-slitem__desc' )
.hide();
$discardAction = $( '<div>' )
diff --git a/modules/dashboard/styles/ext.cx.suggestionlist.less
b/modules/dashboard/styles/ext.cx.suggestionlist.less
index c33ff27..a8f53d9 100644
--- a/modules/dashboard/styles/ext.cx.suggestionlist.less
+++ b/modules/dashboard/styles/ext.cx.suggestionlist.less
@@ -84,8 +84,7 @@
.cx-slitem {
&:hover {
.cx-slitem__desc:after {
- background-color: #eaf3ff;
- .transition( background-color 100ms );
+ .animation( gradientIn, 100ms, forwards );
}
}
@@ -100,39 +99,108 @@
width: 100%;
// We want to limit number of lines that description for
// suggestion item takes. Maximum height is thus set to
- // get maximum of three line heights. Before and after
- // elements are tricks used to provide ellipsis truncation
+ // get maximum of three line heights.
max-height: 3.6em; // line-height * 3
margin: 0.5em -1em 0.5em 0;
- padding-right: 1em;
font-size: 0.8125em;
line-height: 1.2;
- text-align: justify;
-
- &:before {
- // This is needed so we can use localized 'ellipsis'
- content: attr( data-ellipsis );
- position: absolute;
- bottom: 0;
- right: 0;
- }
&:after {
content: '';
- background-color: #fff;
position: absolute;
+ top: 2.4em;
right: 0;
- width: 1em;
- height: 1em;
- margin-top: 0.2em;
+ width: 70%;
+ height: 1.2em;
+ .animation( gradientOut, 100ms, forwards );
- .transition( background-color 100ms );
+ @media only screen and ( min-width: 360px ) {
+ width: 60%;
+ }
+
+ @media only screen and ( min-width: @very-narrow ) {
+ width: 50%;
+ }
+
+ @media only screen and ( min-width: @narrow ) {
+ width: 40%;
+ }
+
+ @media only screen and ( min-width: @wide ) {
+ width: 30%;
+ }
+
+ @media only screen and ( min-width:
@max-dashboard-width ) {
+ width: 20%;
+ }
}
}
}
+.keyframes(gradientIn, {
+ 0% {
+ background: linear-gradient( to right, transparent, #fff 70% );
+ }
+ 10% {
+ background: linear-gradient( to right, transparent, #fefeff 70%
);
+ }
+ 20% {
+ background: linear-gradient( to right, transparent, #f9fcff 70%
);
+ }
+ 30% {
+ background: linear-gradient( to right, transparent, #f3f8ff 70%
);
+ }
+ 40% {
+ background: linear-gradient( to right, transparent, #f0f6ff 70%
);
+ }
+ 50% {
+ background: linear-gradient( to right, transparent, #eef5ff 70%
);
+ }
+ 60% {
+ background: linear-gradient( to right, transparent, #ecf4ff 70%
);
+ }
+ 70% {
+ background: linear-gradient( to right, transparent, #ebf4ff 70%
);
+ }
+ 80%,
+ 100% {
+ background: linear-gradient( to right, transparent, #eaf3ff 70%
);
+ }
+});
+
+.keyframes(gradientOut, {
+ 0% {
+ background: linear-gradient( to right, transparent, #eaf3ff 70%
);
+ }
+ 10% {
+ background: linear-gradient( to right, transparent, #ebf4ff 70%
);
+ }
+ 20% {
+ background: linear-gradient( to right, transparent, #f0f7ff 70%
);
+ }
+ 30% {
+ background: linear-gradient( to right, transparent, #f5faff 70%
);
+ }
+ 40% {
+ background: linear-gradient( to right, transparent, #f9fcff 70%
);
+ }
+ 50% {
+ background: linear-gradient( to right, transparent, #fbfdff 70%
);
+ }
+ 60% {
+ background: linear-gradient( to right, transparent, #fdfeff 70%
);
+ }
+ 70% {
+ background: linear-gradient( to right, transparent, #fefeff 70%
);
+ }
+ 80%,
+ 100% {
+ background: linear-gradient( to right, transparent, #fff 70% );
+ }
+});
+
.cx-slitem__details {
position: relative;
min-width: 0;
diff --git a/modules/widgets/common/ext.cx.common.less
b/modules/widgets/common/ext.cx.common.less
index 38f5467..5c35b32 100644
--- a/modules/widgets/common/ext.cx.common.less
+++ b/modules/widgets/common/ext.cx.common.less
@@ -16,7 +16,7 @@
@wide: 1200px;
@max-dashboard-width: 1500px;
-.box-shadow-card() {
+.box-shadow-card {
.box-shadow( 0 1px 1px rgba( 0, 0, 0, 0.15 ) );
}
@@ -106,3 +106,28 @@
margin: 0 auto;
}
}
+
+.keyframes( @name, @rules ) {
+ /* stylelint-disable at-rule-no-unknown */
+ @-webkit-keyframes @name {
+ @rules();
+ }
+
+ @-moz-keyframes @name {
+ @rules();
+ }
+
+ @keyframes @name {
+ @rules();
+ }
+ /* stylelint-enable at-rule-no-unknown */
+}
+
+.animation( @name, @duration, @fillMode: none ) {
+ -moz-animation: @name @duration;
+ -webkit-animation: @name @duration;
+ animation: @name @duration;
+
+ -webkit-animation-fill-mode: @fillMode;
+ animation-fill-mode: @fillMode;
+}
--
To view, visit https://gerrit.wikimedia.org/r/396565
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2e0c62bf1caf51714c90a31fc091837f0309d09a
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
