Adjust UI spacing and auto-load default subnet

dist/index.html

@@ -21,7 +21,7 @@
             </svg>
         </a>
     </div>
-    <h1>Visual Subnet Calculator</h1>
+    <h1>Visual Subnet Calculator <span style="font-size:1rem;">(UNDER CONSTRUCTION)</span></h1>
     <div class="alert alert-primary alert-dismissible show mt-3" role="alert">
         Enter the network you wish to subnet and use the Split/Join buttons on the right to start designing!
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

dist/main.css

@@ -31,8 +31,8 @@
     /* Equivalent to p-1 */
     padding: 0.25rem;
     /* Equivalent to p-2 */
-    padding-top: 0.5rem;
+    padding-top: 0.25rem;
-    padding-bottom: 0.5rem;
+    padding-bottom: 0.25rem;
 }
 
 /*
@@ -59,6 +59,7 @@
     cursor: pointer;
     min-width: 2.3rem;
     width: 1%;
+    font-size:1rem;
 }
 
 #calc td.join {
@@ -67,6 +68,7 @@
     cursor: pointer;
     min-width: 2.3rem;
     width: 1%;
+    font-size:1rem;
 }
 
 #calc td.split, #calc td.join {
@@ -77,7 +79,8 @@
     padding-right: 0.4rem;
 }
 #calc .note {
-
+    padding-left:0.5rem;
+    padding-right:0.5rem;
 }
 
 #calc .note label,input {
@@ -86,18 +89,24 @@
 
 #calc .row_address {
     white-space: nowrap;
+    padding-left:0.5rem;
+    padding-right:0.5rem;
 }
 
 #calc .row_range {
     /* TODO: Make this a checkbox?
     white-space: nowrap;
      */
+    padding-left:0.5rem;
+    padding-right:0.5rem;
 }
 
 #calc .row_usable {
     /* TODO: Make this a checkbox?
     white-space: nowrap;
      */
+    padding-left:0.5rem;
+    padding-right:0.5rem;
 }
 
 #calc .row_hosts {
@@ -125,5 +134,5 @@
     -webkit-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
     white-space: nowrap;
-    padding-top: 0.5rem;
+    padding-top: 0.25rem;
 }

dist/main.js

@@ -2,7 +2,15 @@ let subnetMap = {};
 let maxNetSize = 0;
 let infoColumnCount = 5
 $('#btn_go').on('click', function() {
-    let rootCidr = get_network($('#network').val(), $('#netsize').val()) + '/' + $('#netsize').val()
+    reset();
+})
+
+$('#btn_reset').on('click', function() {
+    reset();
+})
+
+function reset() {
+        let rootCidr = get_network($('#network').val(), $('#netsize').val()) + '/' + $('#netsize').val()
     subnetMap = {}
     subnetMap[rootCidr] = {}
     maxNetSize = parseInt($('#netsize').val())
@@ -51,7 +59,7 @@ $('#btn_go').on('click', function() {
     }
     */
     renderTable();
-})
+}
 
 $('#calcbody').on('click', 'td.split,td.join', function(event) {
     // HTML DOM Data elements! Yay! See the `data-*` attributes of the HTML tags
@@ -216,3 +224,7 @@ function mutate_subnet_map(verb, network, subnetTree) {
         }
     }
 }
+
+$( document ).ready(function() {
+    reset();
+});