From 7dbab7dd7482db24c03cfa1978d80ba9a7e94504 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andy=20Teijelo=20P=C3=A9rez?= <ateijelo@gmail.com>
Date: Thu, 5 Nov 2015 10:12:58 -0500
Subject: [PATCH] More on the style of the IPs table

---
 static/css/dpto2.css    |  17 ++++++++++++++++-
 static/img/unusable.png | Bin 0 -> 204 bytes
 templates/ips.html      |  38 +++++++++++++++++++++++++++++---------
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 static/img/unusable.png

diff --git a/static/css/dpto2.css b/static/css/dpto2.css
index 892b2e6..b218329 100644
--- a/static/css/dpto2.css
+++ b/static/css/dpto2.css
@@ -49,7 +49,6 @@ div.ips-cell.ips-bottom,div.ips-hor-half {
 div.name {
     max-height: 70px;
 }
-
 span.ip {
     position: absolute;
     bottom: 2px;
@@ -58,7 +57,23 @@ span.ip {
     font-weight: bold;
     font-size: x-small;
 }
+span.lock {
+    position: absolute;
+    bottom: 2px;
+    left: 0.7em;
+    color: #aaa;
+    font-size: small;
+}
 
 div.ips-cell.dhcp-pool {
     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)
+}
diff --git a/static/img/unusable.png b/static/img/unusable.png
new file mode 100644
index 0000000000000000000000000000000000000000..91497477f99c24cbd3f241d916cf36e9f2ea148b
GIT binary patch
literal 204
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqEX7WqAsj$Z!;#Vf<Z~8yL>4nJ
zF#Q2x#wF@Y41j`?C9V-A!TD(=<%vb94CUqJdYO6I#mR{Use1WE>9gP2NC6djdb&7<
zNKCCgcagI}fq~`1@_(kSi?{q|y2PgVHo;!X^=YlF4WC}3>#?T8#+KiL0x!JlnDgtC
suwun?r#FR7qR}%F9J!5U<m&|e>Z64&y!yR}6KE)dr>mdKI;Vst0JEJy{r~^~

literal 0
HcmV?d00001

diff --git a/templates/ips.html b/templates/ips.html
index 7390151..61a73df 100644
--- a/templates/ips.html
+++ b/templates/ips.html
@@ -12,16 +12,19 @@
       <div class="ips-row">
       {% for col in range(16) -%}
         {% 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
-                  {%- if row == 0 %} ips-top{% endif %}
-                  {%- if col == 0 %} ips-left{% endif %}
-                  {%- if row == 15 %} ips-bottom{% endif %}
-                  {%- if col == 15 %} ips-right{% endif %}
-                  {%- if col == 7 %} ips-ver-half{% endif %}
-                  {%- if row == 7 %} ips-hor-half{% endif %}
-                  {%- if 216 <= ip <= 239 %} dhcp-pool{% endif -%}
-                  ">
+          {%- if row == 0 %} ips-top{% endif %}
+          {%- if col == 0 %} ips-left{% endif %}
+          {%- if row == 15 %} ips-bottom{% endif %}
+          {%- if col == 15 %} ips-right{% endif %}
+          {%- if col == 7 %} ips-ver-half{% endif %}
+          {%- if row == 7 %} ips-hor-half{% endif %}
+          {% if unusable %} unusable{% endif %}
+          {%- if 216 <= ip <= 239 %} dhcp-pool{% endif -%}
+          ">
           <div class="name">
             {% if 99 <= ip <= 103 or ip == 96%}
                 Andy
@@ -29,7 +32,12 @@
                 DHCP
             {% endif %}
           </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>
+          {% endif %}
         </div>
         </a>
       {%- endfor %}
@@ -37,4 +45,16 @@
     {% endfor %}
 </div>
 
+<script>
+    $(function() {
+        $(".ips-cell:not(.unusable)").hover(
+            function() {
+                $(this).addClass("hover");
+            },
+            function() {
+                $(this).removeClass("hover");
+            }
+        );
+    })
+</script>
 {% endblock %}