diff --git a/scss/_ntp.scss b/scss/_ntp.scss index 65f2189a8ba77993f6ecb3d93b50e896474409e2..abe38b9b55753f2c8aafd22a927f50d478c0bad2 100644 --- a/scss/_ntp.scss +++ b/scss/_ntp.scss @@ -1,3 +1,27 @@ .js-plotly-plot { margin-bottom: 10px; +} + +.js-plotly-plot .plotly .user-select-none { + width: 100% !important; + overflow: hidden; +} + +.ntpBanner{ + margin-top: 10px; + display: block; + width: 100%; + padding: 10px; + background-color: $back-color-3; +} + +.ntpContent{ + padding: 20px; + display: none; + background-color: $back-color-3; + transition: max-height 0.2s ease-out; +} + +.visible { + display: block; } \ No newline at end of file diff --git a/ts/jl-ntp-graph.ts b/ts/jl-ntp-graph.ts index b513514391ccef93ae31e8fe0deec448f14dc14d..cee33a2c5b4b831a9ba8c9aa3a1f0244b70e86f9 100644 --- a/ts/jl-ntp-graph.ts +++ b/ts/jl-ntp-graph.ts @@ -18,8 +18,11 @@ graphElements.forEach((elememt) => { let ip:string = <string> elememt.getAttribute("data-server-ip"); elememt.innerHTML = ` - <div id="${graphIndexCounter}-Delay"></div> - <div id="${graphIndexCounter}-Score"></div> + <span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span> + <span id="${graphIndexCounter}-Content" class="ntpContent"> + <div id="${graphIndexCounter}-Delay"></div> + <div id="${graphIndexCounter}-Score"></div> + </span> `; let currentIndex = graphIndexCounter; graphIndexCounter++; diff --git a/ts/ntpMenu.ts b/ts/ntpMenu.ts new file mode 100644 index 0000000000000000000000000000000000000000..81707bf8aae5f5771320fde3ce4ef547ee4e80ef --- /dev/null +++ b/ts/ntpMenu.ts @@ -0,0 +1,14 @@ +let ntpNav = document.querySelectorAll(".ntpBanner"); + +ntpNav.forEach((element) => { + (<HTMLElement>element).onclick = function (){ + let contentID = element.getAttribute("data-index") + "-Content"; + let contentElement = <HTMLElement> document.getElementById(contentID); + + if(contentElement.classList.contains("visible")){ + contentElement.classList.remove("visible"); + } else { + contentElement.classList.add("visible"); + } + } +}); \ No newline at end of file