mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 19:26:48 +00:00
ab5ed59ea1
The create page had three tabs (flavor, custom, template), each with its own copy of the same create form; every flavor rendered one more copy in a dialog, and fixes had to be made in each copy. All of them posted the same form to the same job, differing only in where the disk comes from. The page is now one form in sections: name and size, disk, networks and an Advanced section. The disk section offers three sources as radio cards (a new disk, existing volumes, a copy of a template); only the chosen source's fields are shown, and the others are disabled, so they are neither sent nor validated. A template's copy goes into the template's pool unless another is picked. Flavors are presets that fill vCPU, memory and disk size and pick a new disk; they are added and deleted in a dialog outside the form. Every source uses the per-interface network rows, so a new disk no longer requires a MAC: libvirt gives an interface without one its address, as it did for the other sources. A refused form comes back with its source, volumes, template and networks, and the focus on its first error. Without a storage pool or a network the page shows why instead of the form, and a host that cannot be read is a message, not a 500. The host dialog and the machine page share the form's look: hosts are rows with their CPU and memory use, the machine page is a card with Cancel/Next and the XML way is a collapsible section. All three steps show the same step indicator, done steps linking back. The create job refuses more than one disk source (the page sends one; a crafted request could send two, and the job would have used the first). A field with help text is described by its help and its error. Frontend review fixes: the presets and the disclosure buttons show a focus ring for keyboard users; a disclosure spans its card and its chevron turns while open; a preset says it picks a new disk; numeric fields bring a numeric keyboard and MAC fields no autocorrection; the machine page's Next waits for a machine type. Tom Select's control keeps the text colour of the select it replaces: its own fixed colour made typed text invisible on dark Bootswatch themes, on every page that uses it.
200 lines
No EOL
3.2 KiB
CSS
200 lines
No EOL
3.2 KiB
CSS
/*!
|
||
* WebVirtCloud (http://github.com/retspen/webvirtcloud)
|
||
* Code licensed under the Apache License v2.0.
|
||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||
*/
|
||
|
||
/* Global Styles */
|
||
|
||
body {
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 900px;
|
||
}
|
||
|
||
.page-header {
|
||
margin: 5px 5px 20px 20px;
|
||
}
|
||
|
||
#editor {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
/* Tom Select's control keeps the text colour of the select it replaces:
|
||
its own stylesheet fixes one, unreadable on some Bootswatch themes */
|
||
.ts-wrapper.form-select .ts-control,
|
||
.ts-wrapper.form-select .ts-control input {
|
||
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;
|
||
}
|
||
|
||
.ace_editor {
|
||
height: 350px;
|
||
}
|
||
|
||
.search {
|
||
margin: 5px;
|
||
}
|
||
|
||
.btn-header {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.action-block {
|
||
display: block;
|
||
padding: 15px 0;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
width: 65px;
|
||
}
|
||
|
||
.action-button {
|
||
text-align: center;
|
||
}
|
||
|
||
.tab-pane-bordered {
|
||
border: 1px solid #eee;
|
||
border-top-width: 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
p {
|
||
display: block;
|
||
margin: 10px 10px 10px 10px;
|
||
}
|
||
|
||
#power {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#access {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#resize {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#snapshots {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#settings {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#graphics {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
#undefine {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* a live chart (static/js/charts.js) fills the width of its card */
|
||
.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;
|
||
}
|
||
|
||
.multipleselect {
|
||
width:27em;
|
||
height:10em;
|
||
border:solid 2px #c0c0c0;
|
||
overflow:auto;
|
||
padding: 0 1em;
|
||
margin: 0.9em;
|
||
}
|
||
|
||
.multipleselect label {
|
||
display:block;
|
||
}
|
||
|
||
.multipleselect-on {
|
||
color:#ffffff;
|
||
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 {
|
||
display: block;
|
||
}
|
||
}
|
||
.table > tbody > tr > td {
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* remove ugly dotted outline on tabs */
|
||
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;
|
||
} |