Full hi-DPI support (#786)

* Support retina screens

* Update menu assets

* Update active state of clipboard icon

* Update menu color

* Update small menu

app/classes/Transvision/ShowResults.php

@@ -387,7 +387,7 @@ public static function resultsTable($search_object, $search_results, $page)
                 $target_string = '<em class="error">Warning: Empty string</em>';
             } else {
                 $meta_target = "
-                      <span class='clipboard' data-clipboard-target='#{$clipboard_target_string}' alt='Copy to clipboard'><img src='/img/copy_icon_black_18x18.png'></span>
+                      <span class='clipboard' data-clipboard-target='#{$clipboard_target_string}' alt='Copy to clipboard'></span>
                       {$error_message}";
             }
 
@@ -397,7 +397,7 @@ public static function resultsTable($search_object, $search_results, $page)
             } elseif (! $target_string2) {
                 $target_string2 = '<em class="error">Warning: Empty string</em>';
             } else {
-                $meta_target2 = "<span class='clipboard' data-clipboard-target='#{$clipboard_target_string2}' alt='Copy to clipboard'><img src='/img/copy_icon_black_18x18.png'></span>";
+                $meta_target2 = "<span class='clipboard' data-clipboard-target='#{$clipboard_target_string2}' alt='Copy to clipboard'></span>";
             }
 
             // Replace / and : in the key name and use it as an anchor name

app/views/results_entities.php

@@ -75,7 +75,7 @@
         } elseif (! $target_string2) {
             $target_string2 = '<em class="error">Warning: Empty string</em>';
         } else {
-            $meta_target2 = "<span class='clipboard' data-clipboard-target='#{$clipboard_target_string2}' alt='Copy to clipboard'><img src='/img/copy_icon_black_18x18.png'></span>";
+            $meta_target2 = "<span class='clipboard' data-clipboard-target='#{$clipboard_target_string2}' alt='Copy to clipboard'></span>";
         }
 
         $extra_column_rows = "
@@ -138,7 +138,7 @@
     } else {
         $meta_target = "
           {$error_message}
-          <span class='clipboard' data-clipboard-target='#{$clipboard_target_string}' alt='Copy to clipboard'><img src='/img/copy_icon_black_18x18.png'></span>";
+          <span class='clipboard' data-clipboard-target='#{$clipboard_target_string}' alt='Copy to clipboard'></span>";
     }
 
     $table .= "

web/js/base.js

@@ -3,7 +3,7 @@ $(document).ready(function() {
         $('#links-top').slideToggle(transition, function(){
             if ($('#links-top').is(':visible')) {
                 $('#links-top-button').attr('title', 'Hide Transvision Menu');
-                $('#links-top-button').css('background-position', '0 -38px');
+                $('#links-top-button').css('background-position', '0 -36px');
             } else {
                 $('#links-top-button').attr('title', 'Display Transvision Menu');
                 $('#links-top-button').css('background-position', '0 0');

web/style/changelog.css

@@ -31,7 +31,8 @@
     padding-left: 30px;
     display: block;
     height: 28px;
-    background: url(/img/github.png) top left no-repeat transparent;
+    background: url(/img/github.svg) top left no-repeat transparent;
+    background-size: 24px;
     padding-top: 3px;
 }
 

web/style/transvision.css

@@ -71,7 +71,7 @@ body {
 
 #main-wrapper {
     background-color: #cce0f0;
-    border-top: 1px solid #fff;
+    border-top: 2px solid #fff;
     padding-bottom: 0.5em;
     flex: 1;
     -ms-flex: 1 0 0;
@@ -277,11 +277,20 @@ h3 {
     display: block;
     float: right;
     margin-right: 5px;
-    width: 125px;
+    width: 147px;
     height: 36px;
     background: url(/img/menu.png) center 0 no-repeat transparent;
 }
 
+@media
+(-webkit-min-device-pixel-ratio: 2),
+(min-resolution: 192dpi) {
+    #links-top-button {
+        background: url(/img/menu_highres.png) center 0 no-repeat transparent;
+        background-size: 147px 72px;
+    }
+}
+
 .nojs #links-top-button {
     background-position: 0 -38px;
 }
@@ -709,7 +718,8 @@ input[type="checkbox"]:disabled + label {
     min-height: 18px;
     min-width: 18px;
     cursor: pointer;
-    background: url(/img/swap_icon_horiz_18x18.png) center no-repeat transparent;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path style="fill: rgb(51,51,51)" d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>') center no-repeat transparent;
+    fill: #fff;
 }
 
 #search_field_container {
@@ -1127,7 +1137,7 @@ input[type="checkbox"]:disabled + label {
     }
 
     #links-top-button {
-        width: 100px;
+        width: 114px;
         background: url(/img/menus.png) top center no-repeat transparent;
     }
 
@@ -1210,9 +1220,10 @@ input[type="checkbox"]:disabled + label {
     #main_search fieldset#locale_switch {
         margin: 0;
         padding: 0 0 0 14.5em;
-        background: url(/img/swap_icon_vert_18x18.png) center no-repeat transparent;
+        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path style="fill: rgb(51,51,51)" d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z"/></svg>') center no-repeat transparent;
     }
 
+
     #main_search fieldset#locale_switch img {
         display: block;
     }
@@ -1241,11 +1252,18 @@ input[type="checkbox"]:disabled + label {
 /* Tooltips for copy-pasting of strings */
 .clipboard {
     float: right;
+    width: 18px;
+    height: 18px;
     font-size: 200%;
-    color: #000;
     cursor: pointer;
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path style="fill: rgb(51,51,51)" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') center no-repeat transparent;
 }
 
+.clipboard:active {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path style="fill: rgb(0,149,221)" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') center no-repeat transparent;
+}
+
+
 @media only screen and (max-width: 850px) {
     .clipboard img {
         position: relative;
@@ -1254,10 +1272,6 @@ input[type="checkbox"]:disabled + label {
     }
 }
 
-.clipboard:active {
-    background: #90ee90;
-}
-
 .tooltip {
     position: relative;
 }