From 88a24c17fd2af2eb44aca15cc3b4072e0d0154aa Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Wed, 13 Mar 2019 00:01:33 +0000 Subject: [PATCH] Unify stops layers and sources to simplify code --- map.css | 115 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 85 insertions(+), 30 deletions(-) diff --git a/map.css b/map.css index d68458b..ad10ee5 100644 --- a/map.css +++ b/map.css @@ -17,91 +17,121 @@ right: auto; } -#popup { +.panel { + opacity: .85; color: black; background: white; padding: 5px; border-left: 1px solid black; font-size: 14px; + overflow-y: auto; + + transition: right .4s, width .4s; position: absolute; - width: 300px; - right: -315px; + width: 350px; + right: -365px; top: 0; bottom: 0; - - transition: right .4s; - transition: width .4s; - - opacity: .85; - - overflow-y: auto; } - -#popup.show { +.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) { - #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 .close { +.close, .hide { float: right; cursor: pointer; font-size: 20px; + padding: 0px 10px; } -#popup .type { +#fail .close { + font-size: inherit; + height: 1em; +} +.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; } -#popup .vehicleInfo { +.panel .vehicleInfo { font-size: 21px; margin: -4px 0 -5px; } -#popup table { +.panel table { margin-top: 3px; border-top: 1px solid gray; width: 100%; border-collapse: collapse; } -#popup table th { +.panel table th { text-align: left; border-bottom: 1px solid #999; padding-top: 5px; } -#popup table td { +.panel table td { vertical-align: top; } -#popup .active { +.panel .active { background: #f5f5f5; color: gray; } -#popup .success { +.panel .success { background: #dff0d8; } -#popup .warning { +.panel .warning { background: #fcf8e3; } -#popup .danger { +.panel .danger { background: #f2dede; } -#popup table .vehicleInfo { +.panel table .vehicleInfo { float: right; } @@ -113,7 +143,7 @@ background-color: rgba(255,255,255,.6); } -#fail, #popup .error { +#fail, .panel .error { background: red; color: white; font-weight: bold; @@ -126,6 +156,31 @@ .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; -- Gitblit v1.9.1