update templates to bootstrap 5 classes

This commit is contained in:
checktheroads 2021-03-14 01:06:18 -07:00
parent 362392d1de
commit 991f71bf28
9 changed files with 259 additions and 234 deletions

View File

@ -313,3 +313,18 @@ div.field-group:not(:first-of-type) {
margin-bottom: $spacer; margin-bottom: $spacer;
} }
} }
label.required {
font-weight: $font-weight-bold;
&::after {
font-family: bootstrap-icons;
content: '\f151';
font-weight: normal;
font-size: 8px;
font-style: normal;
margin: 0 0 0 2px;
text-decoration: none;
display: inline-block;
position: absolute;
}
}

View File

@ -17,8 +17,7 @@
/> />
</head> </head>
<body> <body>
{% comment %} {% include './layout.html' %} {% endcomment %} {% comment %} {% block layout %}{% endblock %}
{% endcomment %} {% block layout %}{% endblock %}
<script <script
src="{% static 'netbox.js' %}" src="{% static 'netbox.js' %}"
onerror="window.location='{% url 'media_failure' %}?filename=netbox.js'" onerror="window.location='{% url 'media_failure' %}?filename=netbox.js'"

View File

@ -319,6 +319,11 @@
<div class="card-body"> <div class="card-body">
{% if related_devices %} {% if related_devices %}
<table class="table table-hover"> <table class="table table-hover">
<tr>
<th>Device</th>
<th>Rack</th>
<th>Type</th>
</tr>
{% for rd in related_devices %} {% for rd in related_devices %}
<tr> <tr>
<td> <td>
@ -326,7 +331,7 @@
</td> </td>
<td> <td>
{% if rd.rack %} {% if rd.rack %}
<a href="{% url 'dcim:rack' pk=rd.rack.pk %}">Rack {{ rd.rack }}</a> <a href="{% url 'dcim:rack' pk=rd.rack.pk %}">{{ rd.rack }}</a>
{% else %} {% else %}
<span class="text-muted">&mdash;</span> <span class="text-muted">&mdash;</span>
{% endif %} {% endif %}

View File

@ -2,6 +2,8 @@
{% load form_helpers %} {% load form_helpers %}
{% block form %} {% block form %}
{% render_errors form %}
<div class="field-group"> <div class="field-group">
<h4 >Device</h4> <h4 >Device</h4>
{% render_field form.name %} {% render_field form.name %}

View File

@ -1,12 +1,11 @@
{% load form_helpers %} {% load form_helpers %}
<div class="panel panel-default"> <div class="field-group">
<div class="panel-heading"><strong>Cable</strong></div> <h4>Cable</h4>
<div class="panel-body">
{% render_field form.status %} {% render_field form.status %}
{% render_field form.type %} {% render_field form.type %}
{% render_field form.label %} {% render_field form.label %}
{% render_field form.color %} {% render_field form.color %}
<div class="form-group"> <div class="field-group">
<label class="col-md-3 control-label" for="id_length">{{ form.length.label }}</label> <label class="col-md-3 control-label" for="id_length">{{ form.length.label }}</label>
<div class="col-md-5"> <div class="col-md-5">
{{ form.length }} {{ form.length }}
@ -30,13 +29,11 @@
</div> </div>
</div> </div>
{% render_field form.tags %} {% render_field form.tags %}
</div>
</div> </div>
{% if form.custom_fields %} {% if form.custom_fields %}
<div class="panel panel-default"> <div class="field-group">
<div class="panel-heading"><strong>Custom Fields</strong></div> <h4>Custom Fields</h4>
<div class="panel-body">
{% render_custom_fields form %} {% render_custom_fields form %}
</div> </div>
</div>
{% endif %} {% endif %}

View File

@ -3,36 +3,37 @@
{% load static %} {% load static %}
{% block breadcrumbs %} {% block breadcrumbs %}
<li><a href="{% url 'extras:configcontext_list' %}">Config Contexts</a></li> <li class="breadcrumb-item"><a href="{% url 'extras:configcontext_list' %}">Config Contexts</a></li>
<li>{{ object }}</li> <li class="breadcrumb-item">{{ object }}</li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-md-5"> <div class="col-md-5">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <h5 class="card-header">
<strong>Config Context</strong> Config Context
</div> </h5>
<table class="table table-hover panel-body attr-table"> <div class="card-body">
<table class="table table-hover attr-table">
<tr> <tr>
<td>Name</td> <th scope="row">Name</th>
<td> <td>
{{ object.name }} {{ object.name }}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Weight</td> <th scope="row">Weight</th>
<td> <td>
{{ object.weight }} {{ object.weight }}
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Description</td> <th scope="row">Description</th>
<td>{{ object.description|placeholder }}</td> <td>{{ object.description|placeholder }}</td>
</tr> </tr>
<tr> <tr>
<td>Active</td> <th scope="row">Active</th>
<td> <td>
{% if object.is_active %} {% if object.is_active %}
<span class="text-success"> <span class="text-success">
@ -47,13 +48,15 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="panel panel-default">
<div class="panel-heading">
<strong>Assignment</strong>
</div> </div>
<table class="table table-hover panel-body attr-table"> <div class="card">
<h5 class="card-header">
Assignment
</h5>
<div class="card-body">
<table class="table table-hover attr-table">
<tr> <tr>
<td>Regions</td> <th scope="row">Regions</th>
<td> <td>
{% if object.regions.all %} {% if object.regions.all %}
<ul> <ul>
@ -67,7 +70,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Sites</td> <th scope="row">Sites</th>
<td> <td>
{% if object.sites.all %} {% if object.sites.all %}
<ul> <ul>
@ -81,7 +84,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Roles</td> <th scope="row">Roles</th>
<td> <td>
{% if object.roles.all %} {% if object.roles.all %}
<ul> <ul>
@ -95,7 +98,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Platforms</td> <th scope="row">Platforms</th>
<td> <td>
{% if object.platforms.all %} {% if object.platforms.all %}
<ul> <ul>
@ -109,7 +112,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Cluster Groups</td> <th scope="row">Cluster Groups</th>
<td> <td>
{% if object.cluster_groups.all %} {% if object.cluster_groups.all %}
<ul> <ul>
@ -123,7 +126,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Clusters</td> <th scope="row">Clusters</th>
<td> <td>
{% if object.clusters.all %} {% if object.clusters.all %}
<ul> <ul>
@ -137,7 +140,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Tenant Groups</td> <th scope="row">Tenant Groups</th>
<td> <td>
{% if object.tenant_groups.all %} {% if object.tenant_groups.all %}
<ul> <ul>
@ -151,7 +154,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Tenants</td> <th scope="row">Tenants</th>
<td> <td>
{% if object.tenants.all %} {% if object.tenants.all %}
<ul> <ul>
@ -165,7 +168,7 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Tags</td> <th scope="row">Tags</th>
<td> <td>
{% if object.tags.all %} {% if object.tags.all %}
<ul> <ul>
@ -181,13 +184,14 @@
</table> </table>
</div> </div>
</div> </div>
</div>
<div class="col-md-7"> <div class="col-md-7">
<div class="panel panel-default"> <div class="card">
<div class="panel-heading"> <div class="card-header">
<strong>Data</strong> <h5>Data</h5>
{% include 'extras/inc/configcontext_format.html' %} {% include 'extras/inc/configcontext_format.html' %}
</div> </div>
<div class="panel-body"> <div class="card-body">
{% include 'extras/inc/configcontext_data.html' with data=object.data format=format %} {% include 'extras/inc/configcontext_data.html' with data=object.data format=format %}
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
<div class="pull-right"> <div class="float-end">
<div class="btn-group btn-group-xs" role="group"> <div class="btn-group btn-group-sm" role="group">
<a href="?format=json" class="btn btn-default{% if format == 'json' %} active{% endif %}">JSON</a> <a href="?format=json" type="button" class="btn btn-outline-dark{% if format == 'json' %} active{% endif %}">JSON</a>
<a href="?format=yaml" class="btn btn-default{% if format == 'yaml' %} active{% endif %}">YAML</a> <a href="?format=yaml" type="button" class="btn btn-outline-dark{% if format == 'yaml' %} active{% endif %}">YAML</a>
</div> </div>
</div> </div>

View File

@ -11,7 +11,7 @@
{% block breadcrumb_main %} {% block breadcrumb_main %}
<nav class="breadcrumb-container" aria-label="breadcrumb"> <nav class="breadcrumb-container" aria-label="breadcrumb">
<ol class="breadcrumb"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="/">Home</a></li>
{% block breadcrumbs %}{%endblock%} {% block breadcrumbs %}{%endblock%}
</ol> </ol>
</nav> </nav>

View File

@ -5,33 +5,36 @@
{% block content %} {% block content %}
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8">
<div class="card bg-danger"> <div class="alert alert-danger mb-3" role="alert">
<h5 class="card-header">Confirm Bulk Deletion</h5> <h4 class="alert-heading">Confirm Bulk Deletion</h4>
<div class="card-body"> <hr />
<p><strong>Warning:</strong> The following operation will delete {{ table.rows|length }} {{ obj_type_plural }}. Please carefully review the {{ obj_type_plural }} to be deleted and confirm below.</p> <div>
<strong>Warning:</strong> The following operation will delete <strong>{{ table.rows|length }}</strong> {{ obj_type_plural }}. Please carefully review the {{ obj_type_plural }} to be deleted and confirm below.
</div>
{% block message_extra %}{% endblock %} {% block message_extra %}{% endblock %}
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row"> <div class="row">
<div class="col-md-8 col-md-offset-2"> <div class="col-md-8">
<div class="card"> <div class="card">
<div class="card-body">
{% include 'inc/table.html' %} {% include 'inc/table.html' %}
</div> </div>
</div> </div>
</div> </div>
<div class="row"> </div>
<div class="col-md-6 col-md-offset-3"> <div class="row mt-3">
<form action="" method="post" class="form"> <div class="col-md-8">
<form action="" method="post">
{% csrf_token %} {% csrf_token %}
{% for field in form.hidden_fields %} {% for field in form.hidden_fields %}
{{ field }} {{ field }}
{% endfor %} {% endfor %}
<div class="text-center"> <div class="text-end">
<button type="submit" name="_confirm" class="btn btn-danger">Delete these {{ table.rows|length }} {{ obj_type_plural }}</button> <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
<a href="{{ return_url }}" class="btn btn-default">Cancel</a> <button type="submit" name="_confirm" class="btn btn-danger">Delete {{ table.rows|length }} {{ obj_type_plural }}</button>
</div> </div>
</form> </form>
</div> </div>