From 4d882e6d16036c99055cfb8df0bf8c25bcbb8d8c Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sun, 14 May 2017 22:21:25 +0000 Subject: [PATCH] Change alert view and add top menu --- map.css | 137 +++++++++++++++++++++++++++++++++++---------- 1 files changed, 107 insertions(+), 30 deletions(-) diff --git a/map.css b/map.css index a6e04f6..f2f9a49 100644 --- a/map.css +++ b/map.css @@ -1,70 +1,145 @@ -html, body, #map { +html, body, #map, #header { margin: 0; - font-family: sans-serif; + padding: 0; + font: 14px sans-serif; overflow: hidden; +} + +#header { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 2em; + background: #f8f8f8; + border-bottom: 1px solid #999; +} +#header ul { + display: table; + padding: 0; + margin: 0; + width: 100%; +} +#header ul li { + display: table-cell; + list-style: none; + white-space: nowrap; + vertical-align: top; +} +#header ul li:last-child { + width: 100%; + white-space: inherit; + text-align: right; +} +#header ul li > * { + line-height: 1em; + display: inline-block; + padding: 0.5em; +} +#alert { + margin-left: 5px; + + transition: background-color .4s; +} +.error { + background-color: red; + color: white; + font-weight: bold; } #map { position: absolute; - top: 0; + top: 29px; left: 0; right: 0; bottom: 0; } - #map .ol-attribution { left: 0; right: auto; + text-align: left; } -#popup { +#panel { color: black; background: white; padding: 5px; - border-left: 1px solid black; + border-left: 1px solid #999; font-size: 14px; position: absolute; - width: 300px; - right: -315px; - top: 0; + width: 350px; + right: -365px; + top: 29px; bottom: 0; - transition: right .4s; - transition: width .4s; + transition: right .4s, width .4s; - opacity: .8; + opacity: .85; + + overflow-y: auto; } -#popup.show { +#panel.show { right: 0; } @media (max-width: 600px) { - #popup { - width: 90%; + #panel { + width: 80%; right: -100%; } - #popup.show { + #panel.show { right: 0%; } } -#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; } -#popup .vehicleInfo { +#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 { @@ -74,22 +149,24 @@ font-weight: bold; background-color: rgba(255,255,255,.6); } -#fail { - top: -10em; - right: 0.5em; - background: red; - color: white; - font-weight: bold; - padding: 5px; -} -.ol-zoom { - top: 2.2em; + +.close { + float: right; + cursor: pointer; + font-size: 20px; + margin: 0; + padding: 3px; } a { color: #337ab7; text-decoration: none; + cursor: pointer; } a:hover { text-decoration: underline; } + +.small { + font-size: 80%; +} -- Gitblit v1.9.1