diff options
| author | Jim Bledsoe <jim@acceleration.net> | 2023-07-01 03:31:13 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-07-01 10:31:13 +0300 |
| commit | c12ec13a02e067a182834b6229c5ab3457ccbfdc (patch) | |
| tree | 1bbe60c1bf3eb90c7d26a0621d39e0517971a268 /src | |
| parent | a8a8fa03cec718b8e972f3f891240230ab6ec1e6 (diff) | |
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.
Diffstat (limited to 'src')
| -rw-r--r-- | src/index.js | 16 | ||||
| -rw-r--r-- | src/style.scss | 20 |
2 files changed, 26 insertions, 10 deletions
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); |