From a919626a00289e19cc89d3e680502e742036da77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at>
Date: Thu, 1 Oct 2020 20:53:30 +0200
Subject: [PATCH] Improve style of popups and list entries

---
 src/CategoryOverpass.js |  6 ++++--
 style.css               | 30 +++++++++++++++++++++---------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/CategoryOverpass.js b/src/CategoryOverpass.js
index 5fdff720..b6b3291d 100644
--- a/src/CategoryOverpass.js
+++ b/src/CategoryOverpass.js
@@ -32,9 +32,11 @@ var defaultValues = {
   },
   layouts: {
     popup:
-      '<h1>{{ object.popupTitle|default(object.title) }}</h1>' +
+      '<div class="content">' +
+      '{% if object.popupDetails or object.details %}<div class="details">{{ object.popupDetails|default(object.details) }}</div>{% endif %}' +
       '{% if object.popupDescription or object.description %}<div class="description">{{ object.popupDescription|default(object.description) }}</div>{% endif %}' +
-      '{% if object.popupBody or object.body %}<div class="body">{{ object.popupBody|default(object.body) }}</div>{% endif %}',
+      '{% if object.popupTitle or object.title %}<div class="title">{{ object.popupTitle|default(object.title) }}</div>{% endif %}' +
+      '</div>',
     list:
       '<a href="{{ object.appUrl|default("#") }}">' +
       '<div class="marker">' +
diff --git a/style.css b/style.css
index 8a9de56e..a7487b4f 100644
--- a/style.css
+++ b/style.css
@@ -295,16 +295,23 @@ a:active {
   color: red;
 }
 
-.description,
 .leaflet-popup-content .description {
   display: block;
-  text-align: right;
   font-style: italic;
+  color: #7f7f7f;
+  font-size: 1.5em;
+  font-weight: normal;
 }
-.description:after,
-.leaflet-popup-content .description:after {
-  content: '';
-  clear: right;
+.leaflet-popup-content .title {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+.leaflet-popup-content .details {
+  float: right;
+  max-width: 50%;
+  text-align: right;
+  color: #7f7f7f;
+  word-wrap: break-word;
 }
 
 .body ul,
@@ -469,17 +476,22 @@ ul.overpass-layer-list > li > a > .content {
 ul.overpass-layer-list > li > a > .content > .description {
   display: block;
   text-align: left;
-  font-style: normal;
+  font-style: italic;
+  color: #3f3f3f;
+  font-weight: normal;
 }
 ul.overpass-layer-list > li > a > .content > .title {
   display: block;
-  font-style: italic;
+  font-style: normal;
+  font-weight: normal;
 }
 ul.overpass-layer-list > li > a > .content > .details {
   float: right;
   display: block;
   font-style: italic;
-  color: #7f7f7f;
+  color: #3f3f3f;
+  max-width: 50%;
+  text-align: right;
 }
 
 .leaflet-popup-content h1 .title {