j3d1/webvirtcloud
1
0
Fork 0
mirror of https://github.com/retspen/webvirtcloud synced 2026-11-08 11:16:47 +00:00
Code Issues Projects Releases Wiki Activity

style(computes): the host's sections on one line in every theme

Browse source 
- The host navigation takes one font size and spaces its dividers alike on
  both sides in every theme: Zephyr doubled the space after each divider,
  and with the Devices section its eight sections took two lines.
- Its labels are shorter: Storage, Filters.
- Measured in the 27 themes at 992, 1200 and 1440 px: one line in each,
  with at least 73 px to spare (Lux had 20 px before, Zephyr was 13 px
  short).
This commit is contained in:
catborise 2026-10-29 15:35:42 +03:00
parent e28e175257
commit 0671dc67a0
3 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
computes/templates/computes/host_nav.html
View file

@ -1,7 +1,7 @@
{% load i18n %}
{% load bootstrap_icons %}
{# The host's sections. section: the one this page belongs to; detail: the page is an item of it (a pool, a network), not the section's own page #}
<nav aria-label="{% trans "Host sections" %}">
<nav class="host-nav" aria-label="{% trans "Host sections" %}">
<ol class="breadcrumb shadow-sm">
<li class="breadcrumb-item">
{% if section == "overview" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'laptop' %} {% trans "Overview" %}</span>
@ -12,8 +12,8 @@
{% else %}<a href="{% url 'instances' compute.id %}"{% if section == "instances" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'server' %} {% trans "Instances" %}</a>{% endif %}
</li>
<li class="breadcrumb-item">
{% if section == "storages" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'device-hdd' %} {% trans "Storages" %}</span>
{% else %}<a href="{% url 'storages' compute.id %}"{% if section == "storages" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'device-hdd' %} {% trans "Storages" %}</a>{% endif %}
{% if section == "storages" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'device-hdd' %} {% trans "Storage" %}</span>
{% else %}<a href="{% url 'storages' compute.id %}"{% if section == "storages" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'device-hdd' %} {% trans "Storage" %}</a>{% endif %}
</li>
<li class="breadcrumb-item">
{% if section == "networks" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'hdd-network' %} {% trans "Networks" %}</span>
@ -24,8 +24,8 @@
{% else %}<a href="{% url 'interfaces' compute.id %}"{% if section == "interfaces" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'wifi' %} {% trans "Interfaces" %}</a>{% endif %}
</li>
<li class="breadcrumb-item">
{% if section == "nwfilters" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'filter' %} {% trans "NWFilters" %}</span>
{% else %}<a href="{% url 'nwfilters' compute.id %}"{% if section == "nwfilters" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'filter' %} {% trans "NWFilters" %}</a>{% endif %}
{% if section == "nwfilters" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'filter' %} {% trans "Filters" %}</span>
{% else %}<a href="{% url 'nwfilters' compute.id %}"{% if section == "nwfilters" %} class="fw-bold" aria-current="true"{% endif %}>{% bs_icon 'filter' %} {% trans "Filters" %}</a>{% endif %}
</li>
<li class="breadcrumb-item">
{% if section == "virtsecrets" and not detail %}<span class="fw-bold" aria-current="page">{% bs_icon 'key' %} {% trans "Secrets" %}</span>

2
computes/tests/test_host_nav.py
View file

@ -18,7 +18,7 @@ class HostNavTestCase(TestCase):
def test_the_section_s_own_page_is_the_current_page(self):
items = self.items(section="storages")
self.assertEqual(len(items), 8)
self.assertEqual(items["Storages"], ("span", "page"))
self.assertEqual(items["Storage"], ("span", "page"))
self.assertEqual(items["Overview"], ("a", None))
def test_an_item_of_a_section_links_the_section_as_where_it_is(self):

12
static/css/webvirtcloud.css
View file

@ -90,3 +90,15 @@ th[aria-sort="ascending"]:not([data-sort-method="none"])::after {
.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);
}