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 96 additions and 48 deletions

File diff suppressed because one or more lines are too long

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,11 +89,12 @@
</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">
<div class="card">
<h5 class="card-header">
Related Paths
</h5>
<div class="card-body">
<table class="table table-hover">
<thead>
<tr>
<th>Origin</th>
@ -116,7 +117,7 @@
<span class="text-muted">Incomplete</span>
{% endif %}
</td>
<td class="text-right">
<td class="text-end">
{{ cablepath.segment_count }}
</td>
</tr>
@ -128,6 +129,7 @@
</tbody>
</table>
</div>
</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>