diff --git a/display/overlays/nodeinfo.js b/display/overlays/nodeinfo.js index b1cf07213f894ed5e53feb8db5b7f71e758c623c..ddaec2e19b986ea14c64a267d45ad90e76c7bf40 100644 --- a/display/overlays/nodeinfo.js +++ b/display/overlays/nodeinfo.js @@ -80,7 +80,7 @@ class NodeInfoOverlay { innerText: "Default Text", }); - const videoDiv = Helpers.createDiv("detail-view-video-div", infoArea); + const videoDiv = Helpers.createDiv("detail-view-video-area", infoArea); const video = document.createElement("video"); video.id = "infoOverlayVideo"; @@ -88,6 +88,14 @@ class NodeInfoOverlay { video.className = "detail-view-video"; videoDiv.appendChild(video); + const linkArea = Helpers.createDiv("detail-view-link-area", infoArea, { + id: "infoAreaLinkArea", + }); + Helpers.createHTMLElement("h6", linkArea, { + innerText: "Weiterführende Links", + }); + Helpers.createHTMLElement("ul", linkArea, { id: "infoAreaLinkList" }); + Helpers.createDiv("detail-view-spacer", infoArea); } @@ -129,6 +137,24 @@ class NodeInfoOverlay { jQuery("#infoOverlayVideo").hide(); } + const linkList = jQuery("#infoAreaLinkList"); + const linkArea = jQuery("#infoAreaLinkArea"); + if ("infoLinks" in node) { + linkArea.show(); + linkList.empty(); + for (const link of node["infoLinks"]) { + const listEntry = Helpers.createHTMLElement("li", linkList[0]); + Helpers.createHTMLElement("a", listEntry, { + rel: "noopener noreferrer", + target: "_blank", + href: link, + innerText: link, + }); + } + } else { + linkArea.hide(); + } + this.bottomMenu.updateTabs(node); jQuery("#infoOverlay").slideDown("fast"); } diff --git a/kg-style.css b/kg-style.css index af637bf87cbd9d8aa1dc56854cd1308298864f69..adb2a67608192ceb544aab1c261bc39c0cb05e8b 100644 --- a/kg-style.css +++ b/kg-style.css @@ -106,6 +106,13 @@ /*padding-bottom: 130px;*/ } +.detail-view-link-area { + display: block; + margin-top: 25px; + padding-left: 25px; + padding-right: 25px; +} + .detail-view-headline { font-weight: bold; /*text-align: center;*/ @@ -117,8 +124,9 @@ padding-right: 5px; } -.detail-view-video-div { +.detail-view-video-area { width: 100%; + margin-top: 15px; padding: 10px; }