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

38
static/css/default_light/main.css
View file

@ -258,42 +258,34 @@ label {
border-radius: 8px;
}
#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: #fff;
border: 1px solid #2979b8;
padding: 16px;
border-radius: 6px;
}
#time-selector.hidden {
display: none;
}
#time-selector .vertical-line {
background-color: #2979b8;
}
#time-selector .header {
padding-top: 12px;
font-weight: bold;
font-size: 0.85em;
}
#time-selector button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-selector #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;
}
#time-selector #time-filter .header-1 {
font-weight: bold;
justify-self: start;
}
#time-selector #time-filter .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-selector #time-filter .preset {
#time-selector div {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}

38
static/css/gruvbox/main.css
View file

@ -258,42 +258,34 @@ label {
border-radius: 8px;
}
#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: #282828;
border: 1px solid #333;
padding: 16px;
border-radius: 6px;
}
#time-selector.hidden {
display: none;
}
#time-selector .vertical-line {
background-color: #333;
}
#time-selector .header {
padding-top: 12px;
font-weight: bold;
font-size: 0.85em;
}
#time-selector button {
width: 100px;
margin-top: 12px;
justify-self: end;
}
#time-selector #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;
}
#time-selector #time-filter .header-1 {
font-weight: bold;
justify-self: start;
}
#time-selector #time-filter .header-2 {
font-weight: bold;
justify-self: start;
grid-column: 2 / -1;
}
#time-selector #time-filter .preset {
#time-selector div {
white-space: nowrap;
justify-self: start;
padding-right: 32px;
}