mirror/netbox-community-netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2024-05-10 07:54:54 +00:00
Code Activity

Improve object list layout (#6907)

Browse Source 
* Split object list and filters into tabs

* Use object_list template for connections, rack elevations

* Include custom field filters in grouped filter form

* Annotate number of applied filters on tab

* Rearrange table controls
This commit is contained in:
Jeremy Stretch
2021-08-06 15:35:14 -04:00
committed by GitHub
parent 6ce8dd5ac3
commit 939bcfec4b
7 changed files with 250 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
netbox/templates/dcim/connections_list.html
View File

@@ -1,24 +1,34 @@
{% extends 'base/layout.html' %}
{% extends 'generic/object_list.html' %}
{% load buttons %}
{% load helpers %}
{% load render_table from django_tables2 %}
{% block title %}{{ title }}{% endblock %}
{% block extra_controls %}{% export_button content_type %}{% endblock %}
{% block content-wrapper %}
<div class="tab-content">
{% block content %}
<div class="row mb-3">
<div class="col col-md-7 col-lg-8 col-xl-9 col-xxl-10">
{% include 'inc/table_controls.html' %}
{# Conncetions list #}
<div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
{% include 'inc/table_controls.html' %}
<div class="table-responsive">
{% render_table table 'inc/table.html' %}
</div>
{% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
<div class="card">
<div class="card-body">
<div class="table-responsive">
{% render_table table 'inc/table.html' %}
</div>
</div>
{% if filter_form %}
{% include 'inc/filter_list.html' %}
{% endif %}
</div>
{% include 'inc/paginator.html' with paginator=table.paginator page=table.page %}
</div>
{% endblock %}
{# Filter form #}
{% if filter_form %}
<div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
{% include 'inc/filter_list.html' %}
</div>
{% endif %}
</div>
{% endblock content-wrapper %}

85
netbox/templates/dcim/rack_elevation_list.html
View File

@@ -1,4 +1,4 @@
{% extends 'base/layout.html' %}
{% extends 'generic/object_list.html' %}
{% load helpers %}
{% load static %}
@@ -22,41 +22,50 @@
</div>
{% endblock %}
{% block content %}
<div class="row">
<div class="col col-md-7 col-lg-8 col-xl-9 col-xxl-10">
{% if page %}
<div style="white-space: nowrap; overflow-x: scroll;">
{% for rack in page %}
<div style="display: inline-block; margin-right: 12px; width: 254px">
<div style="margin-left: 30px">
<div class="text-center">
<strong><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></strong>
{% if rack.role %}
<br /><span class="badge my-3" style="color: {{ rack.role.color|fgcolor }}; background-color: #{{ rack.role.color }}">{{ rack.role }}</span>
{% endif %}
{% if rack.facility_id %}
<br /><small class="text-muted">{{ rack.facility_id }}</small>
{% endif %}
</div>
{% include 'dcim/inc/rack_elevation.html' with object=rack face=rack_face %}
<div class="clearfix"></div>
<div class="text-center">
<strong><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></strong>
{% if rack.facility_id %}
<small class="text-muted">({{ rack.facility_id }})</small>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
<br />
{% include 'inc/paginator.html' %}
{% else %}
<p>No Racks Found</p>
{% endif %}
</div>
{% include 'inc/filter_list.html' %}
{% block content-wrapper %}
<div class="tab-content">
{# Rack elevations #}
<div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
{% if page %}
<div style="white-space: nowrap; overflow-x: scroll;">
{% for rack in page %}
<div style="display: inline-block; margin-right: 12px; width: 254px">
<div style="margin-left: 30px">
<div class="text-center">
<strong><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></strong>
{% if rack.role %}
<br /><span class="badge my-3" style="color: {{ rack.role.color|fgcolor }}; background-color: #{{ rack.role.color }}">{{ rack.role }}</span>
{% endif %}
{% if rack.facility_id %}
<br /><small class="text-muted">{{ rack.facility_id }}</small>
{% endif %}
</div>
{% include 'dcim/inc/rack_elevation.html' with object=rack face=rack_face %}
<div class="clearfix"></div>
<div class="text-center">
<strong><a href="{% url 'dcim:rack' pk=rack.pk %}">{{ rack.name }}</a></strong>
{% if rack.facility_id %}
<small class="text-muted">({{ rack.facility_id }})</small>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
<br />
{% include 'inc/paginator.html' %}
{% else %}
<p>No Racks Found</p>
{% endif %}
</div>
{% endblock %}
{# Filter form #}
{% if filter_form %}
<div class="tab-pane show" id="filters-form" role="tabpanel" aria-labelledby="filters-form-tab">
{% include 'inc/filter_list.html' %}
</div>
{% endif %}
</div>
{% endblock content-wrapper %}