From ef5d4157fb8d67a8a92c8b0f9a14d7c47ce7a25f Mon Sep 17 00:00:00 2001
From: Yuval Adam <yuval@y3xz.com>
Date: Fri, 11 Dec 2015 22:51:17 +0200
Subject: Split range into first/last

---
 index.js   | 21 +++++++++++++++------
 style.scss | 11 ++++++++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/index.js b/index.js
index 293a0c0..2b4cbe1 100644
--- a/index.js
+++ b/index.js
@@ -44,9 +44,14 @@ class IPAddress extends React.Component {
     return block.mask
   }
 
-  getRange = () => {
+  getFirst = () => {
     var block = new Netmask(this.getPretty())
-    return block.first + ' - ' + block.last
+    return block.first
+  }
+
+  getLast = () => {
+    var block = new Netmask(this.getPretty())
+    return block.last
   }
 
   getCount = () => {
@@ -85,13 +90,17 @@ class IPAddress extends React.Component {
           <span className="value">{this.getNetmask()}</span>
           <span className="label">Netmask</span>
         </span>
-        <span className="range">
-          <span className="value">{this.getRange()}</span>
-          <span className="label">Range</span>
+        <span className="first">
+          <span className="value">{this.getFirst()}</span>
+          <span className="label">First IP</span>
+        </span>
+        <span className="last">
+          <span className="value">{this.getLast()}</span>
+          <span className="label">Last IP</span>
         </span>
         <span className="count">
           <span className="value">{this.getCount().toLocaleString()}</span>
-          <span className="label">Addresses</span>
+          <span className="label">Count</span>
         </span>
       </div>
 
diff --git a/style.scss b/style.scss
index 33d9731..c40dd7c 100644
--- a/style.scss
+++ b/style.scss
@@ -87,14 +87,19 @@ body {
     div.details {
       span.netmask {
         display: inline-block;
+        width: 20%;
       }
-      span.range {
+      span.first {
         display: inline-block;
-        margin-left: 3em;
+        width: 20%;
+      }
+      span.last {
+        display: inline-block;
+        width: 20%;
       }
       span.count {
         display: inline-block;
-        margin-left: 3em;
+        width: 20%;
       }
       span.value {
         font-size: modular-scale(1);
-- 
cgit v1.3.1