Просмотр исходного кода

update templates to bootstrap 5 classes

checktheroads 5 лет назад
Родитель
Сommit
991f71bf28

+ 15 - 0
netbox/project-static/netbox.scss

@@ -313,3 +313,18 @@ div.field-group:not(:first-of-type) {
     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;
+  }
+}

+ 1 - 2
netbox/templates/base.html

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

+ 6 - 1
netbox/templates/dcim/device.html

@@ -319,6 +319,11 @@
                                 <div class="card-body">
                                     {% if related_devices %}
                                     <table class="table table-hover">
+                                        <tr>
+                                            <th>Device</th>
+                                            <th>Rack</th>
+                                            <th>Type</th>
+                                        </tr>
                                         {% for rd in related_devices %}
                                         <tr>
                                             <td>
@@ -326,7 +331,7 @@
                                             </td>
                                             <td>
                                                 {% 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 %}
                                                     <span class="text-muted">&mdash;</span>
                                                 {% endif %}

+ 2 - 0
netbox/templates/dcim/device_edit.html

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

+ 33 - 36
netbox/templates/dcim/inc/cable_form.html

@@ -1,42 +1,39 @@
 {% load form_helpers %}
-<div class="panel panel-default">
-    <div class="panel-heading"><strong>Cable</strong></div>
-    <div class="panel-body">
-        {% render_field form.status %}
-        {% render_field form.type %}
-        {% render_field form.label %}
-        {% render_field form.color %}
-        <div class="form-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>
-            <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>
+<div class="field-group">
+    <h4>Cable</h4>
+    {% 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>
+        <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>
-        {% render_field form.tags %}
     </div>
+    {% render_field form.tags %}
+    
 </div>
 {% if form.custom_fields %}
-    <div class="panel panel-default">
-        <div class="panel-heading"><strong>Custom Fields</strong></div>
-        <div class="panel-body">
-            {% render_custom_fields form %}
-        </div>
-    </div>
+<div class="field-group">
+    <h4>Custom Fields</h4>
+    {% render_custom_fields form %}
+</div>
 {% endif %}

+ 176 - 172
netbox/templates/extras/configcontext.html

@@ -3,191 +3,195 @@
 {% load static %}
 
 {% block breadcrumbs %}
-  <li><a href="{% url 'extras:configcontext_list' %}">Config Contexts</a></li>
-  <li>{{ object }}</li>
+  <li class="breadcrumb-item"><a href="{% url 'extras:configcontext_list' %}">Config Contexts</a></li>
+  <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
 {% block content %}
     <div class="row">
         <div class="col-md-5">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Config Context</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Config Context
+                </h5>
+                <div class="card-body">
+                    <table class="table table-hover attr-table">
+                        <tr>
+                            <th scope="row">Name</th>
+                            <td>
+                                {{ object.name }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Weight</th>
+                            <td>
+                                {{ object.weight }}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Description</th>
+                            <td>{{ object.description|placeholder }}</td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Active</th>
+                            <td>
+                                {% if object.is_active %}
+                                    <span class="text-success">
+                                        <i class="mdi mdi-check-bold"></i>
+                                    </span>
+                                {% else %}
+                                    <span class="text-danger">
+                                        <i class="mdi mdi-close"></i>
+                                    </span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    </table>
                 </div>
-                <table class="table table-hover panel-body attr-table">
-                    <tr>
-                        <td>Name</td>
-                        <td>
-                            {{ object.name }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Weight</td>
-                        <td>
-                            {{ object.weight }}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Description</td>
-                        <td>{{ object.description|placeholder }}</td>
-                    </tr>
-                    <tr>
-                        <td>Active</td>
-                        <td>
-                            {% if object.is_active %}
-                                <span class="text-success">
-                                    <i class="mdi mdi-check-bold"></i>
-                                </span>
-                            {% else %}
-                                <span class="text-danger">
-                                    <i class="mdi mdi-close"></i>
-                                </span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                </table>
             </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Assignment</strong>
+            <div class="card">
+                <h5 class="card-header">
+                    Assignment
+                </h5>
+                <div class="card-body">
+                    <table class="table table-hover attr-table">
+                        <tr>
+                            <th scope="row">Regions</th>
+                            <td>
+                                {% if object.regions.all %}
+                                    <ul>
+                                        {% for region in object.regions.all %}
+                                            <li><a href="{{ region.get_absolute_url }}">{{ region }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Sites</th>
+                            <td>
+                                {% if object.sites.all %}
+                                    <ul>
+                                        {% for site in object.sites.all %}
+                                            <li><a href="{{ site.get_absolute_url }}">{{ site }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Roles</th>
+                            <td>
+                                {% if object.roles.all %}
+                                    <ul>
+                                        {% for role in object.roles.all %}
+                                            <li><a href="{% url 'dcim:device_list' %}?role={{ role.slug }}">{{ role }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Platforms</th>
+                            <td>
+                                {% if object.platforms.all %}
+                                    <ul>
+                                        {% for platform in object.platforms.all %}
+                                            <li><a href="{{ platform.get_absolute_url }}">{{ platform }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Cluster Groups</th>
+                            <td>
+                                {% if object.cluster_groups.all %}
+                                    <ul>
+                                        {% for cluster_group in object.cluster_groups.all %}
+                                            <li><a href="{{ cluster_group.get_absolute_url }}">{{ cluster_group }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Clusters</th>
+                            <td>
+                                {% if object.clusters.all %}
+                                    <ul>
+                                        {% for cluster in object.clusters.all %}
+                                            <li><a href="{{ cluster.get_absolute_url }}">{{ cluster }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Tenant Groups</th>
+                            <td>
+                                {% if object.tenant_groups.all %}
+                                    <ul>
+                                        {% for tenant_group in object.tenant_groups.all %}
+                                            <li><a href="{{ tenant_group.get_absolute_url }}">{{ tenant_group }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Tenants</th>
+                            <td>
+                                {% if object.tenants.all %}
+                                    <ul>
+                                        {% for tenant in object.tenants.all %}
+                                            <li><a href="{{ tenant.get_absolute_url }}">{{ tenant }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">Tags</th>
+                            <td>
+                                {% if object.tags.all %}
+                                    <ul>
+                                        {% for tag in object.tags.all %}
+                                            <li><a href="{{ tag.get_absolute_url }}">{{ tag }}</a></li>
+                                        {% endfor %}
+                                    </ul>
+                                {% else %}
+                                    <span class="text-muted">None</span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    </table>
                 </div>
-                <table class="table table-hover panel-body attr-table">
-                    <tr>
-                        <td>Regions</td>
-                        <td>
-                            {% if object.regions.all %}
-                                <ul>
-                                    {% for region in object.regions.all %}
-                                        <li><a href="{{ region.get_absolute_url }}">{{ region }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Sites</td>
-                        <td>
-                            {% if object.sites.all %}
-                                <ul>
-                                    {% for site in object.sites.all %}
-                                        <li><a href="{{ site.get_absolute_url }}">{{ site }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Roles</td>
-                        <td>
-                            {% if object.roles.all %}
-                                <ul>
-                                    {% for role in object.roles.all %}
-                                        <li><a href="{% url 'dcim:device_list' %}?role={{ role.slug }}">{{ role }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Platforms</td>
-                        <td>
-                            {% if object.platforms.all %}
-                                <ul>
-                                    {% for platform in object.platforms.all %}
-                                        <li><a href="{{ platform.get_absolute_url }}">{{ platform }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Cluster Groups</td>
-                        <td>
-                            {% if object.cluster_groups.all %}
-                                <ul>
-                                    {% for cluster_group in object.cluster_groups.all %}
-                                        <li><a href="{{ cluster_group.get_absolute_url }}">{{ cluster_group }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Clusters</td>
-                        <td>
-                            {% if object.clusters.all %}
-                                <ul>
-                                    {% for cluster in object.clusters.all %}
-                                        <li><a href="{{ cluster.get_absolute_url }}">{{ cluster }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Tenant Groups</td>
-                        <td>
-                            {% if object.tenant_groups.all %}
-                                <ul>
-                                    {% for tenant_group in object.tenant_groups.all %}
-                                        <li><a href="{{ tenant_group.get_absolute_url }}">{{ tenant_group }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Tenants</td>
-                        <td>
-                            {% if object.tenants.all %}
-                                <ul>
-                                    {% for tenant in object.tenants.all %}
-                                        <li><a href="{{ tenant.get_absolute_url }}">{{ tenant }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Tags</td>
-                        <td>
-                            {% if object.tags.all %}
-                                <ul>
-                                    {% for tag in object.tags.all %}
-                                        <li><a href="{{ tag.get_absolute_url }}">{{ tag }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            {% else %}
-                                <span class="text-muted">None</span>
-                            {% endif %}
-                        </td>
-                    </tr>
-                </table>
             </div>
         </div>
         <div class="col-md-7">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <strong>Data</strong>
+            <div class="card">
+                <div class="card-header">
+                    <h5>Data</h5>
                     {% include 'extras/inc/configcontext_format.html' %}
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     {% include 'extras/inc/configcontext_data.html' with data=object.data format=format %}
                 </div>
             </div>

+ 4 - 4
netbox/templates/extras/inc/configcontext_format.html

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

+ 1 - 1
netbox/templates/generic/object.html

@@ -11,7 +11,7 @@
 {% block breadcrumb_main %}
 <nav class="breadcrumb-container" aria-label="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%}
   </ol>
 </nav>

+ 17 - 14
netbox/templates/generic/object_bulk_delete.html

@@ -5,33 +5,36 @@
 
 {% block content %}
     <div class="row">
-        <div class="col-md-8 col-md-offset-2">
-            <div class="card bg-danger">
-                <h5 class="card-header">Confirm Bulk Deletion</h5>
-                <div class="card-body">
-                    <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>
-                    {% block message_extra %}{% endblock %}
+        <div class="col-md-8">
+            <div class="alert alert-danger mb-3" role="alert">
+                <h4 class="alert-heading">Confirm Bulk Deletion</h4>
+                <hr />
+                <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 %}
             </div>
         </div>
     </div>
     <div class="row">
-        <div class="col-md-8 col-md-offset-2">
+        <div class="col-md-8">
             <div class="card">
-                {% include 'inc/table.html' %}
+                <div class="card-body">
+                    {% include 'inc/table.html' %}
+                </div>
             </div>
         </div>
     </div>
-    <div class="row">
-        <div class="col-md-6 col-md-offset-3">
-            <form action="" method="post" class="form">
+    <div class="row mt-3">
+        <div class="col-md-8">
+            <form action="" method="post">
                 {% csrf_token %}
                 {% for field in form.hidden_fields %}
                     {{ field }}
                 {% endfor %}
-                <div class="text-center">
-                    <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-default">Cancel</a>
+                <div class="text-end">
+                    <a href="{{ return_url }}" class="btn btn-outline-dark">Cancel</a>
+                    <button type="submit" name="_confirm" class="btn btn-danger">Delete {{ table.rows|length }} {{ obj_type_plural }}</button>
                 </div>
             </form>
         </div>