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

bootstrap 5 template updates

This commit is contained in:
checktheroads
2021-03-15 08:54:01 -07:00
parent a303a0dfb7
commit 683f75fad1
3 changed files with 190 additions and 230 deletions

View File

@ -1,116 +1,88 @@
{% extends 'base.html' %}
{% extends 'layout.html' %}
{% load static %}
{% load helpers %}
{% load form_helpers %}
{% block title %}Connect {{ form.instance.termination_a.device }} {{ form.instance.termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}
{% block content %}
<form method="post" class="form form-horizontal">
{% with termination_a=form.instance.termination_a %}
{% render_errors form %}
<form method="post">
{% csrf_token %}
{% for field in form.hidden_fields %}
{{ field }}
{% endfor %}
{% if form.non_field_errors %}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-danger">
<div class="panel-heading"><strong>Errors</strong></div>
<div class="panel-body">
{{ form.non_field_errors }}
</div>
</div>
</div>
</div>
{% endif %}
{% with termination_a=form.instance.termination_a %}
<h3>{% block title %}Connect {{ termination_a.device }} {{ termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}</h3>
<div class="row">
<div class="row my-3">
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading text-center">
<strong>A Side</strong>
</div>
<div class="panel-body">
<div class="card h-100">
<h5 class="card-header">
A Side
</h5>
<div class="card-body">
{% if termination_a.device %}
{# Device component #}
<div class="form-group">
<label class="col-md-3 control-label required">Region</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.device.site.region }}</p>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
<label>Region</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.device.site }}" disabled />
<label>Site</label>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Site</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.device.site }}</p>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
<label>Rack</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.device }}" disabled />
<label>Device</label>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Rack</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.device.rack|default:"None" }}</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Device</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.device }}</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Type</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a|meta:"verbose_name"|capfirst }}</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Name</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a }}</p>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
<label>Type</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a }}" disabled />
<label>Name</label>
</div>
{% else %}
{# Circuit termination #}
<div class="form-group">
<label class="col-md-3 control-label required">Site</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.site }}</p>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.site }}" disabled />
<label>Site</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
<label>Provider</label>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Provider</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.circuit.provider }}</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Circuit</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.circuit.cid }}</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label required">Side</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_a.term_side }}</p>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
<label>Circuit</label>
</div>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_a.term_side }}" disabled />
<label>Side</label>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-md-2 text-center" style="padding-top: 90px;">
<div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
<i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
</div>
<div class="col-md-5">
<div class="panel panel-default">
<div class="panel-heading text-center">
<strong>B Side</strong>
</div>
<div class="panel-body">
<div class="card h-100">
<h5 class="card-header">
B Side
</h5>
<div class="card-body">
{% if tabs %}
<ul class="nav nav-tabs">
{% for url, link in tabs %}
<li role="presentation"><a href="{{ url }}">{{ link }}</a></li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="{{ url }}">{{ link }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
@ -141,28 +113,26 @@
{% if 'termination_b_circuit' in form.fields %}
{% render_field form.termination_b_circuit %}
{% endif %}
<div class="form-group">
<label class="col-md-3 control-label required">Type</label>
<div class="col-md-9">
<p class="form-control-static">{{ termination_b_type|capfirst }}</p>
</div>
<div class="form-floating mb-3">
<input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
<label>Type</label>
</div>
{% render_field form.termination_b_id %}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row my-3 justify-content-center">
<div class="col-md-8">
{% include 'dcim/inc/cable_form.html' %}
</div>
</div>
<div class="form-group">
<div class="row my-3">
<div class="col-md-12 text-center">
<a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
<button type="submit" name="_update" class="btn btn-primary">Connect</button>
<a href="{{ return_url }}" class="btn btn-default">Cancel</a>
</div>
</div>
{% endwith %}
</form>
{% endwith %}
{% endblock %}

View File

@ -1,39 +1,25 @@
{% load form_helpers %}
<div class="field-group">
<h4>Cable</h4>
<div class="card">
<h5 class="card-header">Cable</h5>
<div class="card-body">
{% render_field form.status %}
{% render_field form.type %}
{% render_field form.label %}
{% render_field form.color %}
<div class="field-group">
<label class="col-md-3 control-label" for="id_length">{{ form.length.label }}</label>
<div class="col-md-5">
{{ form.length }}
{% if form.length.errors %}
<ul>
{% for error in form.length.errors %}
<li class="text-danger">{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
<div class="row">
<div class="col">
{% render_field form.length %}
</div>
<div class="col-md-4">
{{ form.length_unit }}
{% if form.length_unit.errors %}
<ul>
{% for error in form.length_unit.errors %}
<li class="text-danger">{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
<div class="col">
{% render_field form.length_unit %}
</div>
</div>
{% render_field form.tags %}
</div>
{% if form.custom_fields %}
<div class="field-group">
<h4>Custom Fields</h4>
{% render_custom_fields form %}
</div>
{% endif %}
</div>
</div>

View File

@ -5,11 +5,11 @@
{% load plugins %}
{% block breadcrumbs %}
<li><a href="{% url 'dcim:virtualchassis_list' %}">Virtual Chassis</a></li>
<li class="breadcrumb-item"><a href="{% url 'dcim:virtualchassis_list' %}">Virtual Chassis</a></li>
{% if object.master %}
<li><a href="{% url 'dcim:virtualchassis_list' %}?site={{ object.master.site.slug }}">{{ object.master.site }}</a></li>
<li class="breadcrumb-item"><a href="{% url 'dcim:virtualchassis_list' %}?site={{ object.master.site.slug }}">{{ object.master.site }}</a></li>
{% endif %}
<li>{{ object }}</li>
<li class="breadcrumb-item">{{ object }}</li>
{% endblock %}
{% block buttons %}
@ -24,17 +24,18 @@
{% block content %}
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Virtual Chassis</strong>
</div>
<table class="table table-hover panel-body attr-table">
<div class="card">
<h5 class="card-header">
Virtual Chassis
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<td>Domain</td>
<th scope="row">Domain</th>
<td>{{ object.domain|placeholder }}</td>
</tr>
<tr>
<td>Master</td>
<th scope="row">Master</th>
<td>
{% if object.master %}
<a href="{{ object.master.get_absolute_url }}">{{ object.master }}</a>
@ -45,16 +46,18 @@
</tr>
</table>
</div>
</div>
{% include 'inc/custom_fields_panel.html' %}
{% include 'extras/inc/tags_panel.html' with tags=object.tags.all url='dcim:virtualchassis_list' %}
{% plugin_left_page object %}
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<strong>Members</strong>
</div>
<table class="table table-hover panel-body attr-table">
<div class="card">
<h5 class="card-header">
Members
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr>
<th>Device</th>
<th>Position</th>
@ -72,10 +75,11 @@
</tr>
{% endfor %}
</table>
</div>
{% if perms.dcim.change_virtualchassis %}
<div class="panel-footer text-right noprint">
<a href="{% url 'dcim:virtualchassis_add_member' pk=object.pk %}?site={{ object.master.site.pk }}&rack={{ object.master.rack.pk }}" class="btn btn-primary btn-xs">
<span class="mdi mdi-plus-thick" aria-hidden="true"></span> Add Member
<div class="card-footer text-end noprint">
<a href="{% url 'dcim:virtualchassis_add_member' pk=object.pk %}?site={{ object.master.site.pk }}&rack={{ object.master.rack.pk }}" class="btn btn-primary btn-sm">
<i class="bi bi-plus" aria-hidden="true"></i> Add Member
</a>
</div>
{% endif %}