From c12ec13a02e067a182834b6229c5ab3457ccbfdc Mon Sep 17 00:00:00 2001
From: Jim Bledsoe <jim@acceleration.net>
Date: Sat, 1 Jul 2023 03:31:13 -0400
Subject: Use base and broadcast to reflect actual ips (#68)

Base and broadcast are already provided in the library.
Count moved left where it better reflects the maximum size of the CIDR.
Usable IPs are much more clear now.
Adjusted spacing of the styling to accommodate more columns.
---
 src/index.js   | 16 ++++++++++++----
 src/style.scss | 20 ++++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/index.js b/src/index.js
index 4962d7c..778775e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -166,6 +166,18 @@ class IPAddress extends Component {
             <span className="value">{details.mask}</span>
             <span className="label">Netmask</span>
           </span>
+          <span className="base">
+            <span className="value">{details.base}</span>
+            <span className="label">CIDR Base IP</span>
+          </span>
+          <span className="broadcast">
+            <span className="value">{details.broadcast}</span>
+            <span className="label">Broadcast IP</span>
+          </span>
+          <span className="count">
+            <span className="value">{details.size.toLocaleString()}</span>
+            <span className="label">Count</span>
+          </span>
           <span className="first">
             <span className="value">{details.first}</span>
             <span className="label">First Usable IP</span>
@@ -174,10 +186,6 @@ class IPAddress extends Component {
             <span className="value">{details.last}</span>
             <span className="label">Last Usable IP</span>
           </span>
-          <span className="count">
-            <span className="value">{details.size.toLocaleString()}</span>
-            <span className="label">Count</span>
-          </span>
         </div>
       </div>
     );
diff --git a/src/style.scss b/src/style.scss
index a9c7407..e513c08 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -100,19 +100,27 @@ body {
     div.details {
       span.netmask {
         display: inline-block;
-        width: 20%;
+        width: 15%;
       }
-      span.first {
+      span.base {
         display: inline-block;
-        width: 20%;
+        width: 15%;
       }
-      span.last {
+      span.broadcast {
         display: inline-block;
-        width: 20%;
+        width: 15%;
       }
       span.count {
         display: inline-block;
-        width: 20%;
+        width: 15%;
+      }
+      span.first {
+        display: inline-block;
+        width: 15%;
+      }
+      span.last {
+        display: inline-block;
+        width: 15%;
       }
       span.value {
         font-size: modular-scale(1);
-- 
cgit v1.3.1