update cable trace styles

This commit is contained in:
checktheroads 2021-04-15 16:53:04 -07:00
parent 844186d520
commit 59256cf8b3
7 changed files with 95 additions and 47 deletions

Binary file not shown.

File diff suppressed because one or more lines are too long

View File

@ -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;
}

View File

@ -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 %}

View File

@ -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>

View File

@ -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 />

View File

@ -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>