ateijelo/smallnet
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

More on the style of the IPs table

Browse source
This commit is contained in:
Andy Teijelo Pérez 2015-11-05 10:12:58 -05:00
parent fe205f66b4
commit 7dbab7dd74
3 changed files with 45 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
static/css/dpto2.css
View file

@ -49,7 +49,6 @@ div.ips-cell.ips-bottom,div.ips-hor-half {
div.name { div.name {
max-height: 70px; max-height: 70px;
} }
span.ip { span.ip {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
@ -58,7 +57,23 @@ span.ip {
font-weight: bold; font-weight: bold;
font-size: x-small; font-size: x-small;
} }
span.lock {
position: absolute;
bottom: 2px;
left: 0.7em;
color: #aaa;
font-size: small;
}
div.ips-cell.dhcp-pool { div.ips-cell.dhcp-pool {
background-color: #bed; background-color: #bed;
} }
div.ips-cell.dhcp-pool.hover {
background-color: #acdccc;
}
div.ips-cell.hover {
background-color: #eae4ea;
}
div.ips-cell.unusable {
background-image: url(../img/unusable.png)
}

BIN
static/img/unusable.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 204 B

38
templates/ips.html
View file

@ -12,16 +12,19 @@
<div class="ips-row"> <div class="ips-row">
{% for col in range(16) -%} {% for col in range(16) -%}
{% set ip = row*16 + col %} {% set ip = row*16 + col %}
<a href="ip/{{ ip }}"> {% set unusable = ip == 0 or ip == 255 %}
{% set usable = not unusable %}
<a {% if usable %}href="ip/{{ ip }}"{% endif %}>
<div class="ips-cell <div class="ips-cell
{%- if row == 0 %} ips-top{% endif %} {%- if row == 0 %} ips-top{% endif %}
{%- if col == 0 %} ips-left{% endif %} {%- if col == 0 %} ips-left{% endif %}
{%- if row == 15 %} ips-bottom{% endif %} {%- if row == 15 %} ips-bottom{% endif %}
{%- if col == 15 %} ips-right{% endif %} {%- if col == 15 %} ips-right{% endif %}
{%- if col == 7 %} ips-ver-half{% endif %} {%- if col == 7 %} ips-ver-half{% endif %}
{%- if row == 7 %} ips-hor-half{% endif %} {%- if row == 7 %} ips-hor-half{% endif %}
{%- if 216 <= ip <= 239 %} dhcp-pool{% endif -%} {% if unusable %} unusable{% endif %}
"> {%- if 216 <= ip <= 239 %} dhcp-pool{% endif -%}
">
<div class="name"> <div class="name">
{% if 99 <= ip <= 103 or ip == 96%} {% if 99 <= ip <= 103 or ip == 96%}
Andy Andy
@ -29,7 +32,12 @@
DHCP DHCP
{% endif %} {% endif %}
</div> </div>
{% if usable %}
{% if ip == 14 or ip == 99 %}
<span class="lock"><i class="fa fa-lock"></i></span>
{% endif %}
<span class="ip">.{{ row*16 + col }}</span> <span class="ip">.{{ row*16 + col }}</span>
{% endif %}
</div> </div>
</a> </a>
{%- endfor %} {%- endfor %}
@ -37,4 +45,16 @@
{% endfor %} {% endfor %}
</div> </div>
<script>
$(function() {
$(".ips-cell:not(.unusable)").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
})
</script>
{% endblock %} {% endblock %}