Use background-size trick to resize the icons using CSS. Kind of a ha…

…ck to do resizing of sprites. Fixes #460
GMOD · Mar 26, 2014 · db42c7d · db42c7d
1 parent f6c5866
commit db42c7d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/main.css b/main.css
@@ -702,7 +702,7 @@ div.overview .rubber-highlight * {
 }
 
 
-#moveLeft, #moveRight, #bigZoomOut, #zoomOut, #bigZoomIn, #zoomIn{
+#moveLeft, #moveRight, #bigZoomOut, #zoomOut, #bigZoomIn, #zoomIn, #moveLeftSmall, #moveRightSmall, #zoomInSmall, #zoomOutSmall{
 		background: url(img/scroll_zoom_sprites.png) top left no-repeat;
 		background-size: 50px 200px;
 		cursor: pointer;
@@ -714,11 +714,25 @@ div.overview .rubber-highlight * {
 	width:55px;
 }
 
+#moveLeftSmall {
+	background-position: 4px -14px;
+	background-size: 25px 100px;
+	height: 20px !important;
+	width: 33px;
+}
+
 #moveRight{
 	background-position: 0px -135px;
 	width:55px;
 }
 
+#moveRightSmall {
+	background-position: 4px -64px;
+	background-size: 25px 100px;
+	height: 20px !important;
+	width: 33px;
+}
+
 #bigZoomOut{
 	background-position: 0px -168px;
 	width:35px;
@@ -729,6 +743,14 @@ div.overview .rubber-highlight * {
 	width: 30px;
 }
 
+#zoomOutSmall{
+	background-position: 0px -68px;
+	background-size: 33px 132px;
+	height: 20px !important;
+	width: 20px;
+}
+
+
 #bigZoomIn{
 	background-position: 0px -69px;
 	width:35px;
@@ -739,6 +761,14 @@ div.overview .rubber-highlight * {
 	width: 30px;
 }
 
+#zoomInSmall{
+	background-position: 0px -2px;
+	background-size: 33px 132px;
+	height: 20px !important;
+	width: 20px;
+}
+
+
 
 input.nav {
     font-size: 9px !important;

diff --git a/src/JBrowse/View/Dialog/QuickHelp.js b/src/JBrowse/View/Dialog/QuickHelp.js
@@ -28,12 +28,12 @@ return declare( InfoDialog, {
                 + '<dl>'
                 + '<dt>Moving</dt>'
                 + '<dd><ul>'
-                + '    <li>Move the view by clicking and dragging in the track area, or by clicking <img height="20px" src="'+this.browser.resolveUrl('img/slide-left.png')+'"> or <img height="20px"  src="'+this.browser.resolveUrl('img/slide-right.png')+'"> in the navigation bar, or by pressing the left and right arrow keys.</li>'
+                + '    <li>Move the view by clicking and dragging in the track area, or by clicking <img class="icon nav" id="moveLeftSmall" src="'+this.browser.resolveUrl('img/Empty.png')+'">  or <img class="icon nav" id="moveRightSmall" src="'+this.browser.resolveUrl('img/Empty.png')+'"> in the navigation bar, or by pressing the left and right arrow keys.</li>'
                 + '    <li>Center the view at a point by clicking on either the track scale bar or overview bar, or by shift-clicking in the track area.</li>'
                 + '</ul></dd>'
                 + '<dt>Zooming</dt>'
                 + '<dd><ul>'
-                + '    <li>Zoom in and out by clicking <img height="20px" src="'+this.browser.resolveUrl('img/zoom-in-1.png')+'"> or <img height="20px"  src="'+this.browser.resolveUrl('img/zoom-out-1.png')+'"> in the navigation bar, or by pressing the up and down arrow keys while holding down "shift".</li>'
+                + '    <li>Zoom in and out by clicking <img class="icon nav" id="zoomInSmall" src="'+this.browser.resolveUrl('img/Empty.png')+'"> or <img class="icon nav" id="zoomOutSmall" src="'+this.browser.resolveUrl('img/Empty.png')+'"> in the navigation bar, or by pressing the up and down arrow keys while holding down "shift".</li>'
                 + '    <li>Select a region and zoom to it ("rubber-band" zoom) by clicking and dragging in the overview or track scale bar, or shift-clicking and dragging in the track area.</li>'
                 + '    </ul>'
                 + '</dd>'