j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-09 03:36:48 +00:00
Code Issues Projects Releases Wiki Activity

feat(instances): the Snapshots tab shows the VM's history as a line

Browse source 
The tab opened on "Snapshots · Active" above the form, and listed the
snapshots below it as rows of "name · description · external, current
· date" with a solid red Delete on each. Which snapshot the VM goes on
from was the word "current" among the others.

Now a line runs down the tab, newest first. On top is Now, the VM in
its state's color, with the form that takes a snapshot there. Below it
each snapshot is a point: its name and date, its description on a line
of its own, its kind under them. The one the VM goes on from is filled
and says so; the others are rings. Revert and Delete are small outlined
buttons. Forms, confirmations and the rules that disable them are
unchanged.
This commit is contained in:
catborise 2026-11-04 08:51:01 +03:00
parent 07ca42dcdf
commit 0b2604f151
7 changed files with 246 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

25
static/css/webvirtcloud.css
View file

@ -205,6 +205,31 @@ button.vcpu-cell:disabled { opacity: .65; }
.boot-text { min-width: 10rem; flex-basis: 10rem; }
.boot-chain .boot-spare-only, .boot-spare .boot-chain-only { display: none !important; }
/* the snapshots tab: the VM's history as a line, newest first; now on top, the snapshot the VM goes on from filled */
.snap-line { position: relative; padding-left: 1.75rem; }
.snap-line::before {
content: "";
position: absolute;
left: calc(.5rem - 1px);
top: .75rem;
bottom: .75rem;
border-left: 2px solid var(--bs-border-color);
}
.snap-node { position: relative; padding: .5rem 0; }
.snap-dot {
position: absolute;
left: -1.75rem;
top: .75rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 2px solid var(--bs-primary);
background: var(--bs-body-bg);
}
.snap-dot.bg-success, .snap-dot.bg-warning, .snap-dot.bg-secondary { border-color: transparent; }
.snap-dot.snap-current { background: var(--bs-primary); }
.snap-dot.snap-none { border-color: var(--bs-border-color); }
/* a log message keeps a readable width when its table scrolls on a phone */
.log-message {
min-width: 16rem;