From 676bcfeb098c4fce797d66969f37682c99166ea7 Mon Sep 17 00:00:00 2001 From: catborise Date: Wed, 21 Oct 2026 13:13:55 +0300 Subject: [PATCH] fix(templates): forms and detail lists fit a phone screen Column offsets without a breakpoint applied below it, where the column is already full width, so the change password, compute, user, VM create and VM settings forms ran past the right edge on a phone. Each offset now starts at its column's breakpoint. The interface and network detail lists were rows directly inside rows and sit in a column now; the compute form loses a Bootstrap 3 thumbnail padding that broke its gutters, and the add-rule dialog's hint is no longer cut off. The page test checks both grid rules on every page. Co-Authored-By: Claude Opus 5.5 (1M context) --- .../accounts/change_password_form.html | 2 +- admin/templates/admin/user_form.html | 2 +- computes/templates/computes/form.html | 2 +- instances/templates/create_instance_w1.html | 2 +- instances/templates/create_instance_w2.html | 4 +- .../templates/instances/settings_tab.html | 18 ++--- interfaces/templates/interface.html | 66 ++++++++++--------- networks/templates/network.html | 56 ++++++++-------- nwfilters/templates/add_nwf_rule.html | 2 +- static/css/webvirtcloud.css | 4 -- webvirtcloud/tests/test_pages.py | 12 ++++ 11 files changed, 91 insertions(+), 79 deletions(-) diff --git a/accounts/templates/accounts/change_password_form.html b/accounts/templates/accounts/change_password_form.html index 3df2d0ed..35dab319 100644 --- a/accounts/templates/accounts/change_password_form.html +++ b/accounts/templates/accounts/change_password_form.html @@ -8,7 +8,7 @@ {% block content %}
-
+

{%trans "Change Password" %}: {{ user }}

diff --git a/admin/templates/admin/user_form.html b/admin/templates/admin/user_form.html index 47d6b2cd..fb502a64 100644 --- a/admin/templates/admin/user_form.html +++ b/admin/templates/admin/user_form.html @@ -8,7 +8,7 @@ {% block page_heading %}{{ title }}{% endblock page_heading %} {% block content %} -
+
{% csrf_token %} diff --git a/computes/templates/computes/form.html b/computes/templates/computes/form.html index d867ab41..2f08c60c 100644 --- a/computes/templates/computes/form.html +++ b/computes/templates/computes/form.html @@ -12,7 +12,7 @@
-
+
{% csrf_token %} {% bootstrap_form form layout='horizontal' %} diff --git a/instances/templates/create_instance_w1.html b/instances/templates/create_instance_w1.html index 37a49bec..1dc42594 100644 --- a/instances/templates/create_instance_w1.html +++ b/instances/templates/create_instance_w1.html @@ -65,7 +65,7 @@
-
+
diff --git a/instances/templates/create_instance_w2.html b/instances/templates/create_instance_w2.html index 6d1f3d0e..22876f10 100644 --- a/instances/templates/create_instance_w2.html +++ b/instances/templates/create_instance_w2.html @@ -600,7 +600,7 @@ {% endif %}
-
+
{% if storages %}
-
+
{% if storages %}
{% empty %} -
+
{% trans 'There is not any CD-ROM device.' %}
{% endfor %} @@ -607,7 +607,7 @@
-
+
@@ -615,7 +615,7 @@
-
+
@@ -623,7 +623,7 @@
-
+
@@ -631,7 +631,7 @@
-
+
@@ -639,7 +639,7 @@
-
+
@@ -756,7 +756,7 @@ {% for network in instance.config_networks %}
- +
@@ -778,7 +778,7 @@ {% for disk in instance.config_disks %}
- +
@@ -847,7 +847,7 @@
-
+
{% if instance.status == 5 %} {% else %} diff --git a/interfaces/templates/interface.html b/interfaces/templates/interface.html index 071c934a..8ae23f8d 100644 --- a/interfaces/templates/interface.html +++ b/interfaces/templates/interface.html @@ -37,39 +37,41 @@ {% if changeable is False %}{% include 'interfaces_unchangeable.html' %}{% endif %}
-
-
{% trans "Interface" %}
-
{{ iface }}
-
{% trans "IPv4" %} ({% if ipv4 == None %}{% trans 'None' %}{% else %}{{ ipv4_type }}{% endif %})
-
{{ ipv4 }}
-
{% trans "IPv6" %} ({% if ipv6 == None %}{% trans 'None' %}{% else %}{{ ipv6_type }}{% endif %})
-
{{ ipv6 }}
-
{% trans "MAC" %}
-
{{ mac }}
-
{% trans "Interface Type" %}
-
{{ itype }}
- {% if itype == 'bridge' %} -
{% trans "Bridge Device" %}
-
{{ bridge }}
- {% endif %} -
{% trans "Boot Mode" %}
-
{{ start_mode }}
-
{% trans "State" %}
-
- {% if changeable is False %} - {% if state == 0 %}{% trans "Inactive" %}{% else %}{% trans "Active" %}{% endif %} - {% else %} - {% csrf_token %} - {% if state == 0 %} - - - {% else %} - - {% endif %} - +
+
+
{% trans "Interface" %}
+
{{ iface }}
+
{% trans "IPv4" %} ({% if ipv4 == None %}{% trans 'None' %}{% else %}{{ ipv4_type }}{% endif %})
+
{{ ipv4 }}
+
{% trans "IPv6" %} ({% if ipv6 == None %}{% trans 'None' %}{% else %}{{ ipv6_type }}{% endif %})
+
{{ ipv6 }}
+
{% trans "MAC" %}
+
{{ mac }}
+
{% trans "Interface Type" %}
+
{{ itype }}
+ {% if itype == 'bridge' %} +
{% trans "Bridge Device" %}
+
{{ bridge }}
{% endif %} -
-
+
{% trans "Boot Mode" %}
+
{{ start_mode }}
+
{% trans "State" %}
+
+ {% if changeable is False %} + {% if state == 0 %}{% trans "Inactive" %}{% else %}{% trans "Active" %}{% endif %} + {% else %} +
{% csrf_token %} + {% if state == 0 %} + + + {% else %} + + {% endif %} +
+ {% endif %} +
+ +
{% trans 'Slaves' %}
diff --git a/networks/templates/network.html b/networks/templates/network.html index 45826903..2d093ebf 100644 --- a/networks/templates/network.html +++ b/networks/templates/network.html @@ -38,33 +38,35 @@
-
-
{% trans "Network name" %}
-
{{ pool }}
-
{% trans "Device" %}
-
{{ device }}
-
{% trans "State" %}
-
-
{% csrf_token %} - {% if state == 0 %} - - - {% else %} - - {% endif %} -
-
-
{% trans "Autostart" %}
-
-
{% csrf_token %} - {% if autostart == 0 %} - - {% else %} - - {% endif %} -
-
-
+
+
+
{% trans "Network name" %}
+
{{ pool }}
+
{% trans "Device" %}
+
{{ device }}
+
{% trans "State" %}
+
+
{% csrf_token %} + {% if state == 0 %} + + + {% else %} + + {% endif %} +
+
+
{% trans "Autostart" %}
+
+
{% csrf_token %} + {% if autostart == 0 %} + + {% else %} + + {% endif %} +
+
+
+
diff --git a/nwfilters/templates/add_nwf_rule.html b/nwfilters/templates/add_nwf_rule.html index 3457949d..31da308b 100644 --- a/nwfilters/templates/add_nwf_rule.html +++ b/nwfilters/templates/add_nwf_rule.html @@ -20,8 +20,8 @@
-

{% trans 'If there is a rule which has same attributes it replaces that rule' %}...

+

{% trans 'If there is a rule which has same attributes it replaces that rule' %}...

diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css index 9042a215..feffaa45 100644 --- a/static/css/webvirtcloud.css +++ b/static/css/webvirtcloud.css @@ -157,10 +157,6 @@ p { margin-top: 65px; } -.thumbnail { - padding: 10px; -} - /* make dropdowns show on hover */ @media only screen and (min-width: 768px) { .dropdown:hover .dropdown-menu { diff --git a/webvirtcloud/tests/test_pages.py b/webvirtcloud/tests/test_pages.py index 5d1373ea..b13979f6 100644 --- a/webvirtcloud/tests/test_pages.py +++ b/webvirtcloud/tests/test_pages.py @@ -1,5 +1,6 @@ """Every HTML page a superuser can open, rendered on libvirt's test driver.""" +import re from collections import Counter from unittest.mock import patch @@ -70,3 +71,14 @@ class PageTests(TestCase): bare = [t.get("class") for t in page.xpath("//table[not(parent::div[contains(@class, 'table-responsive')])]")] with self.subTest(page=name): self.assertEqual(bare, []) + + def test_grid_columns_fit_a_phone(self): + # below a column's breakpoint it is full width, so an offset without one + # pushes it past the screen; a row needs columns inside, not another row + row = "contains(concat(' ', normalize-space(@class), ' '), ' row ')" + for name, page in self.pages(): + offsets = [cls for cls in page.xpath("//@class") + if re.search(r"\boffset-\d+\b", cls) and not re.search(r"\bcol-\d+\b", cls)] + with self.subTest(page=name): + self.assertEqual(offsets, []) + self.assertEqual(page.xpath(f"//*[{row}]/*[{row}]/@class"), [])