NeoAnd/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2025-07-16 04:02:52 -06:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Use shaded tabs

Browse Source
This commit is contained in:
jeremystretch 2021-07-21 09:24:43 -04:00
parent ebe7779f40
commit d42138384f
21 changed files with 224 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
netbox/project-static/dist/netbox-dark.css vendored
View File

Binary file not shown.

2
netbox/project-static/dist/netbox-dark.css.map vendored
View File

File diff suppressed because one or more lines are too long

BIN
netbox/project-static/dist/netbox-light.css vendored
View File

Binary file not shown.

2
netbox/project-static/dist/netbox-light.css.map vendored
View File

File diff suppressed because one or more lines are too long

12
netbox/project-static/styles/netbox.scss
View File

@ -879,3 +879,15 @@ div.card > div.card-header > div.table-controls {
font-size: $font-size-sm;
}
}
// Tabbed content
.nav-tabs {
.nav-link.active {
background-color: $tab-content-bg;
border-bottom-color: $tab-content-bg;
}
}
.tab-content {
background-color: $tab-content-bg;
padding: $spacer;
}

3
netbox/project-static/styles/theme-dark.scss
View File

@ -271,3 +271,6 @@ $code-color: $gray-200;
$kbd-color: $white;
$kbd-bg: $gray-300;
$pre-color: null;
// Tabbed content
$tab-content-bg: $gray-900;

3
netbox/project-static/styles/theme-light.scss
View File

@ -25,3 +25,6 @@ $list-group-color: $gray-700;
$list-group-disabled-color: $gray-500;
$table-flush-header-bg: $gray-100;
// Tabbed content
$tab-content-bg: $gray-100;

8
netbox/templates/base/layout.html
View File

@ -138,9 +138,11 @@
{# Page content #}
<div id="content" class="container-fluid content px-0 m-0">
{% block tabs %}{% endblock %}
<div class="px-3">
{% block content %}{% endblock %}
</div>
{% block content-wrapper %}
<div class="px-3">
{% block content %}{% endblock %}
</div>
{% endblock %}
</div>
{% if settings.BANNER_BOTTOM %}

2
netbox/templates/circuits/circuittermination_edit.html
View File

@ -27,7 +27,7 @@
</div>
{% render_field form.mark_connected %}
{% with providernetwork_tab_active=form.initial.provider_network %}
<ul class="nav nav-tabs mb-3" role="tablist">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
</li>

6
netbox/templates/dcim/device/config.html
View File

@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col col-md-10">
<div class="col">
<div class="card">
<div class="card-overlay">
<div class="spinner-border" role="status">
@ -18,12 +18,12 @@
</div>
<h5 class="card-header">Device Configuration</h5>
<div class="card-body">
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-pills" role="tablist">
<li role="presentation"><a class="nav-link active" href="#running" aria-controls="running" role="tab" data-bs-toggle="tab">Running</a></li>
<li role="presentation"><a class="nav-link" href="#startup" aria-controls="startup" role="tab" data-bs-toggle="tab">Startup</a></li>
<li role="presentation"><a class="nav-link" href="#candidate" aria-controls="candidate" role="tab" data-bs-toggle="tab">Candidate</a></li>
</ul>
<div class="tab-content pt-3">
<div class="tab-content p-3">
<div role="tabpanel" class="tab-pane active" id="running">
<pre id="running_config"></pre>
</div>

2
netbox/templates/dcim/device_import.html
View File

@ -1,5 +1,5 @@
{% extends 'generic/object_bulk_import.html' %}
{% block tabs %}
{% include 'dcim/inc/device_import_header.html' %}
{% include 'dcim/inc/device_import_header.html' %}
{% endblock %}

2
netbox/templates/dcim/device_import_child.html
View File

@ -1,5 +1,5 @@
{% extends 'generic/object_bulk_import.html' %}
{% block tabs %}
{% include 'dcim/inc/device_import_header.html' with active_tab='child_import' %}
{% include 'dcim/inc/device_import_header.html' with active_tab='child_import' %}
{% endblock %}

4
netbox/templates/dcim/devicetype.html
View File

@ -148,7 +148,7 @@
</div>
<div class="row my-3">
<div class="col col-md-12">
<ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-target="#interfaces" role="tab" data-bs-toggle="tab">
Interfaces {% badge interface_table.rows|length %}
@ -190,7 +190,7 @@
</button>
</li>
</ul>
<div class="tab-content my-3">
<div class="tab-content p-0">
<div role="tabpanel" class="tab-pane active" id="interfaces">
{% include 'dcim/inc/devicetype_component_table.html' with table=interface_table title='Interfaces' tab='interfaces' %}
</div>

2
netbox/templates/dcim/inc/device_import_header.html
View File

@ -1,4 +1,4 @@
<ul class="nav nav-tabs justify-content-center" 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 'dcim:device_import' %}">Racked Devices</a>
</li>

52
netbox/templates/generic/object.html
View File

@ -52,29 +52,35 @@
{% endblock controls %}
{% block tabs %}
<ul class="nav nav-tabs mb-3 px-3">
{% block tab_items %}
<li class="nav-item" role="presentation">
<a class="nav-link{% if not active_tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
</li>
{% endblock tab_items %}
{% if perms.extras.view_journalentry %}
{% with journal_viewname=object|viewname:'journal' %}
{% url journal_viewname pk=object.pk as journal_url %}
{% if journal_url %}
<li role="presentation" class="nav-item">
<a href="{{ journal_url }}" class="nav-link{% if active_tab == 'journal'%} active{% endif %}">Journal</a>
<ul class="nav nav-tabs px-3">
{% block tab_items %}
<li class="nav-item" role="presentation">
<a class="nav-link{% if not active_tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
</li>
{% endblock tab_items %}
{% if perms.extras.view_journalentry %}
{% with journal_viewname=object|viewname:'journal' %}
{% url journal_viewname pk=object.pk as journal_url %}
{% if journal_url %}
<li role="presentation" class="nav-item">
<a href="{{ journal_url }}" class="nav-link{% if active_tab == 'journal'%} active{% endif %}">Journal</a>
</li>
{% endif %}
{% endwith %}
{% endif %}
{% endwith %}
{% endif %}
{% if perms.extras.view_objectchange %}
{% with changelog_viewname=object|viewname:'changelog' %}
{% url changelog_viewname pk=object.pk as changelog_url %}
<li role="presentation" class="nav-item">
<a href="{{ changelog_url }}" class="nav-link{% if active_tab == 'changelog'%} active{% endif %}">Change Log</a>
</li>
{% endwith %}
{% endif %}
</ul>
{% if perms.extras.view_objectchange %}
{% with changelog_viewname=object|viewname:'changelog' %}
{% url changelog_viewname pk=object.pk as changelog_url %}
<li role="presentation" class="nav-item">
<a href="{{ changelog_url }}" class="nav-link{% if active_tab == 'changelog'%} active{% endif %}">Change Log</a>
</li>
{% endwith %}
{% endif %}
</ul>
{% endblock tabs %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}{% endblock %}
</div>
{% endblock %}

64
netbox/templates/generic/object_bulk_edit.html
View File

@ -5,7 +5,7 @@
{% block title %}Editing {{ table.rows|length }} {{ obj_type_plural|bettertitle }}{% endblock %}
{% block tabs %}
<ul class="nav nav-tabs mb-3 px-3">
<ul class="nav nav-tabs px-3">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="edit-form-tab" data-bs-toggle="tab" data-bs-target="#edit-form" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
Bulk Edit
@ -20,46 +20,48 @@
</ul>
{% endblock %}
{% block content %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}
{# Edit form #}
<div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab">
<form action="" method="post" class="form form-horizontal">
{# Edit form #}
<div class="tab-pane show active" id="edit-form" role="tabpanel" aria-labelledby="edit-form-tab">
<form action="" method="post" class="form form-horizontal">
{% csrf_token %}
{% if request.POST.return_url %}
<input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
{% endif %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
{% csrf_token %}
{% if request.POST.return_url %}
<input type="hidden" name="return_url" value="{{ request.POST.return_url }}" />
{% endif %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
<div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1">
{% for field in form.visible_fields %}
{% if field.name in form.nullable_fields %}
{% render_field field bulk_nullable=True %}
{% else %}
{% render_field field %}
{% endif %}
{% endfor %}
<div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1">
{% for field in form.visible_fields %}
{% if field.name in form.nullable_fields %}
{% render_field field bulk_nullable=True %}
{% else %}
{% render_field field %}
{% endif %}
{% endfor %}
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
<button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
<div class="text-end">
<a href="{{ return_url }}" class="btn btn-sm btn-outline-danger">Cancel</a>
<button type="submit" name="_apply" class="btn btn-sm btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
{# Selected objects list #}
<div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
{% include 'inc/table.html' %}
</div>
{# Selected objects list #}
<div class="tab-pane" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
{% include 'inc/table.html' %}
</div>
{% endblock %}
</div>
{% endblock %}

229
netbox/templates/generic/object_bulk_import.html
View File

@ -4,127 +4,130 @@
{% block title %}{{ obj_type|bettertitle }} Bulk Import{% endblock %}
{% block content %}
<div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1">
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item" role="presentation">
<a href="#csv" class="nav-link active" role="tab" data-bs-toggle="tab">CSV</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="csv">
<form action="" method="post" class="form">
{% csrf_token %}
{% render_form form %}
<div class="form-group">
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
<button type="submit" class="btn btn-primary">Submit</button>
</div>
{% block tabs %}
<ul class="nav nav-tabs px-3">
<li class="nav-item" role="presentation">
<a class ="nav-link active" href="#">Bulk Import</a>
</li>
</ul>
{% endblock %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}
<div class="row">
<div class="col col-md-12 col-lg-10 offset-lg-1">
<form action="" method="post" class="form">
{% csrf_token %}
{% render_form form %}
<div class="form-group">
<div class="col col-md-12 text-end">
{% if return_url %}
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
{% endif %}
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
{% if fields %}
<div class="row my-3">
<div class="col col-md-12">
<div class="card">
<h5 class="card-header">
CSV Field Options
</h5>
<div class="card-body">
<table class="table">
</div>
</form>
{% if fields %}
<div class="row my-3">
<div class="col col-md-12">
<div class="card">
<h5 class="card-header">
CSV Field Options
</h5>
<div class="card-body">
<table class="table">
<tr>
<th>Field</th>
<th>Required</th>
<th>Accessor</th>
<th>Description</th>
</tr>
{% for name, field in fields.items %}
<tr>
<th>Field</th>
<th>Required</th>
<th>Accessor</th>
<th>Description</th>
</tr>
{% for name, field in fields.items %}
<tr>
<td>
<code>{{ name }}</code>
</td>
<td>
{% if field.required %}
<i class="mdi mdi-check-bold text-success" title="Required"></i>
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>
{% if field.to_field_name %}
<code>{{ field.to_field_name }}</code>
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>
{% if field.STATIC_CHOICES %}
<button type="button" class="btn btn-link btn-sm float-end" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices">
<i class="mdi mdi-help-circle"></i>
</button>
<div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><code>{{ name }}</code> Choices</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table table-striped">
<tr>
<th>Import Value</th>
<th>Label</th>
</tr>
{% for value, label in field.choices %}
{% if value %}
<tr>
<td>
<samp>{{ value }}</samp>
</td>
<td>
{{ label }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
<td>
<code>{{ name }}</code>
</td>
<td>
{% if field.required %}
<i class="mdi mdi-check-bold text-success" title="Required"></i>
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>
{% if field.to_field_name %}
<code>{{ field.to_field_name }}</code>
{% else %}
<span class="text-muted">&mdash;</span>
{% endif %}
</td>
<td>
{% if field.STATIC_CHOICES %}
<button type="button" class="btn btn-link btn-sm float-end" data-bs-toggle="modal" data-bs-target="#{{ name }}_choices">
<i class="mdi mdi-help-circle"></i>
</button>
<div class="modal fade" id="{{ name }}_choices" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><code>{{ name }}</code> Choices</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<table class="table table-striped">
<tr>
<th>Import Value</th>
<th>Label</th>
</tr>
{% for value, label in field.choices %}
{% if value %}
<tr>
<td>
<samp>{{ value }}</samp>
</td>
<td>
{{ label }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
</div>
</div>
{% endif %}
{% if field.help_text %}
{{ field.help_text }}<br />
{% elif field.label %}
{{ field.label }}<br />
{% endif %}
{% if field|widget_type == 'dateinput' %}
<small class="text-muted">Format: YYYY-MM-DD</small>
{% elif field|widget_type == 'checkboxinput' %}
<small class="text-muted">Specify "true" or "false"</small>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
{% endif %}
{% if field.help_text %}
{{ field.help_text }}<br />
{% elif field.label %}
{{ field.label }}<br />
{% endif %}
{% if field|widget_type == 'dateinput' %}
<small class="text-muted">Format: YYYY-MM-DD</small>
{% elif field|widget_type == 'checkboxinput' %}
<small class="text-muted">Specify "true" or "false"</small>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
<p class="small text-muted">
<i class="mdi mdi-check-bold text-success"></i> Required fields <strong>must</strong> be specified for all
objects.
</p>
<p class="small text-muted">
<i class="mdi mdi-information-outline"></i> Related objects may be referenced by any unique attribute.
For example, <code>vrf.rd</code> would identify a VRF by its route distinguisher.
</p>
{% endif %}
</div>
<p class="small text-muted">
<i class="mdi mdi-check-bold text-success"></i> Required fields <strong>must</strong> be specified for all
objects.
</p>
<p class="small text-muted">
<i class="mdi mdi-information-outline"></i> Related objects may be referenced by any unique attribute.
For example, <code>vrf.rd</code> would identify a VRF by its route distinguisher.
</p>
{% endif %}
</div>
</div>
</div>
{% endblock content %}
{% endblock content %}
</div>
{% endblock %}

2
netbox/templates/generic/object_edit.html
View File

@ -60,7 +60,7 @@
</div>
<div class="row my-3">
<div class="col col-md-8 offset-md-2 col-lg-6 offset-lg-3 text-end">
<div class="col col-md-12 col-lg-10 offset-lg-1 text-end">
{% block buttons %}
<a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>

7
netbox/templates/ipam/ipaddress_edit.html
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">

8
netbox/templates/ipam/vlan/base.html
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 %}

2
netbox/templates/ipam/vlan_edit.html
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>