Merge pull request #223 from Malvoz/tap-target-size

prushforth · web-flow · commit f2c0c18009a0 · 2020-12-17T15:33:35.000-05:00
Increase default size of primary tap targets
diff --git a/index-mapml-viewer.html b/index-mapml-viewer.html
@@ -54,7 +54,7 @@
     </noscript>
   </head>
   <body>
-    <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen">
+    <mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen noreload">
       <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
     </mapml-viewer>
   </body>
diff --git a/src/mapml.css b/src/mapml.css
@@ -38,19 +38,27 @@
 /*
  * Controls.
  */
+ 
+ .leaflet-top .leaflet-control {
+   margin-top: 5px;
+ }
+ 
+ .leaflet-left .leaflet-control {
+   margin-left: 5px;
+ }
 
 .leaflet-bar a {
   box-sizing: border-box;
-  width: 30px !important;
-  height: 30px !important;
-  line-height: 30px !important;
-  font-size: 24px !important;
+  width: 44px !important;
+  height: 44px !important;
+  line-height: 44px !important;
+  font-size: 34px !important;
   font-weight: normal;
 }
 
 .leaflet-control-layers-toggle {
-  width: 36px !important;
-  height: 36px !important;
+  width: 44px !important;
+  height: 44px !important;
 }
 
 .leaflet-bar a,
@@ -103,21 +111,21 @@
  */
 
 .leaflet-control-fullscreen a {
-  background-size: 30px 60px !important;
-  background-position: 0 0 !important;
+  background-size: 38px 76px !important;
+  background-position: 3px 3px !important;
 }
 .leaflet-fullscreen-on .leaflet-control-fullscreen a {
-  background-size: 30px 60px !important;
-  background-position: 0 -30px !important;
+  background-size: 38px 76px !important;
+  background-position: 3px -35px !important;
 }
 
 /*
  * Layer controls.
  */
 
 .leaflet-control-layers.leaflet-control {
-  margin-right: 10px;
-  margin-left: 10px;
+  margin-right: 5px;
+  margin-left: 5px;
   padding: 0;
 }
 
diff --git a/src/mapml/layers/DebugLayer.js b/src/mapml/layers/DebugLayer.js
@@ -20,8 +20,8 @@ export var DebugOverlay = L.Layer.extend({
       this._container.style.zIndex = 10000;
       this._container.style.position = "absolute";
       this._container.style.top = "auto";
-      this._container.style.bottom = "10px";
-      this._container.style.left = "10px";
+      this._container.style.bottom = "5px";
+      this._container.style.left = "5px";
       this._container.style.right = "auto";
     }
 
