jenkins-bot has submitted this change and it was merged.
Change subject: Styling for link card
......................................................................
Styling for link card
Styling adjustments for link cards to:
- Make them look as a card (aligning the block that compose the card as a unit)
- Adjust spacing, borders and colors.
- Make images better fit.
- Provide a placeholder when link images are lacking.
Change-Id: I85b13ac0b293478e2077e08be0712e7c4bdfcd0b
---
M modules/tools/ext.cx.tools.link.js
A modules/tools/images/link_lightgray.png
A modules/tools/images/link_lightgray.svg
M modules/tools/styles/ext.cx.tools.link.less
4 files changed, 91 insertions(+), 14 deletions(-)
Approvals:
Santhosh: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/tools/ext.cx.tools.link.js
b/modules/tools/ext.cx.tools.link.js
index 1f2d4fb..cc42008 100644
--- a/modules/tools/ext.cx.tools.link.js
+++ b/modules/tools/ext.cx.tools.link.js
@@ -59,7 +59,7 @@
titles: word,
prop: 'pageimages',
piprop: 'thumbnail',
- pithumbsize: 100,
+ pithumbsize: 150,
redirects: true,
format: 'json'
}, {
diff --git a/modules/tools/images/link_lightgray.png
b/modules/tools/images/link_lightgray.png
new file mode 100644
index 0000000..d51f35a
--- /dev/null
+++ b/modules/tools/images/link_lightgray.png
Binary files differ
diff --git a/modules/tools/images/link_lightgray.svg
b/modules/tools/images/link_lightgray.svg
new file mode 100644
index 0000000..c9bf712
--- /dev/null
+++ b/modules/tools/images/link_lightgray.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version:
6.00 Build 0) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/";
+ xmlns:cc="http://creativecommons.org/ns#";
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+ xmlns:svg="http://www.w3.org/2000/svg";
+ xmlns="http://www.w3.org/2000/svg";
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+ version="1.1"
+ id="Layer_1"
+ x="0px"
+ y="0px"
+ viewBox="0 0 612 792"
+ enable-background="new 0 0 612 792"
+ xml:space="preserve"
+ inkscape:version="0.48.2 r9819"
+ width="100%"
+ height="100%"
+ sodipodi:docname="link_lightgray.svg"
+
inkscape:export-filename="/Users/pau/repos/wikimedia/ContentTranslation/modules/tools/images/link_lightgray.png"
+ inkscape:export-xdpi="73.522728"
+ inkscape:export-ydpi="73.522728"><metadata
+ id="metadata13"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage";
/><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+ id="defs11">
+
+
+</defs><sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="721"
+ inkscape:window-height="480"
+ id="namedview9"
+ showgrid="false"
+ inkscape:zoom="0.2979798"
+ inkscape:cx="574.47458"
+ inkscape:cy="229.88136"
+ inkscape:window-x="0"
+ inkscape:window-y="22"
+ inkscape:window-maximized="0"
+ inkscape:current-layer="Layer_1" />
+<path
+ style="fill:#dddddd;fill-opacity:1"
+ inkscape:connector-curvature="0"
+ id="path5"
+ d="M 302.8,142.9 225.7,220 c -6.4,6.4 -12.8,14 -17.8,21 -1.3,1.3 -2.6,3.2
-3.2,5.1 37.6,-10.2 77.1,-9.6 114.1,1.9 l 6.4,-6.4 42.7,-42.7 c 37.6,-37.6
98.2,-37.6 135.8,0 37.6,37.6 37.6,98.2 0,135.8 l -49.7,48.5 -10.2,10.2 -9.6,9.6
0,0 -15.9,16.6 c -16.6,16.6 -38.2,26.1 -60.6,27.4 l 0,0 0,0 c -4.5,0.6 -8.9,0.6
-12.1,0 -7.7,-0.6 -12.1,-1.3 -12.1,-1.3 l 0,0 0,0 c -18.5,-3.2 -36.3,-12.1
-51,-26.8 -14,-14 -22.9,-31.2 -26.1,-49.7 0,-0.6 0,-1.3 0,-1.9 -16.6,1.3
-32.5,8.3 -45.3,21 l -25.5,25.5 c 8.9,22.3 22.3,43.3 40.2,61.2 17.9,17.9
38.9,31.2 61.2,40.2 4.5,1.9 8.3,3.2 12.8,4.5 3.2,1.3 7,1.9 10.8,3.2 h 0.6 c
0.6,0 1.3,0 1.9,0.6 37,8.3 76.5,5.1 111.6,-9.6 4.5,-1.9 8.3,-3.8 12.8,-6.4 0,0
0.6,0 0.6,-0.6 0.6,-0.6 1.3,-0.6 1.9,-1.3 1.9,-0.6 3.8,-1.9 5.1,-3.2 l 0,0 c
12.8,-7.7 24.9,-17.2 35.7,-28.1 l 77.1,-77.1 c 70.8,-70.8 70.8,-185.5 0,-256.3
-69.6,-68.7 -184.3,-68.7 -255.1,2 z" /><path
+ style="fill:#dddddd;fill-opacity:1"
+ inkscape:connector-curvature="0"
+ id="path7"
+ d="m 309.2,649.1 77.1,-77.8 c 7,-6.4 12.8,-13.4 17.9,-21 1.3,-1.9 2.6,-3.2
3.2,-5.1 -37.6,10.2 -77.1,9.6 -114.1,-1.9 l -6.4,6.4 -42.7,42.7 c -37.6,37.6
-98.2,37.6 -135.8,0 -37.6,-37.6 -37.6,-98.2 0,-135.8 l 48.4,-48.5 10.2,-10.2
9.6,-9.6 0,0 15.9,-15.9 c 17.2,-17.2 38.2,-26.1 60.6,-28.1 l 0,0 0,0 c 4.5,-0.6
8.9,-0.6 12.1,0 7.6,0.6 12.1,1.3 12.1,1.3 l 0,0 0,0 c 18.5,3.2 36.3,12.1
51,26.8 14,14 22.9,31.2 26.1,49.7 0,0.6 0,1.3 0,1.9 16.6,-1.3 32.5,-8.3
44.6,-21 l 25.5,-25.5 c -8.9,-22.3 -22.3,-43.4 -40.2,-61.2 -17.8,-17.8
-38.9,-31.2 -61.2,-40.2 -3.8,-1.9 -8.3,-3.2 -12.8,-4.5 -3.2,-1.3 -7,-1.9
-10.8,-3.2 H 299 c -0.6,0 -1.3,-0.6 -1.9,-0.6 -37,-8.3 -76.5,-5.1 -111.6,9.6
-4.5,1.9 -8.9,3.8 -12.8,5.7 0,0 -0.6,0 -0.6,0.6 -0.6,0.6 -1.3,0.6 -1.9,1.3
-1.9,0.6 -3.8,1.9 -5.1,3.2 l 0,0 c -12.8,7.6 -24.9,17.2 -36.3,28 l -75.9,76.5 c
-70.8,70.8 -70.8,185.5 0,256.3 70.8,70.9 185.5,70.9 256.3,0.1 z" />
+</svg>
\ No newline at end of file
diff --git a/modules/tools/styles/ext.cx.tools.link.less
b/modules/tools/styles/ext.cx.tools.link.less
index ecaacf2..980d5ae 100644
--- a/modules/tools/styles/ext.cx.tools.link.less
+++ b/modules/tools/styles/ext.cx.tools.link.less
@@ -1,9 +1,11 @@
@import "../../base/styles/grid/agora-grid";
.card.link {
+ .mw-ui-item;
animation-name: card-show-animation;
animation-duration: 0.5s;
position: relative;
+ padding: 0;
}
.card__remove-link {
@@ -14,7 +16,6 @@
float: none;
padding: @vertical-margin @horizontal-margin;
font-size: large;
- line-height: 1.5em;
color: #565656; // TODO Should come from library?
/* @embed */
background: url(../images/clear.png) no-repeat scroll 10px center
#FFFFFF;
@@ -22,12 +23,11 @@
background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/clear.svg);
/* @embed */
background-image: linear-gradient(transparent, transparent),
url(../images/clear.svg);
- background-size: 20px;
- padding: 0 10px 0 40px;
- line-height: 2.5em;
+ background-size: 15px;
+ padding: 5px 10px 5px 32px;
cursor: pointer;
clear: both;
- border-top: 1px solid #C9C9C9;
+ border-top: 1px solid #dddddd;
}
.card__add-link {
@@ -38,7 +38,6 @@
float: none;
padding: @vertical-margin @horizontal-margin;
font-size: large;
- line-height: 1.5em;
color: #565656; // TODO Should come from library?
/* @embed */
background: url(../images/add.png) no-repeat scroll 10px center #FFFFFF;
@@ -46,12 +45,11 @@
background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/add.svg);
/* @embed */
background-image: linear-gradient(transparent, transparent),
url(../images/add.svg);
- background-size: 20px;
- padding: 0 10px 0 40px;
- line-height: 2.5em;
+ background-size: 15px;
+ padding: 5px 10px 5px 32px;
cursor: pointer;
clear: both;
- border-top: 1px solid #C9C9C9;
+ border-top: 1px solid #dddddd;
}
@@ -60,19 +58,37 @@
.mw-ui-one-quarter;
min-height: 100px;
background-color: #FFFFFF;
- border:1px solid #C9C9C9;;
+ overflow: hidden;
+ padding: 0;
+ position: relative;
+ img {
+ min-width: 100%;
+ min-height: 100%;
+ position: absolute;
+ }
+ &:empty {
+ background-color: #fbfbfb;
+ /* @embed */
+ background: url(../images/link_lightgray.png) no-repeat scroll center
center #fbfbfb;
+ /* @embed */
+ background-image: -webkit-linear-gradient(transparent, transparent),
url(../images/link_lightgray.svg);
+ /* @embed */
+ background-image: linear-gradient(transparent, transparent),
url(../images/link_lightgray.svg);
+ border-right: 1px solid #eeeeee;
+ }
}
.card__link-info {
.mw-ui-item;
.mw-ui-three-quarters;
- padding: 0;
background-color: #FFFFFF;
- border:1px solid #C9C9C9;
+ padding: 0;
}
.card__link-text {
+ .mw-ui-item;
color: #0645ad;
font-size: large;
padding: 4px;
+ padding-bottom: 15px;
}
--
To view, visit https://gerrit.wikimedia.org/r/139796
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I85b13ac0b293478e2077e08be0712e7c4bdfcd0b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/ContentTranslation
Gerrit-Branch: master
Gerrit-Owner: Pginer <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: Santhosh <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
