From d87cf076349d354b829bfe896ef11247b1182dd9 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sat, 04 May 2019 12:46:08 +0000 Subject: [PATCH] Use number of matched query chars when ordering stop search results --- map.css | 169 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 158 insertions(+), 11 deletions(-) diff --git a/map.css b/map.css index e497aec..ad10ee5 100644 --- a/map.css +++ b/map.css @@ -1,24 +1,138 @@ html, body, #map { - width: 100%; - height: 100%; margin: 0; font-family: sans-serif; + overflow: hidden; } -#popup { +#map { + position: absolute; + 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: absolute; + 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; } #title { @@ -28,22 +142,55 @@ 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; +} +#track { + top: 6em; + left: 0.5em; +} +.ol-touch #track { + top: 7em; +} + +.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; +} +.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