diff --git a/datasets/aud1.json b/datasets/aud1.json index 0909f9a5cef98a2749b3ecba67480e78c07b44c2..21d1d7a70ce5c426bcab53c5caa6e3fa9dcf1366 100644 --- a/datasets/aud1.json +++ b/datasets/aud1.json @@ -25,8 +25,8 @@ { "id": "id6", "name": "Eulertouren", - "image": "eulertouren.png" - + "image": "eulertouren.png", + "description": "Ein Eulerkreis ist in der Graphentheorie ein Zyklus, der alle Kanten eines Graphen genau einmal enthält. Ein offener Eulerzug (auch Eulerpfad oder Eulerweg) ist gegeben, wenn Start- und Endknoten nicht gleich sein müssen, wenn also statt eines Zyklus lediglich eine Kantenfolge verlangt wird, welche jede Kante des Graphen genau einmal enthält. Ein bekanntes Beispiel ist das Haus vom Nikolaus." }, { "id": "id7", diff --git a/graph.js b/graph.js index 417ebf521b2be82845f8fe7092174811cc6d7ec9..3c89a728ff510375b228dda779cfb76d1591e045 100644 --- a/graph.js +++ b/graph.js @@ -122,7 +122,7 @@ function createInfoOverlay() { const close = document.createElement('div'); close.innerHTML = '<p>✖</p>'; close.id = 'infoOverlayCloseButton'; - close.className = 'close-button' + close.className = 'close-button'; overlayNode.appendChild(close); const topArea = document.createElement('div'); @@ -138,9 +138,17 @@ function createInfoOverlay() { const headline = document.createElement('h2'); headline.id = 'infoOverlayHeadline'; headline.innerText = 'Default Text'; - headline.className = 'detail-view-headline' - topArea.appendChild(headline) + headline.className = 'detail-view-headline'; + topArea.appendChild(headline); + const textArea = document.createElement('div'); + textArea.className = 'detail-view-text-area'; + overlayNode.appendChild(textArea); + + const description = document.createElement('p'); + description.id = 'infoOverlayDescription'; + description.innerText = 'Default Text'; + textArea.appendChild(description); jQuery('#infoOverlayCloseButton').click(function () { @@ -225,6 +233,12 @@ function updateInfoOverlay(node) { jQuery('#infoOverlayImage').attr('src', plugin_path + 'datasets/images/default.jpg'); } + if ('description' in node) { + jQuery('#infoOverlayDescription').text(node.description); + } else { + jQuery('#infoOverlayDescription').text('Default Text'); + } + jQuery('#infoOverlay').slideDown('fast'); } diff --git a/kg-style.css b/kg-style.css index 0f0584b7356a2281e8d8a037ac05ec411968a398..a5891b2207f4d6d75ce4387aa0c269d2bca08490 100644 --- a/kg-style.css +++ b/kg-style.css @@ -2,9 +2,6 @@ display: flex; } - - - .node-label { font-size: 14px; color: white; @@ -13,7 +10,7 @@ padding: 1px 4px; border-radius: 4px; background-color: rgba(0,0,0,0.7); - /*user-select: none;*/ + user-select: none; z-index: 1; } @@ -40,8 +37,8 @@ } .detail-view-image { - width: 100px; - height: 100px; + width: 125px; + height: 125px; top: 0; left: 0; overflow: hidden; @@ -58,6 +55,12 @@ text-align: center; } +.detail-view-text-area { + display: block; + padding-left: 25px; + padding-right: 25px; +} + .detail-view-headline { font-weight: bold; /*text-align: center;*/