mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
refactor(templates): Bootstrap's components instead of the panel's own CSS for capacity, steps and disclosures
The fork's own rules in webvirtcloud.css redid what Bootstrap 5.3 has: - the capacity bars (.cap-*) are Bootstrap progress bars: the memory a .progress-stacked of running VMs' memory and shut-off VMs' (at half opacity), each segment a progressbar with its amount as its value text; the pool bars a thin .progress. The line where the host's memory ends goes: the share above the bar says it, red when over; - the status dot (.compute-dot) is a rounded-circle, the big figures (.compute-ratio) fs-4, the Computes table's cell padding py-3; - the steps of creating a VM (.create-steps) are a breadcrumb with "›" as its divider; - the XML and Advanced disclosures (.disclosure with a turning chevron) are Bootstrap accordions; - the chosen volumes and networks (.row-list) are list-unstyled, their names text-break; - a chart's container is position-relative by utility; its height stays. Dead rules go too: .netIN, .netOUT, .diskRD, .diskWR, .input-xs and .bottom-bar-margin had no users.
This commit is contained in:
parent
2f5e3ccf62
commit
c1e30aeb7f
11 changed files with 75 additions and 180 deletions
|
|
@ -33,18 +33,6 @@ body {
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
/* a disclosure's chevron points up while its section is open */
|
||||
.disclosure[aria-expanded="true"] .bi-chevron-down {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* the steps of creating a VM: the separator is drawn, not a list item */
|
||||
.create-steps li + li::before {
|
||||
content: "›";
|
||||
margin-right: 0.5rem;
|
||||
color: var(--bs-secondary-color);
|
||||
}
|
||||
|
||||
.xmlheight {
|
||||
height: 364px;
|
||||
}
|
||||
|
|
@ -137,43 +125,11 @@ p {
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* a live chart (static/js/charts.js) fills the width of its card */
|
||||
/* a live chart (static/js/charts.js) fills the width of its card at this height */
|
||||
.chart {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.netIN {
|
||||
border-color: rgb(83, 191, 189);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.netOUT {
|
||||
border-color: rgb(151, 187, 205);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.diskRD {
|
||||
border-color: rgb(190, 195, 205);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.diskWR {
|
||||
border-color: rgb(249, 134, 33);
|
||||
margin: 0.5em;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
.keyselect {
|
||||
display: inline;
|
||||
min-width: 250px;
|
||||
|
|
@ -197,10 +153,6 @@ p {
|
|||
background-color:#000099;
|
||||
}
|
||||
|
||||
.bottom-bar-margin {
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
/* make dropdowns show on hover */
|
||||
@media only screen and (min-width: 768px) {
|
||||
.dropdown:hover .dropdown-menu {
|
||||
|
|
@ -215,72 +167,3 @@ p {
|
|||
a {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.input-xs {
|
||||
height: 22px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* the Computes list: what each host has given its VMs */
|
||||
.compute-list td {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.compute-dot {
|
||||
display: inline-block;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.compute-ratio {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.compute-memory {
|
||||
min-width: 11rem;
|
||||
}
|
||||
|
||||
.compute-storage {
|
||||
min-width: 9rem;
|
||||
}
|
||||
|
||||
/* a bar of given capacity: running VMs solid, shut-off VMs faint, and a
|
||||
mark where the host's own capacity ends */
|
||||
.cap-bar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 0.6rem;
|
||||
border-radius: 0.3rem;
|
||||
background: var(--bs-secondary-bg);
|
||||
}
|
||||
|
||||
.cap-bar.cap-thin {
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
.cap-running {
|
||||
background: var(--bs-primary);
|
||||
border-radius: 0.3rem 0 0 0.3rem;
|
||||
}
|
||||
|
||||
.cap-stopped {
|
||||
background: var(--bs-primary);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.cap-host {
|
||||
position: absolute;
|
||||
top: -0.2rem;
|
||||
bottom: -0.2rem;
|
||||
width: 2px;
|
||||
margin-left: -1px;
|
||||
background: var(--bs-body-color);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue