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

Refactored table CSS, bettered layout in problems

Browse source
This commit is contained in:
Magnus Åhall 2024-07-05 10:47:50 +02:00
parent 1215b13d47
commit 2c5b434fd2
15 changed files with 379 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/less/default_light.less
View file

@ -62,7 +62,7 @@ dialog {
border-radius: 8px;
}
dialog, #datapoints, #problems-list, #acknowledged-list, #values, #services, #notifications {
dialog, #datapoints, #problems-list, #acknowledged-list, #values, #services, #notifications, #group, .table {
background-color: #fff !important;
border: 1px solid #ddd;
box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);

1
static/less/main.less
View file

@ -1,4 +1,5 @@
@import "theme-@{THEME}.less";
@import "table.less";
html {
box-sizing: border-box;

59
static/less/problems.less
View file

@ -1,69 +1,48 @@
@import "theme-@{THEME}.less";
#problems-list, #acknowledged-list {
display: grid;
grid-template-columns: repeat(6, min-content);
grid-gap: 4px 16px;
margin-top: 32px;
margin-bottom: 32px;
background-color: @bg3;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
div {
white-space: nowrap;
line-height: 24px;
}
.header {
font-weight: @bold;
color: @text3;
}
grid-template-columns: repeat(7, min-content);
.trigger {
color: @color1;
font-weight: @bold;
}
.acknowledge {
img {
height: 16px;
}
img.acknowledge {
height: 16px;
}
.info {
margin-right: 8px;
}
.icons {
display: grid;
grid-template-columns: min-content min-content;
align-items: center;
}
}
#acknowledged-list.hidden{
display: none;
}
#areas {
#area-grouped {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 16px;
align-items: flex-start;
.area {
grid-template-columns: repeat(5, min-content);
.section {
display: grid;
grid-template-columns: repeat(4, min-content);
grid-gap: 8px 12px;
.name {
color: @text2;
grid-column: ~"1 / -1";
font-weight: bold !important;
line-height: 24px;
}
div {
white-space: nowrap;
}
padding: 4px 10px;
border-radius: 5px;
background: @bg3;
color: #fff;
width: min-content;
margin-bottom: 8px;
}
}
}

31
static/less/table.less Normal file
View file

@ -0,0 +1,31 @@
@import "theme-@{THEME}.less";
.table {
display: grid;
grid-gap: 6px 16px;
align-items: center;
.row {
grid-column: ~"1 / -1";
}
margin-top: 32px;
margin-bottom: 32px;
background-color: @bg3;
padding: 16px 24px;
width: min-content;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
& > div {
white-space: nowrap;
line-height: 24px;
}
.header {
font-size: 0.85em;
font-weight: bold;
color: @text3;
line-height: unset !important;
}
}