Phuedx has uploaded a new change for review.
https://gerrit.wikimedia.org/r/323507
Change subject: Visual design tweaks
......................................................................
Visual design tweaks
Changes:
* Reduce the fade-in animation delay to 200 ms.
* Truncate a long extract by fading it out gradually.
* Increase the depth of the shadow cast by a preview and remove its
border.
Bug: T150814
Change-Id: I2ec0c0472bc24767bbf1f4db000cc9d690454629
---
M resources/ext.popups.core/ext.popups.core.less
M resources/ext.popups.desktop/ext.popups.animation.less
M resources/ext.popups/renderer.js
3 files changed, 23 insertions(+), 5 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Popups
refs/changes/07/323507/1
diff --git a/resources/ext.popups.core/ext.popups.core.less
b/resources/ext.popups.core/ext.popups.core.less
index 4ba4a36..ce54f95 100644
--- a/resources/ext.popups.core/ext.popups.core.less
+++ b/resources/ext.popups.core/ext.popups.core.less
@@ -66,8 +66,11 @@
position: absolute;
z-index: 110;
background: #fff;
- border: 1px solid #bbb;
- .box-shadow(0 0 10px rgba( 0, 0, 0, 0.2 ));
+
+ // FIXME: The .box-shadow mixin provided by mediawiki.mixins doesn't
support
+ // multiple values.
+ -webkit-box-shadow: 0 45px 70px -20px rgba(0,0,0,0.3), 0px 0px 1px
rgba(0,0,0,0.5);
+ box-shadow: 0 45px 70px -20px rgba(0,0,0,0.3), 0px 0px 1px
rgba(0,0,0,0.5);
padding: 0;
display: none;
font-size: 14px;
@@ -130,10 +133,25 @@
display: block;
color: #000;
text-decoration: none;
+ position: relative;
&:hover {
text-decoration: none;
}
+
+ &:after {
+ content: " ";
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 25%;
+ height: 24px;
+ background-color: transparent;
+ background-image: -webkit-linear-gradient(to right,
rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+ background-image: -moz-linear-gradient(to right,
rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+ background-image: -o-linear-gradient(to right,
rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+ background-image: linear-gradient(to right,
rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
+ }
}
&.mwe-popups-is-tall {
diff --git a/resources/ext.popups.desktop/ext.popups.animation.less
b/resources/ext.popups.desktop/ext.popups.animation.less
index 879b432..ea13a02 100644
--- a/resources/ext.popups.desktop/ext.popups.animation.less
+++ b/resources/ext.popups.desktop/ext.popups.animation.less
@@ -123,11 +123,11 @@
}
.mwe-popups-fade-in-up {
- .animation(mwe-popups-fade-in-up, 0.3s, ease, forwards);
+ .animation(mwe-popups-fade-in-up, 0.2s, ease, forwards);
}
.mwe-popups-fade-in-down {
- .animation(mwe-popups-fade-in-down, 0.3s, ease, forwards);
+ .animation(mwe-popups-fade-in-down, 0.2s, ease, forwards);
}
.mwe-popups-fade-out-down {
diff --git a/resources/ext.popups/renderer.js b/resources/ext.popups/renderer.js
index 25a1b3b..7efcdcb 100644
--- a/resources/ext.popups/renderer.js
+++ b/resources/ext.popups/renderer.js
@@ -209,7 +209,7 @@
preview.el.show();
- return mw.popups.wait( 300 );
+ return mw.popups.wait( 200 );
}
/**
--
To view, visit https://gerrit.wikimedia.org/r/323507
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2ec0c0472bc24767bbf1f4db000cc9d690454629
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Popups
Gerrit-Branch: mpga
Gerrit-Owner: Phuedx <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
