diff --git a/graph.js b/graph.js index 529d80995fcb1a7f70a3daf738ef249d39fd593a..65439fc86c0aa703c62c9ef84b9566f11eae9f31 100644 --- a/graph.js +++ b/graph.js @@ -193,7 +193,7 @@ function createInfoOverlay() { const linkType = linkClasses[i]; const tabcontent = document.createElement('div'); - tabcontent.className = 'tabcontent'; + tabcontent.className = "tabcontent"; tabcontent.id = linkType + "_id_content"; tabcontent.style = "background-color: " + edgeColors[linkClasses[i]]; link_container.appendChild(tabcontent); @@ -457,6 +457,6 @@ function openTab (event, tab) { } // Show the current tab, and add an "active" class to the button that opened the tab - document.getElementById(tab.id + "_content").style.display = "block"; + document.getElementById(tab.id + "_content").style.display = "flex"; event.currentTarget.className += " active"; } \ No newline at end of file diff --git a/kg-style.css b/kg-style.css index ac61174345f2fa1e4c1d086435941f1462d14d75..816259b530cc6dd59fc71a06b42bceac95fec2cb 100644 --- a/kg-style.css +++ b/kg-style.css @@ -105,6 +105,7 @@ .tab { overflow: hidden; + width: 200px; background-color: #f1f1f1; } .tab button { @@ -113,7 +114,8 @@ border: none; outline: none; cursor: pointer; - padding: 10px 16px; + width: 50px; + padding: 10px 12px; transition: 0.3s; } .tab button:hover { @@ -124,24 +126,27 @@ } .tabcontent { display: none; - padding: 6px 12px; + padding: 6px 0px; border-top: none; overflow-x: scroll; + height: 100px; + width: 200px; } .bottom container { position: absolute; bottom: 0; left: 0; - padding-left: 0px; + width: 200px; + padding: 0px; + margin: 0px; } .link img { position: relative; text-align: center; - width: 70px; - height: 70px; - margin: 10px; - display: inline-block; + width: 60px; + height: 60px; + margin-left: 5px; pointer-events: all; cursor: pointer; border-radius: 50%;