From 428023ba533cdcf2f3ec333142b5c173a27748bf Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sat, 06 Jul 2019 17:07:37 +0000 Subject: [PATCH] Use own tile server instead of OSM-provided one --- map.css | 210 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 197 insertions(+), 13 deletions(-) diff --git a/map.css b/map.css index e497aec..caf2ea8 100644 --- a/map.css +++ b/map.css @@ -1,49 +1,233 @@ html, body, #map { - width: 100%; - height: 100%; margin: 0; font-family: sans-serif; + overflow: hidden; } -#popup { +#map { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +#map .ol-attribution { + left: 0; + right: auto; +} + +.panel { + opacity: .85; color: black; background: white; padding: 5px; - border: 1px solid black; - border-radius: 10px; - font-size: 12px; + border-left: 1px solid black; + font-size: 14px; + overflow-y: auto; + + transition: right .4s, width .4s; + + position: fixed; + width: 350px; + right: -365px; + top: 0; + bottom: 0; } -#popup p { +.panel.expanded { + right: 0; +} + +.panel .hide { + display: none; +} +.panel.enabled .hide { + display: block; + + position: fixed; + bottom: 20%; + right: 0; + + opacity: .85; + border: 1px solid black; + border-right: 0; + border-radius: 5px 0 0 5px; + background: white; + margin-right: 0px; + padding: 1em 0.2em; + padding-bottom: 1.2em; + + transition: right .4s, margin-right .4s; +} +.panel.expanded .hide { + right: 360px; +} + +@media (max-width: 600px) { + .panel { + width: 80%; + right: -100%; + } + .panel.expanded, .panel.enabled .hide { + right: 0%; + } + + .panel.enabled.expanded .hide { + right: 80%; + 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; + font-size: 80%; +} +.panel p { margin: 0; padding: 5px; } -#popup .bold { +.panel .name { font-weight: bold; +} +.panel .vehicleInfo { + font-size: 21px; + margin: -4px 0 -5px; +} +.panel table { + margin-top: 3px; + border-top: 1px solid gray; + width: 100%; + border-collapse: collapse; +} +.panel table th { + text-align: left; + border-bottom: 1px solid #999; + padding-top: 5px; +} +.panel table td { + vertical-align: top; +} +.panel .active { + background: #f5f5f5; + color: gray; +} +.panel .success { + background: #dff0d8; +} +.panel .warning { + background: #fcf8e3; +} +.panel .danger { + background: #f2dede; +} +.panel table .vehicleInfo { + float: right; +} + +.addon-icon { + margin-left: 0.2rem; +} +.normal-icon, .addon-icon { + font-size: 1rem; +} +.icon, .icon-loc, .icon-pin, .icon-zoom { + display: inline-block; + height: 1em; + width: 1em; + text-indent: 1rem; + overflow: hidden; + 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); } -#fail { - top: -10em; - right: 0.5em; + +#fail, .panel .error { background: red; color: white; font-weight: bold; padding: 5px; } +#fail { + top: -10em; + right: 0.5em; +} .ol-zoom { - top: 2.2em; + top: 2.3em; +} +#menu { + top: 6em; + left: 0.5em; +} +.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.clicked { + background-color: black; +} +.ol-control button.clicked:hover, .ol-control button.clicked:active { + background-color: rgba(0,0,0,.5); +} +.ol-control button.hidden { + display: none; } a { color: #337ab7; text-decoration: none; + cursor: pointer; } a:hover { text-decoration: underline; } + +.small { + font-size: 80%; +} -- Gitblit v1.9.1