collapse NTP graphs on page call
This commit is contained in:
parent
5e425f177a
commit
b157e903ba
3 changed files with 43 additions and 2 deletions
|
@ -1,3 +1,27 @@
|
||||||
.js-plotly-plot {
|
.js-plotly-plot {
|
||||||
margin-bottom: 10px;
|
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;
|
||||||
|
}
|
|
@ -18,8 +18,11 @@ graphElements.forEach((elememt) => {
|
||||||
let ip:string = <string> elememt.getAttribute("data-server-ip");
|
let ip:string = <string> elememt.getAttribute("data-server-ip");
|
||||||
|
|
||||||
elememt.innerHTML = `
|
elememt.innerHTML = `
|
||||||
<div id="${graphIndexCounter}-Delay"></div>
|
<span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
|
||||||
<div id="${graphIndexCounter}-Score"></div>
|
<span id="${graphIndexCounter}-Content" class="ntpContent">
|
||||||
|
<div id="${graphIndexCounter}-Delay"></div>
|
||||||
|
<div id="${graphIndexCounter}-Score"></div>
|
||||||
|
</span>
|
||||||
`;
|
`;
|
||||||
let currentIndex = graphIndexCounter;
|
let currentIndex = graphIndexCounter;
|
||||||
graphIndexCounter++;
|
graphIndexCounter++;
|
||||||
|
|
14
ts/ntpMenu.ts
Normal file
14
ts/ntpMenu.ts
Normal file
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
Loading…
Add table
Reference in a new issue