added nav bar

This commit is contained in:
iou1name 2019-06-20 07:48:11 -04:00
parent a95b90002e
commit 1f0078446d
4 changed files with 34 additions and 6 deletions

Binary file not shown.

View File

@ -4,6 +4,29 @@ body {
margin: 0;
}
.font-awesome {
font-family: FontAwesome;
}
nav {
background-color: whitesmoke;
border-bottom: 1px solid darkgray;
display: flex;
}
nav span {
color: dimgrey;
cursor: pointer;
transition: 0.1s;
padding: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
}
nav span:hover {
background-color: lightgray;
}
#devices {
padding: 5%;
display: flex;
@ -53,7 +76,6 @@ body {
}
.edit, .save {
font-family: FontAwesome;
font-size: 0.8em;
color: dimgrey;
}

View File

@ -55,7 +55,7 @@ function edit_field(field) {
let save = document.createElement('span');
save.innerHTML = '';
save.className = 'save';
save.className = 'save font-awesome';
save.setAttribute('onclick', 'save_field(this.parentElement)');
field.children[1].replaceWith(save);
}
@ -93,7 +93,7 @@ function save_field(field) {
let edit = document.createElement('span');
edit.innerHTML = '';
edit.className = 'edit';
edit.className = 'edit font-awesome';
edit.setAttribute('onclick', 'edit_field(this.parentElement)');
field.children[1].replaceWith(edit);
});

View File

@ -8,20 +8,26 @@
<script>window.onload = load;</script>
</head>
<body>
<header>
<nav>
<span onclick="new_device()" title="Add new device"><span class="font-awesome">&#xe802;</span></span>
<span title="Register a new authenticator">Register</span>
</nav>
</header>
<main>
<div id="devices">
{% for device in network %}
<div class="device {{ device.type }}" id="{{ device.id }}">
<div class="id">{{ device.id }}</div>
<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="description"><span class="field_value">{{ device.description }}</span> <span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="location"><span class="field_value">{{ device.location }}</span> <span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="ip_address"><i>{{ device.ip_address }}</i></div>
<div class="sub_devices">
{% for sub_dev in device.sub_devices %}
<div class="sub_device {{ sub_dev.type }}" id="{{ sub_dev.id }}">
<div class="id">{{ sub_dev.id }}</div>
<object class="outlet_image" data="/static/outlet.svg"></object>
<div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
<div class="description"><span class="field_value">{{ sub_dev.description }}</span> <span class="edit font-awesome" onclick="edit_field(this.parentElement)">&#xe800;</span></div>
</div>
{% endfor %}
</div>