mw.ForeignStructuredUpload.BookletLayout: Option 2: Image improvements

Correctly aligned PNGs. Added SVGs.

Alternating the position of the icons was distracting. Moved all to
the right.

Change-Id: Ic14da2c6408ab15416dab1ebd1397507d0950b33

diff --git a/resources/src/mediawiki/bookletlayout/option2/ccbysa.png b/resources/src/mediawiki/bookletlayout/option2/ccbysa.png
index 507e62d..b39ecb6 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option2/ccbysa.png and b/resources/src/mediawiki/bookletlayout/option2/ccbysa.png differ

diff --git a/resources/src/mediawiki/bookletlayout/option2/ccbysa.svg b/resources/src/mediawiki/bookletlayout/option2/ccbysa.svg
new file mode 100644 (file)
index 0000000..13eb85f
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option2/ccbysa.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+        viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+       .st1{fill-rule:evenodd;clip-rule:evenodd;}\r
+</style>\r
+<g>\r
+       <circle class="st0" cx="74.9" cy="75.1" r="58.1"/>\r
+       <g>\r
+               <path class="st1" d="M74.1,63.4c-4-7.3-10.8-10.2-18.7-10.2c-11.5,0-20.6,8.1-20.6,21.9c0,14,8.6,21.9,21,21.9\r
+                       c8,0,14.8-4.4,18.5-11l-8.8-4.5c-2,4.7-4.9,6.1-8.7,6.1c-6.5,0-9.5-5.4-9.5-12.5c0-7.1,2.5-12.5,9.5-12.5c1.9,0,5.6,1,7.8,5.7\r
+                       L74.1,63.4z"/>\r
+               <path class="st1" d="M114.8,63.4c-4-7.3-10.8-10.2-18.7-10.2c-11.5,0-20.6,8.1-20.6,21.9c0,14,8.6,21.9,21,21.9\r
+                       c8,0,14.8-4.4,18.5-11l-8.8-4.5c-2,4.7-4.9,6.1-8.7,6.1c-6.5,0-9.5-5.4-9.5-12.5c0-7.1,2.5-12.5,9.5-12.5c1.9,0,5.6,1,7.8,5.7\r
+                       L114.8,63.4z"/>\r
+       </g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+</svg>\r

diff --git a/resources/src/mediawiki/bookletlayout/option2/noderiv.png b/resources/src/mediawiki/bookletlayout/option2/noderiv.png
index 46766ca..afac81f 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option2/noderiv.png and b/resources/src/mediawiki/bookletlayout/option2/noderiv.png differ

diff --git a/resources/src/mediawiki/bookletlayout/option2/noderiv.svg b/resources/src/mediawiki/bookletlayout/option2/noderiv.svg
new file mode 100644 (file)
index 0000000..c3ee55b
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option2/noderiv.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+        viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+       .st1{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+       .st2{stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+</style>\r
+<g>\r
+       \r
+               <rect x="7.8" y="34.6" transform="matrix(0.2182 0.9759 -0.9759 0.2182 113.5065 3.8061)" class="st0" width="93.2" height="76.2"/>\r
+       <circle class="st1" cx="54.4" cy="72.7" r="26.1"/>\r
+</g>\r
+<g>\r
+       \r
+               <rect x="51.6" y="41.7" transform="matrix(-0.1524 0.9883 -0.9883 -0.1524 192.0548 -5.1264)" class="st0" width="93.2" height="76.2"/>\r
+       <circle class="st2" cx="98.2" cy="79.8" r="26.1"/>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+</svg>\r

diff --git a/resources/src/mediawiki/bookletlayout/option2/ownwork.png b/resources/src/mediawiki/bookletlayout/option2/ownwork.png
index aabe59b..69df378 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option2/ownwork.png and b/resources/src/mediawiki/bookletlayout/option2/ownwork.png differ

diff --git a/resources/src/mediawiki/bookletlayout/option2/ownwork.svg b/resources/src/mediawiki/bookletlayout/option2/ownwork.svg
new file mode 100644 (file)
index 0000000..639775f
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option2/ownwork.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+        viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+       .st1{stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+</style>\r
+<polygon class="st0" points="6.3,43.3 38.4,43.3 46,34.4 78.4,34.4 85.5,42.6 142.6,42.6 142.6,115 6.3,115 "/>\r
+<g>\r
+       <circle class="st0" cx="63.3" cy="78.8" r="25.8"/>\r
+       <circle class="st1" cx="63.3" cy="78.8" r="16.2"/>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+</svg>\r

diff --git a/resources/src/mediawiki/bookletlayout/option2/useful.png b/resources/src/mediawiki/bookletlayout/option2/useful.png
index 1309eb3..d5b9429 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option2/useful.png and b/resources/src/mediawiki/bookletlayout/option2/useful.png differ

diff --git a/resources/src/mediawiki/bookletlayout/option2/useful.svg b/resources/src/mediawiki/bookletlayout/option2/useful.svg
new file mode 100644 (file)
index 0000000..baa982b
--- /dev/null
+++ b/resources/src/mediawiki/bookletlayout/option2/useful.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>\r
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->\r
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+        viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}\r
+</style>\r
+<circle class="st0" cx="72.7" cy="62.5" r="47.1"/>\r
+<path d="M76,128.8c34.8,0,63.2-28.3,63.2-63.2c0-18.3-7.9-34.9-20.4-46.4l11.8-11.8L129.1,6l-11.8,11.8c0,0,0,0,0,0l-1.4,1.4\r
+       c13,11.2,21.3,27.8,21.3,46.4c0,33.7-27.4,61.2-61.2,61.2c-18.5,0-35.1-8.3-46.4-21.3l-0.4,0.4l0,0l-13,13l1.4,1.4l11.9-11.9\r
+       c10.9,11.9,26.4,19.6,43.6,20.4v15.7H49.7v2h48.9v-2H75.1v-15.7C75.4,128.8,75.7,128.8,76,128.8z"/>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+<g>\r
+</g>\r
+</svg>\r

diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
index 51ddcdd..04573a2 100644 (file)
--- a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
+++ b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
@@ -31,28 +31,28 @@
 
 .mw-foreignStructuredUpload-bookletLayout-ownwork {
        /* @embed */
-       background-image: url(bookletlayout/option2/ownwork.png);
-       background-position: left center;
-       padding-left: 4.5em;
+       .background-image-svg('bookletlayout/option2/ownwork.svg', 'bookletlayout/option2/ownwork.png');
+       background-position: right center;
+       padding-right: 4.5em;
 }
 
 .mw-foreignStructuredUpload-bookletLayout-noderiv {
        /* @embed */
-       background-image: url(bookletlayout/option2/noderiv.png);
+       .background-image-svg('bookletlayout/option2/noderiv.svg', 'bookletlayout/option2/noderiv.png');
        background-position: right center;
        padding-right: 4.5em;
 }
 
 .mw-foreignStructuredUpload-bookletLayout-useful {
        /* @embed */
-       background-image: url(bookletlayout/option2/useful.png);
-       background-position: left center;
-       padding-left: 4.5em;
+       .background-image-svg('bookletlayout/option2/useful.svg', 'bookletlayout/option2/useful.png');
+       background-position: right center;
+       padding-right: 4.5em;
 }
 
 .mw-foreignStructuredUpload-bookletLayout-ccbysa {
        /* @embed */
-       background-image: url(bookletlayout/option2/ccbysa.png);
+       .background-image-svg('bookletlayout/option2/ccbysa.svg', 'bookletlayout/option2/ccbysa.png');
        background-position: right center;
        padding-right: 4.5em;
 }