Nicer looking value selector

This commit is contained in:
Magnus Åhall 2024-06-27 17:32:47 +02:00
parent 50664ca965
commit 0eb945f3e0
8 changed files with 125 additions and 11 deletions

View file

@ -41,8 +41,15 @@
grid-template-columns: repeat(2, min-content);
gap: 16px;
white-space: nowrap;
background-color: #2979b8;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 32px;
}
#values .header {
color: #000;
font-weight: bold;
}
.widgets {
@ -70,10 +77,30 @@
grid-template-columns: min-content min-content;
grid-gap: 8px;
}
.value-selector {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 4px 16px;
margin-top: 16px;
}
.value-selector button {
width: 100px;
align-self: end;
justify-self: end;
}
.graph {
width: 99%;
border: 1px solid #aaa;
margin-top: 16px;
}
.graph #graph-values {
height: 600px;
height: calc(100vh - 308px);
}
.time-offset {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: 6px 12px;
align-items: center;
justify-items: center;
margin-top: 8px;
}

View file

@ -42,7 +42,8 @@ button:focus {
}
#datapoints,
#problems-list,
#acknowledged-list {
#acknowledged-list,
#values {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);

View file

@ -41,8 +41,15 @@
grid-template-columns: repeat(2, min-content);
gap: 16px;
white-space: nowrap;
background-color: #333;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
margin-top: 32px;
}
#values .header {
color: #f7edd7;
font-weight: bold;
}
.widgets {
@ -70,10 +77,30 @@
grid-template-columns: min-content min-content;
grid-gap: 8px;
}
.value-selector {
display: grid;
grid-template-columns: repeat(2, min-content);
grid-gap: 4px 16px;
margin-top: 16px;
}
.value-selector button {
width: 100px;
align-self: end;
justify-self: end;
}
.graph {
width: 99%;
border: 1px solid #aaa;
margin-top: 16px;
}
.graph #graph-values {
height: 600px;
height: calc(100vh - 308px);
}
.time-offset {
display: grid;
grid-template-columns: repeat(3, min-content);
gap: 6px 12px;
align-items: center;
justify-items: center;
margin-top: 8px;
}

View file

@ -42,7 +42,8 @@ button:focus {
}
#datapoints,
#problems-list,
#acknowledged-list {
#acknowledged-list,
#values {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.25);