Skip to content

Commit 7d29d4f

Browse files
pheuspheus
committed
feat(templates): Improve layout for edit forms
Updated forms to enhance layout and spacing consistency by leveraging NetBox style classes.
1 parent c2ccd51 commit 7d29d4f

File tree

2 files changed

+113
-93
lines changed

2 files changed

+113
-93
lines changed

‎netbox_acls/templates/netbox_acls/accesslist_edit.html‎

Lines changed: 63 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,67 @@
22
{% load static %}
33
{% load form_helpers %}
44

5-
{% block title %}{% if obj.pk %}Editing {{ obj }}{% else %}Add an Access List{% endif %}{% endblock %}
6-
75
{% block form %}
86
{% render_errors form %}
9-
<div class="field-group">
10-
<h2>Access List Details</h2>
7+
<div class="field-group my-5">
8+
<div class="row">
9+
<h2 class="col-9 offset-3">Access List Details</h2>
10+
</div>
1111
{% render_field form.name %}
1212
{% render_field form.type %}
1313
{% render_field form.default_action %}
1414
{% render_field form.tags %}
1515
</div>
16-
<div class="field-group">
17-
<h2>Host Assignment</h2>
18-
<ul class="nav nav-pills" role="tablist">
19-
<li class="nav-item" role="presentation">
20-
<button
21-
role="tab"
22-
type="button"
23-
id="device_tab"
24-
data-bs-toggle="tab"
25-
class="nav-link {% if not form.initial.virtual_chassis and not form.initial.virtual_machine %}active{% endif %}"
26-
data-bs-target="#device"
27-
aria-controls="device"
28-
>
29-
Device
30-
</button>
31-
</li>
32-
<li class="nav-item" role="presentation">
33-
<button
34-
role="tab"
35-
type="button"
36-
id="vm_tab"
37-
data-bs-toggle="tab"
38-
class="nav-link {% if form.initial.virtual_chassis %}active{% endif %}"
39-
data-bs-target="#virtualchassis"
40-
aria-controls="virtualchassis"
41-
>
42-
Virtual Chassis
43-
</button>
44-
</li>
45-
<li class="nav-item" role="presentation">
46-
<button
47-
role="tab"
48-
type="button"
49-
id="vm_tab"
50-
data-bs-toggle="tab"
51-
class="nav-link {% if form.initial.virtual_machine %}active{% endif %}"
52-
data-bs-target="#virtualmachine"
53-
aria-controls="virtualmachine"
54-
>
55-
Virtual Machine
56-
</button>
57-
</li>
58-
</ul>
59-
<div class="tab-content">
16+
<div class="field-group my-5">
17+
<div class="row">
18+
<h2 class="col-9 offset-3">Host Assignment</h2>
19+
</div>
20+
<div class="row">
21+
<div class="col-9 offset-3">
22+
<ul class="nav nav-pills mb-1" role="tablist">
23+
<li class="nav-item" role="presentation">
24+
<button
25+
role="tab"
26+
type="button"
27+
id="device_tab"
28+
data-bs-toggle="tab"
29+
class="nav-link {% if not form.initial.virtual_chassis and not form.initial.virtual_machine %}active{% endif %}"
30+
data-bs-target="#device"
31+
aria-controls="device"
32+
>
33+
Device
34+
</button>
35+
</li>
36+
<li class="nav-item" role="presentation">
37+
<button
38+
role="tab"
39+
type="button"
40+
id="vm_tab"
41+
data-bs-toggle="tab"
42+
class="nav-link {% if form.initial.virtual_chassis %}active{% endif %}"
43+
data-bs-target="#virtualchassis"
44+
aria-controls="virtualchassis"
45+
>
46+
Virtual Chassis
47+
</button>
48+
</li>
49+
<li class="nav-item" role="presentation">
50+
<button
51+
role="tab"
52+
type="button"
53+
id="vm_tab"
54+
data-bs-toggle="tab"
55+
class="nav-link {% if form.initial.virtual_machine %}active{% endif %}"
56+
data-bs-target="#virtualmachine"
57+
aria-controls="virtualmachine"
58+
>
59+
Virtual Machine
60+
</button>
61+
</li>
62+
</ul>
63+
</div>
64+
</div>
65+
<div class="tab-content p-0 border-0">
6066
<div class="tab-pane{% if not form.initial.virtual_chassis and not form.initial.virtualmachine %} active{% endif %}" id="device">
6167
{% render_field form.region %}
6268
{% render_field form.site_group %}
@@ -74,14 +80,18 @@ <h2>Host Assignment</h2>
7480
</div>
7581
</div>
7682
</div>
77-
<div class="field-group">
78-
<h2>Comments</h2>
83+
<div class="field-group my-5">
84+
<div class="row">
85+
<h2 class="col-9 offset-3">Comments</h2>
86+
</div>
7987
{% render_field form.comments %}
8088
</div>
8189
{% if form.custom_fields %}
82-
<div class="card">
83-
<h5 class="card-header">Custom Fields</h5>
84-
{% render_custom_fields form %}
90+
<div class="field-group my-5">
91+
<div class="row">
92+
<h2 class="col-9 offset-3">Custom Fields</h2>
93+
</div>
94+
{% render_custom_fields form %}
8595
</div>
8696
{% endif %}
8797
{% endblock %}

‎netbox_acls/templates/netbox_acls/aclinterfaceassignment_edit.html‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,53 @@
22
{% load static %}
33
{% load form_helpers %}
44

5-
{% block title %}{% if obj.pk %}Editing {{ obj }}{% else %}Add an Access List to an Interface{% endif %}{% endblock %}
6-
75
{% block form %}
86
{% render_errors form %}
9-
<div class="field-group">
10-
<h2>Access List Details</h2>
7+
<div class="field-group my-5">
8+
<div class="row">
9+
<h2 class="col-9 offset-3">Access List Details</h2>
10+
</div>
1111
{% render_field form.access_list %}
1212
{% render_field form.direction %}
1313
{% render_field form.tags %}
1414
</div>
15-
<div class="field-group">
16-
<h2>Interface Assignment</h2>
17-
<ul class="nav nav-pills" role="tablist">
18-
<li class="nav-item" role="presentation">
19-
<button
20-
role="tab"
21-
type="button"
22-
id="device_tab"
23-
data-bs-toggle="tab"
24-
class="nav-link {% if not form.initial.virtual_chassis and not form.initial.virtual_machine %}active{% endif %}"
25-
data-bs-target="#device"
26-
aria-controls="device"
27-
>
28-
Device
29-
</button>
30-
</li>
31-
<li class="nav-item" role="presentation">
32-
<button
33-
role="tab"
34-
type="button"
35-
id="vm_tab"
36-
data-bs-toggle="tab"
37-
class="nav-link {% if form.initial.virtual_machine %}active{% endif %}"
38-
data-bs-target="#virtualmachine"
39-
aria-controls="virtualmachine"
40-
>
41-
Virtual Machine
42-
</button>
43-
</li>
44-
</ul>
45-
<div class="tab-content">
15+
<div class="field-group my-5">
16+
<div class="row">
17+
<h2 class="col-9 offset-3">Interface Assignment</h2>
18+
</div>
19+
<div class="row">
20+
<div class="col-9 offset-3">
21+
<ul class="nav nav-pills mb-1" role="tablist">
22+
<li class="nav-item" role="presentation">
23+
<button
24+
role="tab"
25+
type="button"
26+
id="device_tab"
27+
data-bs-toggle="tab"
28+
class="nav-link {% if not form.initial.virtual_chassis and not form.initial.virtual_machine %}active{% endif %}"
29+
data-bs-target="#device"
30+
aria-controls="device"
31+
>
32+
Device
33+
</button>
34+
</li>
35+
<li class="nav-item" role="presentation">
36+
<button
37+
role="tab"
38+
type="button"
39+
id="vm_tab"
40+
data-bs-toggle="tab"
41+
class="nav-link {% if form.initial.virtual_machine %}active{% endif %}"
42+
data-bs-target="#virtualmachine"
43+
aria-controls="virtualmachine"
44+
>
45+
Virtual Machine
46+
</button>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
51+
<div class="tab-content p-0 border-0">
4652
<div class="tab-pane{% if not form.initial.virtual_chassis and not form.initial.virtualmachine %} active{% endif %}" id="device">
4753
{% render_field form.device %}
4854
{% render_field form.interface %}
@@ -53,14 +59,18 @@ <h2>Interface Assignment</h2>
5359
</div>
5460
</div>
5561
</div>
56-
<div class="field-group">
57-
<h2>Comments</h2>
62+
<div class="field-group my-5">
63+
<div class="row">
64+
<h2 class="col-9 offset-3">Comments</h2>
65+
</div>
5866
{% render_field form.comments %}
5967
</div>
6068
{% if form.custom_fields %}
61-
<div class="card">
62-
<h5 class="card-header">Custom Fields</h5>
63-
{% render_custom_fields form %}
69+
<div class="field-group my-5">
70+
<div class="row">
71+
<h2 class="col-9 offset-3">Custom Fields</h2>
72+
</div>
73+
{% render_custom_fields form %}
6474
</div>
6575
{% endif %}
6676
{% endblock %}

0 commit comments

Comments
 (0)