Merge pull request #4255 from ahocevar/zoomslider-width

Fix zoom slider width for retina displays
This commit is contained in:
Andreas Hocevar
2015-10-12 20:19:29 +02:00
3 changed files with 7 additions and 16 deletions
+2 -13
View File
@@ -192,26 +192,15 @@
.ol-zoomslider { .ol-zoomslider {
top: 4.5em; top: 4.5em;
left: .5em; left: .5em;
width: 24px;
height: 200px; height: 200px;
} }
.ol-zoomslider-thumb { .ol-zoomslider button {
position: absolute; position: relative;
background: #7b98bc;
background: rgba(0,60,136,0.5);
border-radius: 2px;
cursor: pointer;
height: 10px; height: 10px;
width: 22px;
margin: 3px;
} }
.ol-touch .ol-zoomslider { .ol-touch .ol-zoomslider {
top: 5.5em; top: 5.5em;
width: 2.052em;
}
.ol-touch .ol-zoomslider-thumb {
width: 1.8em;
} }
.ol-overviewmap { .ol-overviewmap {
+4 -2
View File
@@ -79,8 +79,10 @@ ol.control.ZoomSlider = function(opt_options) {
this.duration_ = options.duration ? options.duration : 200; this.duration_ = options.duration ? options.duration : 200;
var className = options.className ? options.className : 'ol-zoomslider'; var className = options.className ? options.className : 'ol-zoomslider';
var thumbElement = goog.dom.createDom(goog.dom.TagName.DIV, var thumbElement = goog.dom.createDom(goog.dom.TagName.BUTTON, {
[className + '-thumb', ol.css.CLASS_UNSELECTABLE]); 'type': 'button',
'class': className + '-thumb ' + ol.css.CLASS_UNSELECTABLE
});
var containerElement = goog.dom.createDom(goog.dom.TagName.DIV, var containerElement = goog.dom.createDom(goog.dom.TagName.DIV,
[className, ol.css.CLASS_UNSELECTABLE, ol.css.CLASS_CONTROL], [className, ol.css.CLASS_UNSELECTABLE, ol.css.CLASS_CONTROL],
thumbElement); thumbElement);
@@ -45,7 +45,7 @@ describe('ol.control.ZoomSlider', function() {
expect(zoomSliderThumbs.length).to.be(1); expect(zoomSliderThumbs.length).to.be(1);
zoomSliderThumb = zoomSliderThumbs[0]; zoomSliderThumb = zoomSliderThumbs[0];
expect(zoomSliderThumb instanceof HTMLDivElement).to.be(true); expect(zoomSliderThumb instanceof HTMLButtonElement).to.be(true);
hasUnselectableCls = goog.dom.classlist.contains(zoomSliderThumb, hasUnselectableCls = goog.dom.classlist.contains(zoomSliderThumb,
'ol-unselectable'); 'ol-unselectable');