magnus/smon
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 6 Packages Wiki Activity

Redesign of time filter UI

Browse source
This commit is contained in:
Magnus Åhall 2024-07-05 12:04:56 +02:00
parent 2c5b434fd2
commit 3adf85a0f6
8 changed files with 293 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

49
static/less/main.less
View file

@ -291,51 +291,42 @@ label {
}
#time-selector {
position: absolute;
top: 16px;
right: 16px;
display: grid;
grid-template-columns: min-content min-content;
grid-gap: 6px 16px;
grid-template-columns: 8px repeat(2,min-content) 8px 1px 8px repeat(3,min-content) 8px repeat(3,min-content) 8px 1px 8px repeat(2,min-content) 8px;
grid-gap: 6px 8px;
align-items: center;
width: min-content;
background-color: @bg1;
border: 1px solid @bg3;
padding: 16px;
border-radius: 6px;
&.hidden {
display: none;
}
.vertical-line {
background-color: @bg3;
}
.header {
padding-top: 12px;
font-weight: bold;
font-size: 0.85em;
}
button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-filter {
display: grid;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 16px;
margin-top: 16px;
align-items: center;
justify-items: center;
.header-1 {
font-weight: bold;
justify-self: start;
}
.header-2 {
font-weight: bold;
justify-self: start;
grid-column: ~"2 / -1";
}
.preset {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}
div {
white-space: nowrap;
}
}