From d3ecfebce421175e655275bd5ac6c940e56be076 Mon Sep 17 00:00:00 2001 From: Ilya Ilyankou Date: Thu, 8 Sep 2016 09:14:01 +0300 Subject: [PATCH 1/6] Fix icon sizes --- style.css | 53 ++++++++++++++++------------------------------------- 1 file changed, 16 insertions(+), 37 deletions(-) diff --git a/style.css b/style.css index 98c5b09..0e260cc 100644 --- a/style.css +++ b/style.css @@ -17,27 +17,19 @@ body { line-height: 36px; }*/ -/* slide menu button with question circle */ -.leaflet-control-slidemenu a, .leaflet-control-slidemenu a:hover { - width: 36px; - height: 36px; - line-height: 36px; +/* slide menu button with question circle + and locate button */ +.leaflet-control-slidemenu a, +.leaflet-control-locate a { + width: 36px !important; + height: 36px !important; + line-height: 36px !important; font-size: 2em; } -/* leaflet-control-locate button*/ -.leaflet-control-locate a, leaflet-control-locate a:hover { - width: 36px; - height: 36px; - line-height: 36px; - font-size: 2em; - color: #0000ff; -} -.leaflet-control-locate.active a { - color: #0000ff; -} -.leaflet-control-locate.active.following a { - color: #0000ff; +/* locate button */ +.leaflet-control-locate a { + color: #00f !important; } /*line mileage distance markers and colors*/ @@ -52,22 +44,9 @@ body { border-radius: 9px; } -.bg-blue { - background: blue; -} - -.bg-green { - background: green; -} - -.bg-black { - background: black; -} - -.bg-yellow { - background: #ffcc00; -} - -.bg-pink { - background: #f39; -} +/* Background colors of distance markers */ +.bg-blue { background: blue; } +.bg-green { background: green; } +.bg-black { background: black; } +.bg-yellow { background: #fc0; } +.bg-pink { background: #f39; } From d6b611afa5b260dcb56514e9ac9f18962e4c2725 Mon Sep 17 00:00:00 2001 From: Ilya Ilyankou Date: Thu, 8 Sep 2016 09:23:33 +0300 Subject: [PATCH 2/6] Fix icon sizes again --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 0e260cc..d7b4d35 100644 --- a/style.css +++ b/style.css @@ -20,7 +20,8 @@ body { /* slide menu button with question circle and locate button */ .leaflet-control-slidemenu a, -.leaflet-control-locate a { +.leaflet-control-locate a, +.leaflet-control-layers a { width: 36px !important; height: 36px !important; line-height: 36px !important; From 4cf1f73a31c6b158eb81862e96cdb3e3b1ee9fee Mon Sep 17 00:00:00 2001 From: Ilya Ilyankou Date: Thu, 8 Sep 2016 09:32:03 +0300 Subject: [PATCH 3/6] Fix icon sizes once again --- style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/style.css b/style.css index d7b4d35..1553b9b 100644 --- a/style.css +++ b/style.css @@ -45,6 +45,11 @@ body { border-radius: 9px; } +/* Remove borders around controls in mobile view */ +.leaflet-touch .leaflet-bar { + border: none; +} + /* Background colors of distance markers */ .bg-blue { background: blue; } .bg-green { background: green; } From 5a72e0a7ce2accc53b051941fc3931179444e5e8 Mon Sep 17 00:00:00 2001 From: Ilya Ilyankou Date: Thu, 8 Sep 2016 10:16:41 +0300 Subject: [PATCH 4/6] Fix icon sizes - final touch --- style.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/style.css b/style.css index 1553b9b..e885288 100644 --- a/style.css +++ b/style.css @@ -33,6 +33,10 @@ body { color: #00f !important; } +.leaflet-touch .leaflet-compass { + border: 2px solid rgba(0,0,0,0.2); +} + /*line mileage distance markers and colors*/ .dist-marker { font-size: 14px; @@ -45,10 +49,11 @@ body { border-radius: 9px; } -/* Remove borders around controls in mobile view */ +/* Remove borders around controls in mobile view .leaflet-touch .leaflet-bar { - border: none; -} + box-shadow: none; + border: 2px solid green; +} */ /* Background colors of distance markers */ .bg-blue { background: blue; } From 845485d6edc04bdf7e4f151fcf97515d62dfa986 Mon Sep 17 00:00:00 2001 From: Ilya Ilyankou Date: Thu, 8 Sep 2016 11:15:21 +0300 Subject: [PATCH 5/6] Add link to Help, add colored lines to layer titles, add map title --- index.html | 10 +++++++--- src/L.Control.SlideMenu.css | 17 +++++++++-------- style.css | 32 +++++++++++++++++++------------- 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index d16dce8..1ce0b0c 100644 --- a/index.html +++ b/index.html @@ -74,6 +74,7 @@ contents += '

Distributed as-is with no warranty

'; contents += '

Stop your bike in a safe place before using

'; contents += '

Requires internet access to view maps and location

'; + contents += '

This is a link!

'; contents += '

Allow smartphone browser to show your location
- iPhone > Settings > Privacy > Location Services (On) > Safari (While Using)
- Android (to come)

'; contents += '

Click OK if browser asks permission to show your location

'; contents += 'Allow Current Location screen'; @@ -117,19 +118,19 @@ color: 'blue', distanceMarkers: { showAll: 11, offset: 1609, bgcolor: 'bg-blue'} // meters per mile; bgcolor defined in style.css }).addTo(map); - controlLayers.addOverlay(WeHa11, 'West Hartford 11 mile (blue)'); + controlLayers.addOverlay(WeHa11, 'West Hartford 11 mile '); var WeHa25 = new L.GPX("routes/WeHa2015-25.gpx", { color: 'green', distanceMarkers: { showAll: 11, offset: 1609, bgcolor: 'bg-green'} // meters per mile; bgcolor defined in style.css }); - controlLayers.addOverlay(WeHa25, 'West Hartford 25 mile (green)'); + controlLayers.addOverlay(WeHa25, 'West Hartford 25 mile '); var WeHa50 = new L.GPX("routes/WeHa2015-50.gpx", { color: '#ff3399', distanceMarkers: { showAll: 11, offset: 1609, bgcolor: 'bg-pink'} // meters per mile; bgcolor defined in style.css }); - controlLayers.addOverlay(WeHa50, 'West Hartford 50 mile (pink)'); + controlLayers.addOverlay(WeHa50, 'West Hartford 50 mile '); // Thanks @ilyankou for gatherBounds function; update layer names function gatherBounds() { @@ -157,8 +158,11 @@ map.on('layerremove', function() { gatherBounds(); + }); + $('

Putin

').insertBefore('div.leaflet-control-layers-base'); + diff --git a/src/L.Control.SlideMenu.css b/src/L.Control.SlideMenu.css index 1db7864..63759b1 100755 --- a/src/L.Control.SlideMenu.css +++ b/src/L.Control.SlideMenu.css @@ -1,27 +1,28 @@ -.leaflet-control-slidemenu{ +.leaflet-control-slidemenu { cursor: pointer; } -.leaflet-menu{ +.leaflet-menu { position: absolute; - background-color: rgba(255, 255, 255, 255); + background-color: rgba(255, 255, 255, 1); overflow: auto; cursor: default; z-index: 9999; + overflow-x: hidden; } -.leaflet-menu::-webkit-scrollbar{ +.leaflet-menu::-webkit-scrollbar { width: 7px; height: 7px; background: #f2f2f2; } -.leaflet-menu::-webkit-scrollbar-thumb{ +.leaflet-menu::-webkit-scrollbar-thumb { border-radius: 2px; background: #777; } -.leaflet-menu-close-button{ +.leaflet-menu-close-button { background-color: transparent; border: none; font-size: 2em; @@ -30,10 +31,10 @@ cursor: pointer; } -.leaflet-menu-close-button:hover{ +.leaflet-menu-close-button:hover { color: #4285F4; } -.leaflet-menu-contents{ +.leaflet-menu-contents { margin: 16px 10px 10px 10px; } diff --git a/style.css b/style.css index e885288..52cd746 100644 --- a/style.css +++ b/style.css @@ -17,8 +17,7 @@ body { line-height: 36px; }*/ -/* slide menu button with question circle - and locate button */ +/* Slide menu button with question circle and locate button */ .leaflet-control-slidemenu a, .leaflet-control-locate a, .leaflet-control-layers a { @@ -28,16 +27,17 @@ body { font-size: 2em; } -/* locate button */ +/* Locate button color */ .leaflet-control-locate a { color: #00f !important; } +/* Gray outline to compass icon for mobile devices */ .leaflet-touch .leaflet-compass { - border: 2px solid rgba(0,0,0,0.2); + border: 2px solid rgba(0, 0, 0, 0.1); } -/*line mileage distance markers and colors*/ +/* Line mileage distance markers and colors */ .dist-marker { font-size: 14px; line-height: 18px; @@ -49,15 +49,21 @@ body { border-radius: 9px; } -/* Remove borders around controls in mobile view -.leaflet-touch .leaflet-bar { - box-shadow: none; - border: 2px solid green; -} */ - /* Background colors of distance markers */ -.bg-blue { background: blue; } -.bg-green { background: green; } +.bg-blue { background: blue; color: blue} +.bg-green { background: green; color: green;} .bg-black { background: black; } .bg-yellow { background: #fc0; } .bg-pink { background: #f39; } + +/* Colored line in layer control title */ +.color-line { + display: inline-block; + vertical-align: middle; + height: 5px; + width: 50px; +} + +#mapTitle { + margin: 5px 0 5px 0; +} From a2e33566bc84ca0401cee1dee96ac5897666c7c2 Mon Sep 17 00:00:00 2001 From: Ilya Ilyankou Date: Thu, 8 Sep 2016 11:17:33 +0300 Subject: [PATCH 6/6] Fix distance markers --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 52cd746..4875e26 100644 --- a/style.css +++ b/style.css @@ -50,8 +50,8 @@ body { } /* Background colors of distance markers */ -.bg-blue { background: blue; color: blue} -.bg-green { background: green; color: green;} +.bg-blue { background: blue; } +.bg-green { background: green; } .bg-black { background: black; } .bg-yellow { background: #fc0; } .bg-pink { background: #f39; }