From d80109132d362199e6d9e370d5f54bd0d6554126 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Thu, 29 Jul 2021 22:40:29 +0000 Subject: [PATCH] [map] Allow zero-prefixed stop identifiers (fix for bus stops) --- map.css | 214 ++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 187 insertions(+), 27 deletions(-) diff --git a/map.css b/map.css index a6e04f6..c7ea862 100644 --- a/map.css +++ b/map.css @@ -5,7 +5,7 @@ } #map { - position: absolute; + position: fixed; top: 0; left: 0; right: 0; @@ -17,79 +17,239 @@ right: auto; } -#popup { +.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 { + opacity: .85; color: black; background: white; padding: 5px; border-left: 1px solid black; font-size: 14px; + overflow-y: auto; - position: absolute; - width: 300px; - right: -315px; + transition: right .4s, width .4s; + + position: fixed; + width: 350px; + right: -365px; top: 0; bottom: 0; - - transition: right .4s; - transition: width .4s; - - opacity: .8; } - -#popup.show { +.panel.expanded { right: 0; +} +.panel .hide { + display: none; + padding: 0px 1em; +} +.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) { - #popup { - width: 90%; + .panel { + width: 80%; right: -100%; } - - #popup.show { + .panel.expanded, .panel.enabled .hide { right: 0%; } + + .panel.enabled.expanded .hide { + right: 80%; + margin-right: 10px; + } } - -#popup .type { +.panel .type { padding-bottom: 0; color: #444; font-size: 80%; } -#popup p { +.panel p { margin: 0; padding: 5px; } -#popup .name { +.panel .name { font-weight: bold; + padding-bottom: 0; } -#popup .vehicleInfo { +.panel .name .icon { + margin: -5px 0.2rem 0; + text-indent: 2rem; + font-size: 1.4rem; + vertical-align: top; +} +.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; +} + +.post-nav { + display: flex; + flex-wrap: wrap; +} +.post-nav > * { + flex-basis: 0; + flex-grow: 1; +} + +.left { + text-align: left; +} +.center { + text-align: center; +} +.right { + text-align: right; +} + +.icon, .icon-loc, .icon-pin, .icon-zoom { + display: inline-block; + height: 1em; + width: 1em; + text-indent: 1.5em; + 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; } -a { +.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, .close:hover, .hide:hover { color: #337ab7; text-decoration: none; + cursor: pointer; } a:hover { text-decoration: underline; } + +.small { + font-size: 80%; +} -- Gitblit v1.9.1