From 1e2d27715229efaaaf49a20b294fbfc2aff694a9 Mon Sep 17 00:00:00 2001
From: Jacek Kowalski <Jacek@jacekk.info>
Date: Thu, 27 Jun 2019 23:35:29 +0000
Subject: [PATCH] Use renderMode image for vehicles layer (performance improvement)
---
map.css | 123 ++++++++++++++++++++++++++++++++--------
1 files changed, 97 insertions(+), 26 deletions(-)
diff --git a/map.css b/map.css
index 56ca077..2f499d9 100644
--- a/map.css
+++ b/map.css
@@ -17,91 +17,137 @@
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: 350px;
right: -365px;
top: 0;
bottom: 0;
-
- transition: right .4s, 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 {
+ .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;
+}
+
+.pad-left-icon {
+ margin-left: 0.2rem;
+}
+.icon-zoom {
+ display: inline-block;
+ height: 1rem;
+ width: 1rem;
+ text-indent: 1rem;
+ overflow: hidden;
+ background-image: url(zoom.svg);
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTI4MCwyNzhhMTUzLDE1MyAwIDEsMC0yLDJsMTcwLDE3MG0tOTEtMTE3IDExMCwxMTAtMjYsMjYtMTEwLTExMCIvPjwvc3ZnPgo=);
+ background-size: contain;
+ background-repeat: no-repeat;
}
#title {
@@ -112,7 +158,7 @@
background-color: rgba(255,255,255,.6);
}
-#fail, #popup .error {
+#fail, .panel .error {
background: red;
color: white;
font-weight: bold;
@@ -125,6 +171,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