(feature) Update UI & Resource Availability

This commit is contained in:
Elijah Dunemask 2023-03-15 15:20:08 +00:00
parent 11d8229eb5
commit 929193d272
44 changed files with 4747 additions and 27 deletions

20
public/css/overview.css Normal file
View file

@ -0,0 +1,20 @@
.overview-toolbar {
background-color: rgba(255, 255, 255, 0.5);
height: 230px;
display: flex;
justify-content: center;
}
.overview-visual-display {
display: flex;
background-color: rgba(223, 223, 223, 0.5);
border-radius: 50%;
}
.overview-visual-label {
text-align: center;
}
.overview-visual-wrapper {
margin: 1rem;
}

9
public/css/rcon.css Normal file
View file

@ -0,0 +1,9 @@
.rconLogsWrapper {
overflow-y: scroll;
max-height: 20rem;
word-wrap: break-word;
margin-bottom: 10px;
}
.rconActions {
display: inline-flex;
}

View file

@ -0,0 +1,82 @@
.servers {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.server-card {
width: 400px;
min-height: 228px;
min-width: 250px;
max-width: 400px;
margin: 15px;
background-image: url("/images/server-backdrop.png");
background-size: cover;
display: flex;
flex-wrap: wrap;
}
.server-card-header {
padding: 0px;
display: inline-flex;
max-height: 32px;
height: 100%;
font-weight: bold;
text-transform: capitalize;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.1)
);
width: 100%;
}
.server-card-title {
width: 100%;
height: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.server-card-status-indicator {
margin-left: auto;
margin-right: auto;
}
.server-card-actions-wrapper {
margin-top: auto;
justify-content: end;
width: 100%;
background-color: rgba(255, 255, 255, 0.9);
}
.server-card-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 0px;
}
.server-card-action {
position: relative;
height: 20%;
}
.server-card-element {
background-color: rgba(255, 255, 255, 0.5);
}
.server-card-metrics {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.server-card-metrics-info {
display: inline-flex;
width: 100%;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}