Permalink
Browse files

Full hi-DPI support (#786)

* Support retina screens

* Update menu assets

* Update active state of clipboard icon

* Update menu color

* Update small menu
  • Loading branch information...
TheoChevalier committed Aug 1, 2016
1 parent 4be64e6 commit 0732efa82f1661715dbe230d55babd4946225b78
@@ -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
@@ -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 .= "
Binary file not shown.
View
Binary file not shown.
View
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 47.999998 48.000002" width="48" height="48"><style id="style3">.Round_x0020_Corners_x0020_2_x0020_pt{fill:#FFF;stroke:#000;stroke-miterlimit:10}.Live_x0020_Reflect_x0020_X{fill:none}.Bevel_x0020_Soft{fill:url(#SVGID_1_)}.Dusk{fill:#FFF}.Foliage_GS{fill:#FD0}.Pompadour_GS{fill:#44ade2}.Pompadour_GS,.st0{fill-rule:evenodd;clip-rule:evenodd}.st0{fill:#191717}</style><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-216.625" y1="-385.75" x2="-215.918" y2="-385.043"><stop offset="0" id="stop6" stop-color="#dedfe3"/><stop offset=".174" id="stop8" stop-color="#d8d9dd"/><stop offset=".352" id="stop10" stop-color="#c9cacd"/><stop offset=".532" id="stop12" stop-color="#b4b5b8"/><stop offset=".714" id="stop14" stop-color="#989a9c"/><stop offset=".895" id="stop16" stop-color="#797c7e"/><stop offset="1" id="stop18" stop-color="#656b6c"/></linearGradient><path class="st0" d="M23.928 1.15C11 1.15.514 11.638.514 24.566c0 10.343 6.75 19.105 15.945 22.265 1.148.144 1.58-.574 1.58-1.15v-4.02c-6.465 1.436-7.902-3.16-7.902-3.16-1.005-2.73-2.586-3.45-2.586-3.45-2.154-1.435.144-1.435.144-1.435 2.298.144 3.59 2.442 3.59 2.442 2.156 3.59 5.46 2.586 6.753 2.01.142-1.58.86-2.585 1.435-3.16-5.17-.574-10.63-2.585-10.63-11.635 0-2.585.862-4.596 2.442-6.32-.287-.575-1.005-3.017.288-6.177 0 0 2.01-.574 6.464 2.442 1.866-.574 3.877-.718 5.888-.718 2.01 0 4.022.286 5.89.717 4.453-3.016 6.464-2.442 6.464-2.442 1.293 3.16.43 5.602.287 6.177a9.29 9.29 0 0 1 2.44 6.32c0 9.05-5.458 10.918-10.63 11.492.863.718 1.58 2.155 1.58 4.31v6.464c0 .574.432 1.292 1.58 1.15 9.338-3.16 15.946-11.924 15.946-22.266-.143-12.785-10.63-23.27-23.558-23.27z" id="path20" clip-rule="evenodd" fill="#191717" fill-rule="evenodd"/></svg>
View
BIN web/img/menu.png 100644 → 100755
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
Binary file not shown.
Binary file not shown.
View
@@ -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');
View
@@ -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;
}
View
@@ -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;
}

0 comments on commit 0732efa

Please sign in to comment.