From 08514a8ed6a4e7f543078a19271cb0546532e35d Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Mon, 02 Nov 2020 00:15:43 +0000 Subject: [PATCH] [map] New API approach --- map.css | 97 ++++++++++++++++++++++++++++++------------------ 1 files changed, 61 insertions(+), 36 deletions(-) diff --git a/map.css b/map.css index 2f499d9..aa9b4de 100644 --- a/map.css +++ b/map.css @@ -5,7 +5,7 @@ } #map { - position: absolute; + position: fixed; top: 0; left: 0; right: 0; @@ -15,6 +15,19 @@ #map .ol-attribution { left: 0; right: auto; +} + +.close, .hide { + float: right; + cursor: pointer; + font-size: 1.5em; + padding-left: 1em; + color: black; +} +#fail .close { + font-size: inherit; + height: 1em; + color: black; } .panel { @@ -28,7 +41,7 @@ transition: right .4s, width .4s; - position: absolute; + position: fixed; width: 350px; right: -365px; top: 0; @@ -37,9 +50,9 @@ .panel.expanded { right: 0; } - .panel .hide { display: none; + padding: 0px 1em; } .panel.enabled .hide { display: block; @@ -77,17 +90,6 @@ margin-right: 10px; } } - -.close, .hide { - float: right; - cursor: pointer; - font-size: 20px; - padding: 0px 10px; -} -#fail .close { - font-size: inherit; - height: 1em; -} .panel .type { padding-bottom: 0; color: #444; @@ -99,6 +101,13 @@ } .panel .name { font-weight: bold; + padding-bottom: 0; +} +.panel .name .icon { + margin: -5px 0.2rem 0; + text-indent: 2rem; + font-size: 1.4rem; + vertical-align: top; } .panel .vehicleInfo { font-size: 21px; @@ -135,25 +144,38 @@ float: right; } -.pad-left-icon { - margin-left: 0.2rem; -} -.icon-zoom { +.icon, .icon-loc, .icon-pin, .icon-zoom { display: inline-block; - height: 1rem; - width: 1rem; - text-indent: 1rem; + height: 1em; + width: 1em; + text-indent: 1.5em; overflow: hidden; - background-image: url(zoom.svg); - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTI4MCwyNzhhMTUzLDE1MyAwIDEsMC0yLDJsMTcwLDE3MG0tOTEtMTE3IDExMCwxMTAtMjYsMjYtMTEwLTExMCIvPjwvc3ZnPgo=); background-size: contain; background-repeat: no-repeat; +} +.reverse { + filter: invert(100%); +} +.icon-loc { + background-image: url(icons/loc.svg); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHN0eWxlPip7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGw6bm9uZX08L3N0eWxlPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjI1Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIxMCIgc3R5bGU9ImZpbGw6YmxhY2s7Ij48L2NpcmNsZT48bGluZSB4MT0iNDAiIHkxPSIxNSIgeDI9IjQwIiB5Mj0iMCI+PC9saW5lPjxsaW5lIHgxPSI2NSIgeTE9IjQwIiB4Mj0iODAiIHkyPSI0MCI+PC9saW5lPjxsaW5lIHgxPSI0MCIgeTE9IjY1IiB4Mj0iNDAiIHkyPSI4MCI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjQwIiB4Mj0iMCIgeTI9IjQwIj48L2xpbmU+PC9zdmc+); +} +.icon-pin { + background-image: url(icons/pin.svg); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZD0iTTMyLDY0TDE0LjE4NTUsMjkuMDkwOUEyMCwyMCAwIDEgMSA0OS44MTQ1LDI5LjA5MDlaTTQyLDIwQTEwLDEwIDAgMCAwIDIyLDIwQTEwLDEwIDAgMCAwIDQyLDIwIi8+PC9zdmc+); +} +.icon-zoom { + background-image: url(icons/zoom.svg); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTI4MCwyNzhhMTUzLDE1MyAwIDEsMC0yLDJsMTcwLDE3MG0tOTEtMTE3IDExMCwxMTAtMjYsMjYtMTEwLTExMCIvPjwvc3ZnPgo=); } #title { top: .5em; left: .5em; - padding: 2px .5em; + padding: 0 .5em; + font-size: 1.14em; + line-height: 1.4em; + height: 1.375em; font-weight: bold; background-color: rgba(255,255,255,.6); } @@ -169,24 +191,27 @@ right: 0.5em; } .ol-zoom { - top: 2.2em; + top: 2.3em; } -#track { +#menu { top: 6em; left: 0.5em; } -.ol-touch #track { +.ol-touch #menu { top: 7em; } +#menu button { + border-radius: 0; +} +#menu button:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +#menu button:last-child { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} -.ol-control button svg * { - stroke: white; - stroke-width: 5%; - fill: none; -} -.ol-control button svg .fill { - fill: white; -} .ol-control button.clicked { background-color: black; } @@ -197,7 +222,7 @@ display: none; } -a { +a, .close:hover, .hide:hover { color: #337ab7; text-decoration: none; cursor: pointer; -- Gitblit v1.9.1