mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-08 11:16:47 +00:00
3c6de221ca
The Users, Groups and Removed VMs pages were bare tables: rows of coloured icon buttons without words, five columns of small checks for a user's role and permissions, dates broken over three lines and a lone "+" for a new entry. The owner chose a directory layout from three rendered options; it follows the host pages' cards: - Each list is a card with its count and search in the header and one list-group item per entry, which stacks on a phone without scrolling. - A user shows their role as a badge (Superuser, Template editor) or "User", Blocked as a red badge, their groups, a granted clone permission and live API tokens, and the last login on one line; role and status are searchable. Edit is the visible action, the menu holds View profile, Block or Unblock and Delete; Block and Delete are disabled on one's own account, which the server refuses anyway. - A group shows its member and permission counts; its name opens it. The page's title said "Users". - A removed VM shows its UUID, the host it left, its owners and when the record was made and expires. - Logs keep their table in a card, the server search in its header, the count of matching rows, Done and Failed as badges, and a message column wide enough to read on a phone. The user form was one long column of horizontal fields. The owner rejected three boxed layouts and chose one led by what the user may do: the Active switch, Template editor and Superuser as two cards, groups as chips, the user's own permissions as switches each saying what it allows, then the name and password and the quota folded into details whose summaries tell their values (-1 as "any"); they open on a new user and on an error inside them. A refused group or permission is said beside its field. The group form follows it: the name, what its members may do, its members as chips. Cancel goes back to the list instead of the browser history.
139 lines
3.5 KiB
CSS
139 lines
3.5 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.
|
|
*/
|
|
|
|
/* pages stop at Bootstrap's lg container width (960px): its xl and xxl
|
|
widths (1140px, 1320px) leave the panel's forms and lists too wide */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
/* a count or label badge: text-bg-light keeps a light background with the
|
|
theme's light-text colour, white on grey in Darkly, Superhero and Vapor;
|
|
the page's own colours read in every theme */
|
|
.badge.text-bg-light.border {
|
|
color: var(--bs-body-color) !important;
|
|
background-color: var(--bs-body-bg) !important;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.xmlheight {
|
|
height: 364px;
|
|
}
|
|
|
|
.ace_editor {
|
|
height: 350px;
|
|
}
|
|
|
|
/* headers of sortable tables (static/js/sort_tables.js): the sorted one shows
|
|
its direction, up for ascending */
|
|
th[role=columnheader]:not([data-sort-method="none"]) {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
th[aria-sort]:not([data-sort-method="none"])::after {
|
|
content: "";
|
|
display: inline-block;
|
|
margin-left: 0.4em;
|
|
vertical-align: middle;
|
|
border: 0.3em solid transparent;
|
|
border-top-color: currentColor;
|
|
}
|
|
|
|
th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
|
|
border-top-color: transparent;
|
|
border-bottom-color: currentColor;
|
|
}
|
|
|
|
/* a phone keeps Bootstrap's own cell padding: some themes (Zephyr) double
|
|
it, and a list's last column no longer fits the screen */
|
|
@media (max-width: 575.98px) {
|
|
.table > :not(caption) > * > * {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* a choice shown as a card around its radio button (the VM's disk source,
|
|
a new pool's type): the chosen card by its border only, as the
|
|
Bootswatch dark themes keep light "subtle" backgrounds */
|
|
.source-option {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.source-option:has(input:checked) {
|
|
border-color: var(--bs-primary) !important;
|
|
box-shadow: inset 0 0 0 1px var(--bs-primary);
|
|
}
|
|
|
|
.source-option:has(input:focus-visible) {
|
|
outline: 2px solid var(--bs-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.host-collapsed tr[host] {
|
|
display: none;
|
|
}
|
|
|
|
/* a live chart (static/js/charts.js) fills the width of its card at this height */
|
|
.chart {
|
|
height: 160px;
|
|
}
|
|
|
|
/* the host's sections (computes/host_nav.html) on one line in every theme:
|
|
one font size, and the divider spaced alike on its two sides (Zephyr
|
|
doubles the space after it) */
|
|
.host-nav .breadcrumb {
|
|
--bs-breadcrumb-item-padding-x: .5rem;
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.host-nav .breadcrumb-item + .breadcrumb-item::before {
|
|
padding-right: var(--bs-breadcrumb-item-padding-x);
|
|
}
|
|
|
|
/* the boot order editor numbers its checked devices, top to bottom */
|
|
.boot-sequence {
|
|
counter-reset: boot;
|
|
}
|
|
|
|
.boot-sequence > label:has(> input:checked) {
|
|
counter-increment: boot;
|
|
}
|
|
|
|
.boot-rank {
|
|
width: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.boot-rank::before {
|
|
content: "—";
|
|
}
|
|
|
|
.boot-sequence > label:has(> input:checked) .boot-rank::before {
|
|
content: counter(boot);
|
|
}
|
|
|
|
/* a log message keeps a readable width when its table scrolls on a phone */
|
|
.log-message {
|
|
min-width: 16rem;
|
|
}
|