From b157e903bab3ef76454c6a79de1885b03ae05fef Mon Sep 17 00:00:00 2001
From: jonasled <git@jonasled.de>
Date: Fri, 5 Mar 2021 19:07:35 +0100
Subject: [PATCH] collapse NTP graphs on page call
---
scss/_ntp.scss | 24 ++++++++++++++++++++++++
ts/jl-ntp-graph.ts | 7 +++++--
ts/ntpMenu.ts | 14 ++++++++++++++
3 files changed, 43 insertions(+), 2 deletions(-)
create mode 100644 ts/ntpMenu.ts
diff --git a/scss/_ntp.scss b/scss/_ntp.scss
index 65f2189..abe38b9 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 b513514..cee33a2 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 0000000..81707bf
--- /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
--
GitLab