CategoryOverpass: re-style results with description/title

src/CategoryOverpass.js

@@ -17,7 +17,7 @@ const showMore = require('./showMore')
 
 var defaultValues = {
   feature: {
-    title: "{{ localizedTag(tags, 'name') |default(localizedTag(tags, 'operator')) | default(localizedTag(tags, 'ref')) | default(trans('unnamed')) }}",
+    title: "{{ localizedTag(tags, 'name') |default(localizedTag(tags, 'operator')) | default(localizedTag(tags, 'ref')) }}",
     markerSign: '',
     'style:selected': {
       color: '#3f3f3f',
@@ -36,6 +36,7 @@ var defaultValues = {
       '{% 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 %}',
     list:
+      '<a href="{{ object.appUrl|default("#") }}">' +
       '<div class="marker">' +
       '{% if object.listMarkerSymbol or object.markerSymbol %}' +
       '<div class="symbol">{{ object.listMarkerSymbol|default(object.markerSymbol) }}</div>' +
@@ -47,9 +48,10 @@ var defaultValues = {
       '{% endif %}' +
       '</div>' +
       '<div class="content">' +
-      '<a class="title" href="{{ object.appUrl|default("#") }}">{{ object.listTitle|default(object.title) }}</a>' +
       '{% if object.listDescription or object.description %}<div class="description">{{ object.listDescription|default(object.description) }}</div>{% endif %}' +
-      '</div>'
+      '{% if object.listTitle or object.title %}<div class="title">{{ object.listTitle|default(object.title) }}</div>{% endif %}' +
+      '</div>' +
+      '</a>'
   },
   queryOptions: {
   }

style.css

@@ -416,3 +416,62 @@ a:active {
   clear: both;
   display: table;
 }
+
+ul.overpass-layer-list {
+  padding-left: 0;
+}
+ul.overpass-layer-list > li {
+  border: 1px solid #dfdfdf;
+  background: #dfdfdf;
+  border-radius: 5px;
+  border: 1px solid #afafaf;
+  padding: 2px;
+  margin-bottom: 2px;
+  display: flex;
+  flex-direction: row;
+}
+ul.overpass-layer-list > li:hover,
+ul.overpass-layer-list > li.selected {
+  background: #cfcfcf !important;
+}
+ul.overpass-layer-list > li > a > .marker {
+  position: absolute;
+  margin-left: -35px;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  display: block;
+  color: black;
+  text-decoration: none;
+  margin-top: 3px;
+  flex-grow: 0;
+}
+ul.overpass-layer-list > li > a > .marker > .symbol {
+}
+ul.overpass-layer-list > li > a > .marker > .sign {
+  text-align: center;
+  position: absolute;
+  top: 3px;
+  font-size: 15px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  display: inline-block;
+}
+ul.overpass-layer-list > li > a > .content {
+  text-decoration: none;
+  display: block;
+}
+ul.overpass-layer-list > li > a > .content > .description {
+  display: block;
+  text-align: left;
+  font-style: normal;
+}
+ul.overpass-layer-list > li > a > .content > .title {
+  display: block;
+  font-style: italic;
+}
+
+.leaflet-popup-content h1 .title {
+  font-style: italic;
+}