Clean up cable trace view

netbox/templates/dcim/cable_trace.html

@@ -6,44 +6,48 @@
 {% block content %}
     <div class="row">
         <div class="col col-md-5">
-            <object data="{{ svg_url }}" class="rack_elevation"></object>
-            <div class="text-center mt-3">
-                <a class="btn btn-outline-primary btn-sm" href="{{ svg_url }}">
+            <div class="text-center my-3">
+                <object data="{{ svg_url }}" class="rack_elevation"></object>
+                <a class="btn btn-outline-primary btn-sm my-3" href="{{ svg_url }}">
                     <i class="mdi mdi-file-download"></i> Download SVG
                 </a>
             </div>
-            <div class="cable-trace">
+            <div class="trace-end">
                 {% with traced_path=path.origin.trace %}
                     {% if path.is_split %}
-                        <div class="trace-end">
-                            <h3 class="text-danger">Path split!</h3>
-                            <p>Select a node below to continue:</p>
-                            <ul class="text-start">
-                                {% for next_node in path.get_split_nodes %}
-                                    {% if next_node.cable %}
-                                        <li>
-                                            <a href="{% url 'dcim:frontport_trace' pk=next_node.pk %}">{{ next_node }}</a>
-                                            (Cable <a href="{{ next_node.cable.get_absolute_url }}">{{ next_node.cable }}</a>)
-                                        </li>
-                                    {% else %}
-                                        <li class="text-muted">{{ next_node }}</li>
-                                    {% endif %}
-                                {% endfor %}
-                            </ul>
-                        </div>
-                    {% else %}
-                        <div class="trace-end">
-                            <h3 class="text-success">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
+                        <h3 class="text-danger">Path split!</h3>
+                        <p>Select a node below to continue:</p>
+                        <ul class="text-start">
+                            {% for next_node in path.get_split_nodes %}
+                                {% if next_node.cable %}
+                                    <li>
+                                        <a href="{% url 'dcim:frontport_trace' pk=next_node.pk %}">{{ next_node }}</a>
+                                        (Cable <a href="{{ next_node.cable.get_absolute_url }}">{{ next_node.cable }}</a>)
+                                    </li>
                                 {% else %}
-                                    <span class="text-muted">N/A</span>
+                                    <li class="text-muted">{{ next_node }}</li>
                                 {% endif %}
-                            </h5>
-                        </div>
+                            {% endfor %}
+                        </ul>
+                    {% else %}
+                        <h3 class="text-center text-success">Trace Completed</h3>
+                        <table class="table">
+                          <tr>
+                            <th scope="row">Total segments</th>
+                            <td>{{ traced_path|length }}</td>
+                          </tr>
+                          <tr>
+                            <th scope="row">Total length</th>
+                            <td>
+                              {% if total_length %}
+                                {{ total_length|floatformat:"-2" }}{% if not is_definitive %}+{% endif %} Meters /
+                                {{ total_length|meters_to_feet|floatformat:"-2" }} Feet
+                              {% else %}
+                                <span class="text-muted">N/A</span>
+                              {% endif %}
+                            </td>
+                          </tr>
+                        </table>
                     {% endif %}
                 {% endwith %}
             </div>