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

style(computes,networks,storages,interfaces): the cards' rows tighter

Browse source 
The label and value rows of the host pages' cards (Overview, storage
pools, networks, interfaces) take Bootstrap's py-1 instead of the list
group's own padding, as the interface list's cards already do: about
half the height a row, the same on every page. A pool's space bar keeps
its padding.
This commit is contained in:
catborise 2026-10-28 23:55:16 +03:00
parent 050d071ff9
commit 65c5a251ba
6 changed files with 43 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

28
computes/templates/overview.html
View file

@ -118,35 +118,35 @@
<div class="card h-100">
<div class="card-header">{% bs_icon 'cpu' %} {% trans "Hardware" %}</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Processor" %}</span>
<span class="text-end text-break">{{ host.processor|default:"–" }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Architecture" %}</span>
<span class="text-end text-break">{{ host.arch }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Logical CPUs" %}</span>
<span class="text-end text-break"><span class="fw-semibold">{{ host.topology.cpus }}</span></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Physical cores" %}</span>
<span class="text-end text-break"><span class="fw-semibold">{{ host.topology.cores|default:"–" }}</span></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Sockets" %}</span>
<span class="text-end text-break"><span class="fw-semibold">{{ host.topology.sockets|default:"–" }}</span></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "NUMA nodes" %}</span>
<span class="text-end text-break"><span class="fw-semibold">{{ host.topology.nodes|default:"–" }}</span></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Clock" %}</span>
<span class="text-end text-break">{{ host.ghz }} GHz</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Memory" %}</span>
<span class="text-end text-break"><span class="fw-semibold">{{ host.memory|filesizeformat }}</span></span>
</li>
@ -157,27 +157,27 @@
<div class="card h-100">
<div class="card-header">{% bs_icon 'layers' %} {% trans "Software and connection" %}</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Hostname" %}</span>
<span class="text-end text-break">{{ host.hostname }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{{ host.hypervisor }}</span>
<span class="text-end text-break"><span class="badge text-bg-primary">{{ host.hypervisor_version }}</span></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">libvirt</span>
<span class="text-end text-break"><span class="badge text-bg-primary">{{ host.libvirt_version }}</span></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Guest architectures" %}</span>
<span class="text-end text-break">{% for arch, types in host.guest_archs.items %}<span class="badge text-bg-light border ms-1">{{ arch }} <span class="fw-normal text-body-secondary">{{ types|join:" · " }}</span></span>{% endfor %}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Emulator" %}</span>
<span class="text-end text-break"><code>{{ host.emulator|default:"–" }}</code></span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Connection" %}</span>
<span class="text-end text-break"><code>{{ host.uri }}</code></span>
</li>

20
interfaces/templates/interface.html
View file

@ -41,10 +41,10 @@
<div class="card mb-3">
<div class="card-header">{% trans "Interface" %}</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Type" %}</span><span class="badge text-bg-light border">{{ info.type|capfirst }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "State" %}</span>
<span class="d-flex flex-wrap justify-content-end gap-1">
{# libvirt's own state where it manages the interface; the link as the kernel reports it everywhere #}
@ -53,33 +53,33 @@
</span>
</li>
{% if info.start_mode %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Starts" %}</span>
<span>{% if info.start_mode == "onboot" %}{% trans "On boot" %}{% elif info.start_mode == "hotplug" %}{% trans "When plugged in" %}{% else %}{% trans "Only by hand" %}{% endif %}</span>
</li>
{% endif %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "MAC" %}</span><span class="font-monospace text-break text-end">{{ info.mac|default:"–" }}</span>
</li>
{% if info.mtu %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "MTU" %}</span><span>{{ info.mtu }}</span>
</li>
{% endif %}
{% if info.speed %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Speed" %}</span><span>{{ info.speed }} Mb/s</span>
</li>
{% endif %}
{% if info.stp %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Spanning tree" %}</span>
{# not its delay: netcf tells it in seconds, the udev backend in hundredths #}
<span>{% if info.stp == "on" %}{% trans "On" %}{% else %}{% trans "Off" %}{% endif %}</span>
</li>
{% endif %}
{% if networks %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Used by" %}</span>
<span class="text-end">{% for net in networks %}<a href="{% url 'network' compute.id net %}">{% blocktrans %}network {{ net }}{% endblocktrans %}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</span>
</li>
@ -94,12 +94,12 @@
<div class="card h-100">
<div class="card-header">{{ family }}</div>
<ul class="list-group list-group-flush flex-grow-1">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Configured" %}</span>
<span>{% if addressing.method == "dhcp" %}DHCP{% elif addressing.method == "autoconf" %}{% trans "Automatic (SLAAC)" %}{% elif addressing.method == "static" %}{% trans "Static" %}{% else %}{% trans "None" %}{% endif %}</span>
</li>
{% for address in addressing.addresses %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Address" %}</span><span class="font-monospace text-break text-end">{{ address }}</span>
</li>
{% endfor %}

16
networks/templates/network.html
View file

@ -50,23 +50,23 @@
<div class="card mb-3">
<div class="card-header">{% trans "Network" %}</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "State" %}</span>
<span class="d-flex flex-wrap justify-content-end gap-1">
{% if state %}<span class="badge text-bg-success">{% trans "Active" %}</span>{% else %}<span class="badge text-bg-secondary">{% trans "Stopped" %}</span>{% endif %}
{% if autostart %}<span class="badge text-bg-light border">{% trans "Autostart" %}</span>{% endif %}
</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Type" %}</span>
<span class="badge text-bg-light border">{{ mode_label }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% if mode == "macvtap" %}{% trans "Host interface" %}{% elif mode == "bridge" %}{% trans "Host bridge" %}{% else %}{% trans "Bridge" %}{% endif %}</span>
<span class="font-monospace text-break text-end">{{ device|default:"–" }}</span>
</li>
{% if net_mac %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "MAC" %}</span>
<span class="font-monospace">{{ net_mac }}</span>
</li>
@ -94,13 +94,13 @@
{% endif %}
</div>
<ul class="list-group list-group-flush flex-grow-1">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Subnet" %}</span><span class="font-monospace text-break text-end">{{ ip.subnet|default:"–" }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Host's address" %}</span><span class="font-monospace text-break text-end">{{ ip.address }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "DHCP" %}</span>
<span class="text-end">
{% if ip.range %}<span class="font-monospace text-break">{{ ip.range.0 }} – {{ ip.range.1 }}</span>
@ -196,7 +196,7 @@
{% if vms %}
<ul class="list-group list-group-flush">
{% for vm in vms %}
<li class="list-group-item d-flex justify-content-between align-items-center gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-center gap-3">
{% if vm.id %}<a href="{% url 'instances:instance' vm.id %}">{{ vm.name }}</a>{% else %}<span>{{ vm.name }}</span>{% endif %}
{% if vm.connected %}<span class="badge text-bg-success">{% trans "Connected" %}</span>{% else %}<span class="badge text-bg-light border">{% trans "Configured" %}</span>{% endif %}
</li>

10
networks/templates/networks.html
View file

@ -31,22 +31,22 @@
{% if net.autostart %}<span class="badge text-bg-light border">{% trans "Autostart" %}</span>{% endif %}
</div>
<ul class="list-group list-group-flush flex-grow-1">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Type" %}</span>
<span class="badge text-bg-light border">{{ net.mode_label }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Device" %}</span>
<span class="font-monospace text-break text-end">{{ net.device|default:"–" }}</span>
</li>
{% if net.external %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Addresses" %}</span>
<span class="text-body-secondary text-end">{% trans "from the outside network" %}</span>
</li>
{% else %}
{% for ip in net.ips %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% if ip.family == "ipv6" %}IPv6{% else %}IPv4{% endif %}</span>
<span class="text-end">
<span class="font-monospace text-break">{{ ip.subnet|default:ip.address }}</span>
@ -58,7 +58,7 @@
</span>
</li>
{% empty %}
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Addresses" %}</span>
<span class="text-body-secondary text-end">{% trans "none" %}</span>
</li>

6
storages/templates/storage.html
View file

@ -90,7 +90,7 @@
<div class="card h-100">
<div class="card-header">{% trans "Pool" %}</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between gap-3">
<li class="list-group-item py-1 d-flex justify-content-between gap-3">
<span class="text-body-secondary">{% trans "State" %}</span>
<span class="d-flex flex-wrap justify-content-end gap-1">
{% if state %}<span class="badge text-bg-success">{% trans "Active" %}</span>{% else %}<span class="badge text-bg-secondary">{% trans "Stopped" %}</span>{% endif %}
@ -98,10 +98,10 @@
{% if autostart %}<span class="badge text-bg-light border">{% trans "Autostart" %}</span>{% endif %}
</span>
</li>
<li class="list-group-item d-flex justify-content-between gap-3">
<li class="list-group-item py-1 d-flex justify-content-between gap-3">
<span class="text-body-secondary">{% trans "Type" %}</span><span>{{ type|default:"—" }}</span>
</li>
<li class="list-group-item d-flex justify-content-between gap-3">
<li class="list-group-item py-1 d-flex justify-content-between gap-3">
<span class="text-body-secondary">{% trans "Path" %}</span>
<span class="font-monospace text-break text-end">{{ path|default:"—" }}</span>
</li>

6
storages/templates/storages.html
View file

@ -35,15 +35,15 @@
{% if pool.autostart %}<span class="badge text-bg-light border">{% trans "Autostart" %}</span>{% endif %}
</div>
<ul class="list-group list-group-flush flex-grow-1">
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Type" %}</span>
<span class="badge text-bg-light border">{{ pool.type|upper }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Path" %}</span>
<span class="small font-monospace text-end text-break">{{ pool.path|default:"–" }}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-baseline gap-3">
<li class="list-group-item py-1 d-flex justify-content-between align-items-baseline gap-3">
<span class="text-body-secondary">{% trans "Volumes" %}</span>
<span class="fw-semibold">{% if pool.status %}{{ pool.volumes }}{% else %}–{% endif %}</span>
</li>