Pginer has uploaded a new change for review.
https://gerrit.wikimedia.org/r/143853
Change subject: Adjustments for link card styling and animations
......................................................................
Adjustments for link card styling and animations
- Adjusted the styling of cards that was broken with multi-cards.
It could be perceived by the bottom border of the card getting hidden by other
elements.
This patchset makes the content fit inside the card.
- Transitions have been defined to make the interaction with cards more fluent.
When the card behind is exposed, ad when swapping cards, a transition is used
to make the movement more natural.
Change-Id: I1a198619e2b9de9e77489f066a93d47a8d7c88bd
---
M modules/tools/ext.cx.tools.link.js
M modules/tools/styles/ext.cx.tools.card.less
M modules/tools/styles/ext.cx.tools.link.less
M modules/tools/styles/ext.cx.tools.manager.less
4 files changed, 17 insertions(+), 11 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/ContentTranslation
refs/changes/53/143853/1
diff --git a/modules/tools/ext.cx.tools.link.js
b/modules/tools/ext.cx.tools.link.js
index f9da2ba..c46012d 100644
--- a/modules/tools/ext.cx.tools.link.js
+++ b/modules/tools/ext.cx.tools.link.js
@@ -43,12 +43,10 @@
.addClass( 'card__link-text' ) );
$linkInstructionSection = $( '<div>' )
.addClass( 'card__link-instruction' );
- $linkInstruction = $( '<div>' )
- .text( mw.msg( 'cx-tools-link-instruction-header' ) );
$linkInstructionShortcut = $( '<div>' )
.addClass( 'shortcut-info' )
.text( mw.msg( 'cx-tools-link-instruction-shortcut' ) );
- $linkInstructionSection.append( $linkInstruction,
$linkInstructionShortcut );
+ $linkInstructionSection.append( $linkInstructionShortcut );
$linkInfo.append( $linkInstructionSection );
this.$sourceLinkCard.append( $imageContainer, $linkInfo );
return this.$sourceLinkCard.hide();
diff --git a/modules/tools/styles/ext.cx.tools.card.less
b/modules/tools/styles/ext.cx.tools.card.less
index 18327b8..42bb7aa 100644
--- a/modules/tools/styles/ext.cx.tools.card.less
+++ b/modules/tools/styles/ext.cx.tools.card.less
@@ -16,7 +16,7 @@
.card__title--language {
.mw-ui-item;
.mw-ui-one-half;
- color: #c9c9c9;
+ color: #aaaaaa;
padding: 4px;
}
diff --git a/modules/tools/styles/ext.cx.tools.link.less
b/modules/tools/styles/ext.cx.tools.link.less
index 3366448..c7d0f4f 100644
--- a/modules/tools/styles/ext.cx.tools.link.less
+++ b/modules/tools/styles/ext.cx.tools.link.less
@@ -1,25 +1,30 @@
@import "../../base/styles/grid/agora-grid";
.cards.link {
- .mw-ui-item;
animation-name: card-show-animation;
animation-duration: 0.5s;
position: relative;
padding: 0;
+ .card {
+ .mw-ui-item;
+ padding: 0;
+ }
.card:nth-of-type(1) {
position: absolute;
top: 0;
left: 0;
right: 0;
+ transition: top 0.15s;
}
.card:nth-of-type(2) {
position: relative;
- top: 35px;
+ top: 30px;
+ transition: top 0.5s;
}
// On mouse over of first card, push the second card a bit down.
.card:nth-of-type(1):hover + .card:nth-of-type(2) {
- top: 70px;
+ top: 60px;
}
}
@@ -50,7 +55,6 @@
@horizontal-margin: 15px;
.mw-ui-item;
.mw-ui-one-whole;
- float: none;
padding: @vertical-margin @horizontal-margin;
font-size: large;
color: #565656; // TODO Should come from library?
@@ -63,7 +67,6 @@
background-size: 15px;
padding: 5px 10px 5px 32px;
cursor: pointer;
- clear: both;
border-top: 1px solid #dddddd;
}
@@ -102,6 +105,7 @@
.card__link-text {
.mw-ui-item;
+ width: auto;
color: #0645ad;
font-size: large;
padding: 4px;
@@ -109,11 +113,15 @@
}
.card__link-instruction {
+ .mw-ui-item;
+ .mw-ui-one-whole;
color: #565656;
font-size: large;
border-top: 1px solid #dddddd;
clear: both;
+ padding-top: 10px;
.shortcut-info{
- font-size: medium;
+ font-size: small;
+ color: #aaaaaa;
}
}
\ No newline at end of file
diff --git a/modules/tools/styles/ext.cx.tools.manager.less
b/modules/tools/styles/ext.cx.tools.manager.less
index 163e6c2..0cfa7b4 100644
--- a/modules/tools/styles/ext.cx.tools.manager.less
+++ b/modules/tools/styles/ext.cx.tools.manager.less
@@ -12,7 +12,7 @@
.card__title-row {
.mw-ui-item;
.mw-ui-one-whole;
- color: #c9c9c9; // TODO Should come from library?
+ color: #aaaaaa; // TODO Should come from library?
font-size: small;
.card__title {
--
To view, visit https://gerrit.wikimedia.org/r/143853
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1a198619e2b9de9e77489f066a93d47a8d7c88bd
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Pginer <pgi...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
