mw.ForeignStructuredUpload.BookletLayout: Option 4: Image improvements
authorPrateek Saxena <prtksxna@gmail.com>
Tue, 15 Dec 2015 11:03:20 +0000 (16:33 +0530)
committerBartosz Dziewoński <matma.rex@gmail.com>
Tue, 15 Dec 2015 15:26:58 +0000 (15:26 +0000)
Add higher quality PNGs. Also added SVGs, and now using the
.background-image-svg() mixing to use SVGs.

Change-Id: I8d8fbf8e58b4ef5d9956731c8b85d5db07b3f5ed

resources/Resources.php
resources/src/mediawiki/bookletlayout/option4/camera.png
resources/src/mediawiki/bookletlayout/option4/camera.svg [new file with mode: 0644]
resources/src/mediawiki/bookletlayout/option4/graphics.png
resources/src/mediawiki/bookletlayout/option4/graphics.svg [new file with mode: 0644]
resources/src/mediawiki/bookletlayout/option4/search.png
resources/src/mediawiki/bookletlayout/option4/search.svg [new file with mode: 0644]
resources/src/mediawiki/bookletlayout/option4/website.png
resources/src/mediawiki/bookletlayout/option4/website.svg [new file with mode: 0644]
resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css [deleted file]
resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less [new file with mode: 0644]

index 02d87d4..3955651 100644 (file)
@@ -1245,7 +1245,7 @@ return array(
        ),
        'mediawiki.ForeignStructuredUpload.BookletLayout' => array(
                'scripts' => 'resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.js',
-               'styles' => 'resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css',
+               'styles' => 'resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less',
                'dependencies' => array(
                        'mediawiki.ForeignStructuredUpload',
                        'mediawiki.Upload.BookletLayout',
index f52391f..a48f9fb 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option4/camera.png and b/resources/src/mediawiki/bookletlayout/option4/camera.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/camera.svg b/resources/src/mediawiki/bookletlayout/option4/camera.svg
new file mode 100644 (file)
index 0000000..dc43b5d
--- /dev/null
@@ -0,0 +1,60 @@
+<?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 264 162" height="162" width="264" style="enable-background:new 0 0 264 162;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:#00AF89;}\r
+       .st1{fill:#FFFFFF;}\r
+       .st2{fill:#FFFFFF;stroke:#E5E5E5;stroke-miterlimit:10;}\r
+       .st3{fill:#E5E5E5;}\r
+       .st4{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}\r
+       .st5{fill:#9B9A9A;}\r
+       .st6{fill:none;stroke:#E5E5E5;stroke-linejoin:round;stroke-miterlimit:10;}\r
+</style>\r
+<rect x="62.3" y="28.1" class="st0" width="137.6" height="105"/>\r
+<g>\r
+       <path class="st1" d="M73.1,57v64.4h45.3V78.5h25.3v42.9h45.3V57H73.1z M94.3,107.6H80.9V94.3h13.3V107.6z M94.3,91.9H80.9V78.5\r
+               h13.3V91.9z M109.9,107.6H96.6V94.3h13.3V107.6z M109.9,91.9H96.6V78.5h13.3V91.9z M164.3,107.6h-13.3V94.3h13.3V107.6z\r
+                M164.3,91.9h-13.3V78.5h13.3V91.9z M179.9,107.6h-13.3V94.3h13.3V107.6z M179.9,91.9h-13.3V78.5h13.3V91.9z"/>\r
+       <rect x="73.1" y="48.5" class="st1" width="116" height="5.7"/>\r
+       <rect x="73.1" y="39.9" class="st1" width="116" height="5.7"/>\r
+</g>\r
+<rect x="62.3" y="124" class="st1" width="137.6" height="1.7"/>\r
+<g>\r
+       <g>\r
+               <rect x="6.7" y="7.4" class="st2" width="35.3" height="12.7"/>\r
+               <rect x="42" y="11.1" class="st3" width="2.3" height="5.7"/>\r
+       </g>\r
+       <rect x="8.2" y="9.1" class="st3" width="5.2" height="9.2"/>\r
+       <rect x="14.5" y="9.1" class="st3" width="5.2" height="9.2"/>\r
+       <rect x="21" y="9.1" class="st3" width="5.2" height="9.2"/>\r
+</g>\r
+<circle class="st3" cx="252.7" cy="12.1" r="6.2"/>\r
+<rect x="239.3" y="9.1" class="st3" width="5.3" height="7.7"/>\r
+<rect x="233" y="9.1" class="st3" width="5.3" height="7.7"/>\r
+<rect x="214" y="143.3" class="st3" width="5.3" height="7.7"/>\r
+<rect x="207.6" y="143.3" class="st3" width="5.3" height="7.7"/>\r
+<rect x="50.4" y="143.3" class="st3" width="5.3" height="7.7"/>\r
+<rect x="39" y="143.3" class="st3" width="5.3" height="7.7"/>\r
+<line class="st4" x1="73.1" y1="148" x2="189.1" y2="148"/>\r
+<line class="st4" x1="132" y1="143.1" x2="132" y2="152.9"/>\r
+<line class="st4" x1="189.1" y1="144.3" x2="189.1" y2="151.7"/>\r
+<line class="st4" x1="73.1" y1="144.3" x2="73.1" y2="151.7"/>\r
+<line class="st4" x1="86" y1="145.5" x2="86" y2="150.5"/>\r
+<line class="st4" x1="100.7" y1="145.5" x2="100.7" y2="150.5"/>\r
+<line class="st4" x1="115.3" y1="145.5" x2="115.3" y2="150.5"/>\r
+<line class="st4" x1="145.8" y1="145.5" x2="145.8" y2="150.5"/>\r
+<line class="st4" x1="160.5" y1="145.5" x2="160.5" y2="150.5"/>\r
+<line class="st4" x1="175.2" y1="145.5" x2="175.2" y2="150.5"/>\r
+<g>\r
+       <rect x="113.8" y="154.1" class="st5" width="3.2" height="4.7"/>\r
+       <polygon class="st5" points="113.8,154.1 115.3,152.3 116.9,154.1        "/>\r
+</g>\r
+<g>\r
+       <g>\r
+               <polyline class="st6" points="34.3,147.1 31.5,147.1 34.3,144.3 31.5,147.1 34.3,147.1 31.5,149.9                 "/>\r
+       </g>\r
+       <polygon class="st3" points="33.9,149.5 32.1,151.7 30.3,149.5   "/>\r
+</g>\r
+<line class="st6" x1="48.9" y1="143.2" x2="45.9" y2="151.1"/>\r
+</svg>\r
index 6fcc2c5..5613f88 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option4/graphics.png and b/resources/src/mediawiki/bookletlayout/option4/graphics.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/graphics.svg b/resources/src/mediawiki/bookletlayout/option4/graphics.svg
new file mode 100644 (file)
index 0000000..ff3d682
--- /dev/null
@@ -0,0 +1,98 @@
+<?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 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}\r
+       .st1{fill:none;stroke:#9B9A9A;stroke-miterlimit:10;}\r
+       .st2{fill:#E5E5E5;}\r
+       .st3{fill:#9B9A9A;}\r
+       .st4{fill:#00AF89;}\r
+       .st5{fill:#FFFFFF;}\r
+       .st6{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}\r
+</style>\r
+<line class="st0" x1="2" y1="10.5" x2="262" y2="10.5"/>\r
+<line class="st0" x1="2" y1="24.8" x2="262" y2="24.8"/>\r
+<g>\r
+       <rect x="6.9" y="32.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="32.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="42.1" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="42.1" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="51.4" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="51.4" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="60.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="60.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="70.1" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="70.1" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="79.4" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="79.4" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="88.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="88.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="98.1" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="98.1" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="107.4" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="107.4" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="6.9" y="116.8" class="st1" width="9.3" height="9.3"/>\r
+       <rect x="16.2" y="116.8" class="st1" width="9.3" height="9.3"/>\r
+</g>\r
+<rect x="3.2" y="12.7" class="st2" width="9.3" height="9.3"/>\r
+<rect x="3.2" y="3.4" class="st2" width="4.7" height="4.7"/>\r
+<rect x="10.2" y="3.4" class="st2" width="4.7" height="4.7"/>\r
+<rect x="16.9" y="3.4" class="st2" width="4.7" height="4.7"/>\r
+<rect x="249.2" y="3.4" class="st2" width="4.7" height="4.7"/>\r
+<rect x="255.9" y="3.4" class="st2" width="4.7" height="4.7"/>\r
+<rect x="14.6" y="12.7" class="st2" width="9.3" height="9.3"/>\r
+<rect x="239.9" y="12.7" class="st2" width="9.3" height="9.3"/>\r
+<rect x="228.9" y="12.7" class="st2" width="9.3" height="9.3"/>\r
+<rect x="251.2" y="12.7" class="st2" width="9.3" height="9.3"/>\r
+<g>\r
+       <path class="st2" d="M73.5,13.7V21H26.6v-7.3H73.5 M74.5,12.7H25.6V22h48.9V12.7L74.5,12.7z"/>\r
+</g>\r
+<g>\r
+       <path class="st2" d="M117.8,13.7V21H76.9v-7.3H117.8 M118.8,12.7H75.9V22h42.9V12.7L118.8,12.7z"/>\r
+</g>\r
+<g>\r
+       <path class="st2" d="M162.5,13.7V21h-40.9v-7.3H162.5 M163.5,12.7h-42.9V22h42.9V12.7L163.5,12.7z"/>\r
+</g>\r
+<rect x="209.7" y="30.3" class="st2" width="50.9" height="32.3"/>\r
+<rect x="209.7" y="30.3" class="st3" width="50.9" height="5.7"/>\r
+<g>\r
+       <rect x="212.2" y="38.5" class="st3" width="6.2" height="6.2"/>\r
+       <rect x="239.9" y="38.5" class="st3" width="6.2" height="2.5"/>\r
+       <rect x="239.9" y="42.2" class="st3" width="6.2" height="2.5"/>\r
+       <g>\r
+               <path class="st3" d="M237.2,39.5v4.2H221v-4.2H237.2 M238.2,38.5H220v6.2h18.2V38.5L238.2,38.5z"/>\r
+       </g>\r
+</g>\r
+<g>\r
+       <rect x="212.2" y="46.5" class="st3" width="6.2" height="6.2"/>\r
+       <rect x="239.9" y="46.5" class="st3" width="6.2" height="2.5"/>\r
+       <rect x="239.9" y="50.2" class="st3" width="6.2" height="2.5"/>\r
+       <g>\r
+               <path class="st3" d="M237.2,47.5v4.2H221v-4.2H237.2 M238.2,46.5H220v6.2h18.2V46.5L238.2,46.5z"/>\r
+       </g>\r
+</g>\r
+<rect x="209.7" y="66.6" class="st2" width="50.9" height="32.3"/>\r
+<rect x="209.7" y="66.6" class="st3" width="50.9" height="5.7"/>\r
+<g>\r
+       <path class="st3" d="M257.2,75.8V80h-44.1v-4.2H257.2 M258.2,74.8h-46.1V81h46.1V74.8L258.2,74.8z"/>\r
+</g>\r
+<g>\r
+       <path class="st3" d="M257.2,81v4.2h-44.1V81H257.2 M258.2,80h-46.1v6.2h46.1V80L258.2,80z"/>\r
+</g>\r
+<g>\r
+       <path class="st3" d="M257.2,86.2v4.2h-44.1v-4.2H257.2 M258.2,85.2h-46.1v6.2h46.1V85.2L258.2,85.2z"/>\r
+</g>\r
+<g>\r
+       <path class="st3" d="M257.2,91.3v4.2h-44.1v-4.2H257.2 M258.2,90.3h-46.1v6.2h46.1V90.3L258.2,90.3z"/>\r
+</g>\r
+<ellipse class="st1" cx="218.3" cy="85.7" rx="0" ry="10.2"/>\r
+<rect x="69.5" y="47.5" class="st4" width="108" height="82.4"/>\r
+<circle class="st5" cx="123.5" cy="88.7" r="6.6"/>\r
+<circle class="st5" cx="116.9" cy="106.2" r="6.6"/>\r
+<circle class="st5" cx="154.5" cy="80.3" r="6.6"/>\r
+<circle class="st5" cx="93.1" cy="81.5" r="6.6"/>\r
+<circle class="st5" cx="141.7" cy="114.1" r="6.6"/>\r
+<circle class="st6" cx="123.5" cy="88.7" r="18.2"/>\r
+<circle class="st6" cx="123.5" cy="88.7" r="31.7"/>\r
+</svg>\r
index 5dca7fa..26d6beb 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option4/search.png and b/resources/src/mediawiki/bookletlayout/option4/search.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/search.svg b/resources/src/mediawiki/bookletlayout/option4/search.svg
new file mode 100644 (file)
index 0000000..7bcf826
--- /dev/null
@@ -0,0 +1,92 @@
+<?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
+        viewBox="0 0 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{display:none;}\r
+       .st1{display:inline;}\r
+       .st2{fill:#FFFFFF;}\r
+       .st3{fill:#E5E5E5;}\r
+       .st4{opacity:0.5;fill:#E5E5E5;enable-background:new    ;}\r
+       .st5{fill:#E5E5E5;stroke:#E5E5E5;}\r
+       .st6{fill:#9B9B9B;}\r
+       .st7{fill:#4470B6;}\r
+       .st8{fill:#D0D1D1;}\r
+       .st9{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}\r
+       .st10{fill:none;stroke:#D02227;stroke-miterlimit:10;}\r
+       .st11{fill:#D02227;}\r
+</style>\r
+<g id="Layer_1" class="st0">\r
+       <g class="st1">\r
+               <path class="st2" d="M24.8,151.4l-11.5,10l-12.9-9.6V0.5h263v151.7l-9,6.7V42.5h-39v112.6l-4.4-3.7l-7.6,5.3V42.5h-155v110.8\r
+                       l-9.8,8L24.8,151.4z"/>\r
+               <path class="st3" d="M263,1v151l-8,6V42h-40v112l-3.3-2.8l-0.6-0.5l-0.6,0.4l-6.5,4.6V42H48v111.1l-9.3,7.7l-13.3-9.6l-0.6-0.5\r
+                       l-0.6,0.5l-10.9,9.5L1,151.5V1L263,1L263,1z M264,0H0v152l13.4,10l11.5-10l13.9,10l10.2-8.4V43h154v114.7l8.1-5.7l4.9,4.2V43h38\r
+                       v116.9l10-7.4V0L264,0z M203,43H49v110.6l2.1-1.6l12.6,10l13.8-10l14.2,10l13-10l13,10l13.8-10l12.1,10l13.4-10l14.2,10l13-10\r
+                       l13,10l5.8-4.3L203,43L203,43z"/>\r
+               <path class="st4" d="M254,43h-38v113.2l7.6,5.8l13.8-10l13.9,10l2.7-2.1V43z"/>\r
+               <path class="st5" d="M2,14.5h260"/>\r
+               <path class="st3" d="M232.5,5h26v6h-26V5z M208.5,5h22v6h-22V5z M142,6v4H50V6H142z M143,5H49v6h94V5z M184.5,5h22v6h-22V5z\r
+                        M161.5,5h13v6h-13V5z M176.5,5h6v6h-6V5z M153.5,5h6v6h-6V5z M9,5h32v6H9V5z M52,7h2v2h-2V7z M11,36c0-7.7,6.3-14,14-14\r
+                       s14,6.3,14,14s-6.3,14-14,14S11,43.7,11,36z M38,107V72H13v35H38z M38,59v-5H13v5H38z"/>\r
+       </g>\r
+       <g class="st1">\r
+               <path class="st6" d="M123.8,68H85.6v7.8h38.1L123.8,68L123.8,68z M180.5,103v-8.8h-50.8v8.8H180.5z M90.8,80.6H69.9v8.6h20.8V80.6\r
+                       z M189.3,88.4v-7.8h-37.7v7.8H189.3z M100.7,94.1H75v7.8h25.7V94.1z M175.2,68H129v7.8h46.2V68z"/>\r
+               <path class="st7" d="M94.7,80.6v9.2h51.6v-9.2L94.7,80.6z"/>\r
+       </g>\r
+       <g class="st1">\r
+               <path class="st2" d="M94,94h75v44H94V94z"/>\r
+               <path class="st7" d="M169,94h-31v44h31V94z M150.8,118.1l5.9,9.7l3.2-3l4.8,6.1l-21.1,0l6.2-12.8H150.8z"/>\r
+               <g transform="scale(-1 1)">\r
+                       <path class="st8" d="M-102,100h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,100.2-101.4,100-102,100z"/>\r
+                       <path class="st8" d="M-102,104h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,104.2-101.4,104-102,104z"/>\r
+                       <path class="st8" d="M-102,108h-18c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h18c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,108.2-101.4,108-102,108z"/>\r
+                       <path class="st8" d="M-102,112h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,112.2-101.4,112-102,112z"/>\r
+                       <path class="st8" d="M-102,116h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,116.2-101.4,116-102,116z"/>\r
+                       <path class="st8" d="M-102,120h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,120.2-101.4,120-102,120z"/>\r
+                       <path class="st8" d="M-102,124h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,124.2-101.4,124-102,124z"/>\r
+                       <path class="st8" d="M-102,128h-26c-0.6,0-1,0.2-1,0.5l0,0c0,0.3,0.4,0.5,1,0.5h26c0.6,0,1-0.2,1-0.5l0,0\r
+                               C-101,128.2-101.4,128-102,128z"/>\r
+               </g>\r
+       </g>\r
+</g>\r
+<g id="Layer_2">\r
+       <g>\r
+               <rect x="4.8" y="5.5" class="st2" width="93" height="5"/>\r
+               <path class="st3" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>\r
+       </g>\r
+       <polygon class="st3" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14    "/>\r
+       <polygon class="st3" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14  "/>\r
+       <line class="st9" x1="2" y1="14.5" x2="262" y2="14.5"/>\r
+       <line class="st9" x1="2" y1="32.8" x2="262" y2="32.8"/>\r
+       <g>\r
+               <circle class="st10" cx="8.9" cy="22.6" r="3.6"/>\r
+               <line class="st10" x1="11.6" y1="25" x2="15" y2="28.5"/>\r
+       </g>\r
+       <rect x="20.9" y="19" class="st3" width="57.6" height="9.5"/>\r
+       <rect x="4.3" y="37" class="st3" width="69.2" height="32.7"/>\r
+       <rect x="4.3" y="72.5" class="st3" width="90.1" height="56.8"/>\r
+       <rect x="97" y="72.5" class="st11" width="106.5" height="56.8"/>\r
+       <rect x="206.3" y="72.5" class="st3" width="52.4" height="56.8"/>\r
+       <rect x="4.3" y="132.2" class="st3" width="36.5" height="25.3"/>\r
+       <rect x="43.7" y="132.2" class="st3" width="62.3" height="25.3"/>\r
+       <rect x="109.3" y="132.2" class="st3" width="18.1" height="25.3"/>\r
+       <rect x="169.1" y="132.2" class="st3" width="18.1" height="25.3"/>\r
+       <rect x="189.8" y="132.2" class="st3" width="18.1" height="25.3"/>\r
+       <rect x="210.6" y="132.2" class="st3" width="48.1" height="25.3"/>\r
+       <rect x="130" y="132.2" class="st3" width="36" height="25.3"/>\r
+       <rect x="115.2" y="37" class="st3" width="36.5" height="32.7"/>\r
+       <rect x="76.1" y="37" class="st3" width="36.5" height="32.7"/>\r
+       <rect x="154.6" y="37" class="st3" width="56" height="32.7"/>\r
+       <rect x="213.3" y="37" class="st3" width="45.4" height="32.7"/>\r
+       <path class="st2" d="M102.4,115.4l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8h-80.3L102.4,115.4z"/>\r
+</g>\r
+</svg>\r
index 9c1914f..7e00751 100644 (file)
Binary files a/resources/src/mediawiki/bookletlayout/option4/website.png and b/resources/src/mediawiki/bookletlayout/option4/website.png differ
diff --git a/resources/src/mediawiki/bookletlayout/option4/website.svg b/resources/src/mediawiki/bookletlayout/option4/website.svg
new file mode 100644 (file)
index 0000000..c6bf6fe
--- /dev/null
@@ -0,0 +1,57 @@
+<?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 264 162" style="enable-background:new 0 0 264 162;" xml:space="preserve">\r
+<style type="text/css">\r
+       .st0{fill:#FFFFFF;}\r
+       .st1{fill:#E5E5E5;}\r
+       .st2{fill:none;stroke:#E5E5E5;stroke-miterlimit:10;}\r
+       .st3{fill:#D02227;}\r
+       .st4{fill:#9B9A9A;}\r
+</style>\r
+<g>\r
+       <rect x="4.8" y="5.5" class="st0" width="93" height="5"/>\r
+       <path class="st1" d="M97.2,6v4h-92V6H97.2 M98.2,5h-94v6h94V5L98.2,5z"/>\r
+</g>\r
+<polygon class="st1" points="177.7,8 176.4,8 109.6,8 108.2,8 106,14 111.8,14 174.2,14 180,14 "/>\r
+<polygon class="st1" points="256.5,8 255.2,8 188.3,8 187,8 184.7,14 190.6,14 252.9,14 258.8,14 "/>\r
+<line class="st2" x1="2" y1="14.5" x2="262" y2="14.5"/>\r
+<rect x="44" y="48.4" class="st3" width="106.5" height="56.8"/>\r
+<path class="st0" d="M49.3,91.2l9.5-9.5l12.8,12.8l26.1-26.1l31.8,31.8H49.3L49.3,91.2z"/>\r
+<circle class="st1" cx="55" cy="32.3" r="11.9"/>\r
+<g>\r
+       <rect x="70.7" y="27.4" class="st4" width="76.2" height="7"/>\r
+       <rect x="70.7" y="35.5" class="st4" width="22.3" height="1.7"/>\r
+       <rect x="95" y="35.5" class="st4" width="28.2" height="1.7"/>\r
+</g>\r
+<rect x="44" y="107.8" class="st1" width="23.3" height="23.3"/>\r
+<rect x="70.7" y="107.8" class="st1" width="79.8" height="1.8"/>\r
+<rect x="70.7" y="114" class="st1" width="79.8" height="1.8"/>\r
+<rect x="70.7" y="120.2" class="st1" width="79.8" height="1.8"/>\r
+<rect x="70.7" y="126.4" class="st1" width="79.8" height="1.8"/>\r
+<rect x="44" y="134.4" class="st1" width="106.5" height="1.8"/>\r
+<rect x="44" y="140.6" class="st1" width="106.5" height="1.8"/>\r
+<rect x="44" y="146.8" class="st1" width="106.5" height="1.8"/>\r
+<rect x="44" y="153" class="st1" width="106.5" height="1.8"/>\r
+<g>\r
+       <rect x="155.7" y="37.2" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="43.4" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="49.6" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="55.8" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="27.4" class="st1" width="57.3" height="7"/>\r
+</g>\r
+<g>\r
+       <rect x="155.7" y="78.2" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="84.4" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="90.6" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="96.8" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="68.4" class="st1" width="57.3" height="7"/>\r
+</g>\r
+<g>\r
+       <rect x="155.7" y="116.7" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="122.9" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="129.1" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="135.3" class="st1" width="57.3" height="1.8"/>\r
+       <rect x="155.7" y="106.9" class="st1" width="57.3" height="7"/>\r
+</g>\r
+</svg>\r
diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.css
deleted file mode 100644 (file)
index c50ad7f..0000000
+++ /dev/null
@@ -1,141 +0,0 @@
-/* All */
-
-.mw-foreignStructuredUpload-bookletLayout-license {
-       font-size: 90%;
-       line-height: 1.4em;
-       color: #555;
-}
-
-/* Option 2 */
-
-.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
-       background-repeat: no-repeat;
-       background-size: 3.5em;
-       min-height: 4em;
-       margin-bottom: 0.25em;
-       display: table;
-       vertical-align: middle;
-       -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-       box-sizing: border-box;
-       width: 100%;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
-       /* Together with 'display: table' above, and FieldLayout styles, this aligns the text */
-       /* vertically to the middle. Don't try this at home, kids. */
-       display: table-row;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-ownwork {
-       /* @embed */
-       background-image: url(bookletlayout/option2/ownwork.png);
-       background-position: left center;
-       padding-left: 4.5em;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-noderiv {
-       /* @embed */
-       background-image: url(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;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-ccbysa {
-       /* @embed */
-       background-image: url(bookletlayout/option2/ccbysa.png);
-       background-position: right center;
-       padding-right: 4.5em;
-}
-
-/* Option 3 */
-
-.mw-foreignStructuredUpload-bookletLayout-question .oo-ui-radioOptionWidget {
-       display: inline-block;
-       margin-right: 2em;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-checkbox.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
-       /* No unreadable greys, please. This is the lightest WCAG AA compliant grey. */
-       color: #707070;
-}
-
-/* Option 4 */
-
-.mw-foreignStructuredUpload-bookletLayout-guide {
-       position: relative;
-       height: 315px;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good,
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
-       display: table;
-       width: 150px;
-       height: 140px;
-       position: absolute;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good span,
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad span {
-       display: table-cell;
-       vertical-align: middle;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good {
-       top: 0;
-       left: 0;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
-       bottom: 0;
-       right: 0;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image {
-       position: absolute;
-       width: 200px;
-       height: 122px;
-       background-size: 200px;
-       background-repeat: no-repeat;
-       border: 1px solid #ccc;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-camera {
-       /* @embed */
-       background-image: url(bookletlayout/option4/camera.png);
-       top: 0;
-       right: 80px;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-graphics {
-       /* @embed */
-       background-image: url(bookletlayout/option4/graphics.png);
-       top: 50px;
-       right: 0;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-website {
-       /* @embed */
-       background-image: url(bookletlayout/option4/website.png);
-       left: 0;
-       bottom: 50px;
-}
-
-.mw-foreignStructuredUpload-bookletLayout-guide-image-search {
-       /* @embed */
-       background-image: url(bookletlayout/option4/search.png);
-       left: 80px;
-       bottom: 0;
-}
-
-.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.mw-foreignStructuredUpload-bookletLayout-guide-checkbox {
-       /* We're really tight on vertical space. */
-       margin-bottom: 0;
-}
diff --git a/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less b/resources/src/mediawiki/mediawiki.ForeignStructuredUpload.BookletLayout.less
new file mode 100644 (file)
index 0000000..51ddcdd
--- /dev/null
@@ -0,0 +1,144 @@
+@import "mediawiki.mixins";
+
+/* All */
+
+.mw-foreignStructuredUpload-bookletLayout-license {
+       font-size: 90%;
+       line-height: 1.4em;
+       color: #555;
+}
+
+/* Option 2 */
+
+.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
+       background-repeat: no-repeat;
+       background-size: 3.5em;
+       min-height: 4em;
+       margin-bottom: 0.25em;
+       display: table;
+       vertical-align: middle;
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       box-sizing: border-box;
+       width: 100%;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-withicon.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
+       /* Together with 'display: table' above, and FieldLayout styles, this aligns the text */
+       /* vertically to the middle. Don't try this at home, kids. */
+       display: table-row;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-ownwork {
+       /* @embed */
+       background-image: url(bookletlayout/option2/ownwork.png);
+       background-position: left center;
+       padding-left: 4.5em;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-noderiv {
+       /* @embed */
+       background-image: url(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;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-ccbysa {
+       /* @embed */
+       background-image: url(bookletlayout/option2/ccbysa.png);
+       background-position: right center;
+       padding-right: 4.5em;
+}
+
+/* Option 3 */
+
+.mw-foreignStructuredUpload-bookletLayout-question .oo-ui-radioOptionWidget {
+       display: inline-block;
+       margin-right: 2em;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-checkbox.oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+       /* No unreadable greys, please. This is the lightest WCAG AA compliant grey. */
+       color: #707070;
+}
+
+/* Option 4 */
+
+.mw-foreignStructuredUpload-bookletLayout-guide {
+       position: relative;
+       height: 315px;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good,
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
+       display: table;
+       width: 150px;
+       height: 140px;
+       position: absolute;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good span,
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad span {
+       display: table-cell;
+       vertical-align: middle;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-good {
+       top: 0;
+       left: 0;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-text-wrapper-bad {
+       bottom: 0;
+       right: 0;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image {
+       position: absolute;
+       width: 200px;
+       height: 122px;
+       background-color: #fff;
+       background-size: 200px;
+       background-repeat: no-repeat;
+       border: 1px solid #e5e5e5;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-camera {
+       /* @embed */
+       .background-image-svg('bookletlayout/option4/camera.svg','bookletlayout/option4/camera.png');
+       top: 0;
+       right: 80px;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-graphics {
+       /* @embed */
+       .background-image-svg('bookletlayout/option4/graphics.svg','bookletlayout/option4/graphics.png');
+       top: 50px;
+       right: 0;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-website {
+       /* @embed */
+       .background-image-svg('bookletlayout/option4/website.svg','bookletlayout/option4/website.png');
+       left: 0;
+       bottom: 50px;
+}
+
+.mw-foreignStructuredUpload-bookletLayout-guide-image-search {
+       /* @embed */
+       .background-image-svg('bookletlayout/option4/search.svg','bookletlayout/option4/search.png');
+       left: 80px;
+       bottom: 0;
+}
+
+.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline.mw-foreignStructuredUpload-bookletLayout-guide-checkbox {
+       /* We're really tight on vertical space. */
+       margin-bottom: 0;
+}