update cable trace styles

netbox/project-static/netbox.scss

@@ -349,3 +349,44 @@ table td,
 table th {
   font-size: $font-size-sm;
 }
+
+// Cable Tracing
+.cable-trace {
+  max-width: 38rem;
+  margin: 1rem auto;
+  text-align: center;
+}
+.cable-trace .node {
+  background-color: $gray-100;
+  border: $border-width solid $gray-200;
+  border-radius: $border-radius;
+  padding: 1.5rem 1rem;
+  position: relative;
+  z-index: 1;
+}
+.cable-trace .termination {
+  background-color: $gray-200;
+  border: $border-width solid $gray-300;
+  box-shadow: $box-shadow;
+  border-radius: $border-radius;
+  margin: -1rem auto;
+  padding: 0.5rem;
+  position: relative;
+  width: 60%;
+  z-index: 2;
+}
+.cable-trace .active {
+  border: 0.25rem solid $green;
+}
+.cable-trace .cable {
+  border-left-style: solid;
+  border-left-width: 0.25rem;
+  margin: 1rem 0 1rem 50%;
+  padding: 1.5rem;
+  text-align: left;
+  width: 50%;
+}
+.cable-trace .trace-end {
+  margin-top: 2rem;
+  text-align: center;
+}

netbox/templates/dcim/cable.html

@@ -9,13 +9,18 @@
   <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
-{% block buttons %}
+{% block controls %}
+{% plugin_buttons object %}
+<div class="container mb-2 mx-0">
+  <div class="d-flex flex-wrap justify-content-end">
   {% if request.user|can_change:object %}
     {% edit_button object %}
   {% endif %}
   {% if request.user|can_delete:object %}
     {% delete_button object %}
   {% endif %}
+  </div>
+</div>
 {% endblock %}
 
 {% block content %}

netbox/templates/dcim/cable_trace.html

@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'layout.html' %}
 {% load helpers %}
 
 {% block header %}
@@ -54,7 +54,7 @@
                                 <div class="trace-end">
                                     <h3 class="text-danger">Path split!</h3>
                                     <p>Select a node below to continue:</p>
-                                    <ul class="text-left">
+                                    <ul class="text-start">
                                         {% for next_node in path.get_split_nodes %}
                                             {% if next_node.cable %}
                                                 <li>
@@ -69,9 +69,9 @@
                                 </div>
                             {% else %}
                                 <div class="trace-end">
-                                    <h3{% if far_end %} class="text-success"{% endif %}>Trace completed</h3>
-                                    <h5>Total segments: {{ traced_path|length }}</h5>
-                                    <h5>Total length:
+                                    <h3{% if far_end %} class="text-success"{% endif %}>Trace Completed</h3>
+                                    <h5>Total Segments: {{ traced_path|length }}</h5>
+                                    <h5>Total Length:
                                         {% if total_length %}
                                             {{ total_length|floatformat:"-2" }}{% if not is_definitive %}+{% endif %} Meters /
                                             {{ total_length|meters_to_feet|floatformat:"-2" }} Feet
@@ -89,44 +89,46 @@
         </div>
         <div class="col-md-7 col-sm-12">
 
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                  <strong>Related Paths</strong>
-                </div>
-                <table class="table table-hover panel-body">
-                    <thead>
-                        <tr>
-                            <th>Origin</th>
-                            <th>Destination</th>
-                            <th>Segments</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for cablepath in related_paths %}
-                            <tr{% if cablepath.pk == path.pk %} class="info"{% endif %}>
-                                <td>
-                                    <a href="?cablepath_id={{ cablepath.pk }}">
-                                        {{ cablepath.origin.parent_object }} / {{ cablepath.origin }}
-                                    </a>
-                                </td>
-                                <td>
-                                    {% if cablepath.destination %}
-                                        {{ cablepath.destination }} ({{ cablepath.destination.parent_object }})
-                                    {% else %}
-                                        <span class="text-muted">Incomplete</span>
-                                    {% endif %}
-                                </td>
-                                <td class="text-right">
-                                    {{ cablepath.segment_count }}
-                                </td>
+            <div class="card">
+                <h5 class="card-header">
+                  Related Paths
+                </h5>
+                <div class="card-body">
+                    <table class="table table-hover">
+                        <thead>
+                            <tr>
+                                <th>Origin</th>
+                                <th>Destination</th>
+                                <th>Segments</th>
                             </tr>
-                        {% empty %}
-                            <td colspan="3" class="text-muted">
-                                None found
-                            </td>
-                        {% endfor %}
-                    </tbody>
-                </table>
+                        </thead>
+                        <tbody>
+                            {% for cablepath in related_paths %}
+                                <tr{% if cablepath.pk == path.pk %} class="info"{% endif %}>
+                                    <td>
+                                        <a href="?cablepath_id={{ cablepath.pk }}">
+                                            {{ cablepath.origin.parent_object }} / {{ cablepath.origin }}
+                                        </a>
+                                    </td>
+                                    <td>
+                                        {% if cablepath.destination %}
+                                            {{ cablepath.destination }} ({{ cablepath.destination.parent_object }})
+                                        {% else %}
+                                            <span class="text-muted">Incomplete</span>
+                                        {% endif %}
+                                    </td>
+                                    <td class="text-end">
+                                        {{ cablepath.segment_count }}
+                                    </td>
+                                </tr>
+                            {% empty %}
+                                <td colspan="3" class="text-muted">
+                                    None found
+                                </td>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
             </div>
 
         </div>

netbox/templates/dcim/trace/cable.html

@@ -1,13 +1,13 @@
 {% load helpers %}
 
-<div class="cable" style="border-left-color: #{% if cable.color == 'ffffff' %}909090; border-left-style: double; border-left-width: 6px;{% else %}{{ cable.color|default:'606060' }};{% endif %} {% if cable.status != 'connected' %} border-left-style: dashed{% endif %}">
+<div class="cable" style="border-left-color: #{% if cable.color == 'ffffff' %}909090; border-left-style: double; border-left-width: 0.4rem;{% else %}{{ cable.color|default:'606060' }};{% endif %} {% if cable.status != 'connected' %} border-left-style: dashed{% endif %}">
     <strong>
         <a href="{% url 'dcim:cable' pk=cable.pk %}">
             {% if cable.label %}<code>{{ cable.label }}</code>{% else %}Cable #{{ cable.pk }}{% endif %}
         </a>
     </strong><br />
     {% if cable.type %}
-        {{ cable.get_type_display|default:"" }}<br />
+        <span class="badge bg-secondary">{{ cable.get_type_display|default:"" }}</span>
     {% endif %}
     {% if cable.length %}
         ({{ cable.length }} {{ cable.get_length_unit_display }})<br />

netbox/templates/dcim/trace/termination.html

@@ -3,6 +3,6 @@
     <strong><a href="{{ termination.get_absolute_url }}">{{ termination }}</a></strong><br />
     {{ termination|meta:"verbose_name"|bettertitle }}
     {% if termination.type %}
-        ({{ termination.get_type_display }})
+        <small class="text-muted">{{ termination.get_type_display }}</small>
     {% endif %}
 </div>