diff --git a/css/style.css b/css/style.css index 1d085e4..0474dad 100644 --- a/css/style.css +++ b/css/style.css @@ -297,7 +297,7 @@ body > hr { camp-feature-short-header { display: grid; grid-template-rows: 1fr min-content; - grid-template-columns: 3em 1fr; + grid-template-columns: 3em 1fr max-content; gap: 0.5ex 0.5em; vertical-align: center; } @@ -309,13 +309,26 @@ camp-feature-short-header .feature-legend { } camp-feature-short-header h2 { + grid-column: 2 / 4; margin: 0; padding: 0; font-size: 1em; font-weight: bold; } +camp-feature-short-header .feature-generic-name { + grid-column: 2; + margin: 0; + padding: 0; + font-size: 0.6em; + opacity: 0.75; + white-space: nowrap; + overflow-x: hidden; + text-overflow: ellipsis; +} + camp-feature-short-header .feature-location { + grid-column: 3; margin: 0; padding: 0; font-size: 0.6em; diff --git a/js/components/feature-short-header.js b/js/components/feature-short-header.js index 55339fe..c15ffdc 100644 --- a/js/components/feature-short-header.js +++ b/js/components/feature-short-header.js @@ -5,6 +5,7 @@ const TEMPLATE = document.createElement("template") TEMPLATE.innerHTML = `

+ ` @@ -37,10 +38,18 @@ export class FeatureShortHeaderElement extends HTMLElement { this.querySelector(".feature-legend").feature = this.feature this.querySelector(".feature-legend").updateContent() - this.querySelector(".feature-name").textContent = - this.feature?.properties?.name || + let name = this.feature?.properties?.name || this.feature.mapSymbol.genericName || - this.feature.id + this.feature.id; + + this.querySelector(".feature-name").textContent = name; + + if(name != this.feature.mapSymbol.genericName){ + this.querySelector(".feature-generic-name").textContent = this.feature.mapSymbol.genericName + } else { + this.querySelector(".feature-generic-name").replaceChildren() + } + let featurePoint = this.feature.asPoint()