Use shaded tabs

This commit is contained in:
jeremystretch
2021-07-21 09:24:43 -04:00
parent ebe7779f40
commit d42138384f
21 changed files with 226 additions and 190 deletions

View File

@@ -25,7 +25,7 @@
<div class="field-group">
<h4 class="mb-3">Interface Assignment</h4>
{% with vm_tab_active=form.initial.vminterface %}
<ul class="nav nav-tabs mb-3" role="tablist">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item">
<button
role="tab"
@@ -52,7 +52,6 @@
Virtual Machine
</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane {% if not vm_tab_active %}active{% endif %}" id="device" role="tabpanel" aria-labeled-by="device_tab">
@@ -69,7 +68,7 @@
</div>
<div class="field-group">
<h4 class="mb-3">NAT IP (Inside)</h4>
<ul class="nav nav-tabs mb-3" role="tablist">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button
role="tab"
@@ -125,8 +124,8 @@
<div class="tab-pane" id="by_vrf" aria-labelledby="vrf_tab" role="tabpanel">
{% render_field form.nat_vrf %}
</div>
{% render_field form.nat_inside %}
</div>
{% render_field form.nat_inside %}
</div>
{% if form.custom_fields %}
<div class="field-group">

View File

@@ -15,7 +15,7 @@
{% endblock %}
{% block tabs %}
<ul class="nav nav-tabs" style="margin-bottom: 20px">
<ul class="nav nav-tabs px-3">
<li class="nav-item" role="presentation">
<a class="nav-link{% if not active_tab %} active{% endif %}" href="{% url 'ipam:vlan' pk=object.pk %}">VLAN</a>
</li>
@@ -37,3 +37,9 @@
{% endif %}
</ul>
{% endblock %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}{% endblock %}
</div>
{% endblock %}

View File

@@ -21,7 +21,7 @@
<div class="field-group mb-3">
<h4>Assignment</h4>
{% with site_tab_active=form.initial.site %}
<ul class="nav nav-tabs mb-3" role="tablist">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link{% if not site_tab_active %} active{% endif %}" href="#group" role="tab" data-bs-toggle="tab">VLAN Group</a>
</li>