From: Chris Duncan <chris@zoso.dev>
Date: Mon, 28 Oct 2024 14:33:20 +0000 (-0700)
Subject: Refactor grid element style naming.
X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=ca482c926be30536c13dad7551763276ae3fa330;p=nemo-wallet.git

Refactor grid element style naming.
---

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index d9a78c4..c0a1cf8 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -592,60 +592,56 @@
 		.flex.y-full {
 			height: 100%;
 		}
-		.grid-x {
+		.grid {
 			align-items: center;
 			display: grid;
 			grid-template-columns: repeat(12, 1fr);
 		}
-		.grid-y {
-			display: grid;
-			grid-template-rows: repeat(12, 1fr);
-		}
-		.grid.x-1 {
+		.grid > .col-1 {
 			grid-column-start: auto;
 			grid-column-end: span 1;
 		}
-		.grid.x-2 {
+		.grid > .col-2 {
 			grid-column-start: auto;
 			grid-column-end: span 2;
 		}
-		.grid.x-3 {
+		.grid > .col-3 {
 			grid-column-start: auto;
 			grid-column-end: span 3;
 		}
-		.grid.x-4 {
+		.grid > .col-4 {
 			grid-column-start: auto;
 			grid-column-end: span 4;
 		}
-		.grid.x-5 {
+		.grid > .col-5 {
 			grid-column-start: auto;
 			grid-column-end: span 5;
 		}
-		.grid.x-6 {
+		.grid > .col-6 {
 			grid-column-start: auto;
 			grid-column-end: span 6;
 		}
-		.grid.x-7 {
+		.grid > .col-7 {
 			grid-column-start: auto;
 			grid-column-end: span 7;
 		}
-		.grid.x-8 {
+		.grid > .col-8 {
 			grid-column-start: auto;
 			grid-column-end: span 8;
 		}
-		.grid.x-9 {
+		.grid > .col-9 {
 			grid-column-start: auto;
 			grid-column-end: span 9;
 		}
-		.grid.x-10 {
+		.grid > .col-10 {
 			grid-column-start: auto;
 			grid-column-end: span 10;
 		}
-		.grid.x-11 {
+		.grid > .col-11 {
 			grid-column-start: auto;
 			grid-column-end: span 11;
 		}
-		.grid.x-12 {
+		.grid > .col-12 {
 			grid-column-start: auto;
 			grid-column-end: span 12;
 		}
@@ -748,9 +744,9 @@
 
 			<!-- Wallet Select -->
 
-			<div id="wallets" class="grid-x">
-				<label for="wallet" class="grid x-3">Wallet</label>
-				<select id="wallet" class="grid x-9" onchange="selectWallet()">
+			<div id="wallets" class="grid">
+				<label for="wallet" class="col-3">Wallet</label>
+				<select id="wallet" class="col-9" onchange="selectWallet()">
 					<option disabled selected value>Choose...</option>
 					<hr />
 					<option value="_new">New</option>
@@ -763,9 +759,9 @@
 
 			<!-- Account Select -->
 
-			<div id="accounts" class="grid-x">
-				<label for="account" class="grid x-3">Account</label>
-				<select id="account" class="grid x-9" disabled onchange="selectAccount()">
+			<div id="accounts" class="grid">
+				<label for="account" class="col-3">Account</label>
+				<select id="account" class="col-9" disabled onchange="selectAccount()">
 					<option disabled selected value>Choose...</option>
 					<hr />
 					<option value="_new">New</option>
@@ -811,10 +807,10 @@
 							placeholder="Password" required />
 					</div>
 					<hr />
-					<div class="grid-x">
-						<div class="grid x-4"></div>
-						<button id="wallet-new-cancel" class="cancel grid x-4">Cancel</button>
-						<button id="wallet-new-ok" class="grid x-4"
+					<div class="grid">
+						<div class="col-3"></div>
+						<button id="wallet-new-cancel" class="cancel col-3">Cancel</button>
+						<button id="wallet-new-ok" class="col-3"
 							onclick="createWallet().then(w => { console.log(w) })">OK</button>
 					</div>
 				</div>
@@ -866,10 +862,10 @@
 							placeholder="Password" required />
 					</div>
 					<hr />
-					<div class="grid-x">
-						<div class="grid x-4"></div>
-						<button id="wallet-import-cancel" class="cancel grid x-4">Cancel</button>
-						<button id="wallet-import-ok" class="grid x-4"
+					<div class="grid">
+						<div class="col-3"></div>
+						<button id="wallet-import-cancel" class="cancel col-3">Cancel</button>
+						<button id="wallet-import-ok" class="col-3"
 							onclick="importWallet().then(w => { console.log(w) })">OK</button>
 					</div>
 				</div>
@@ -897,10 +893,10 @@
 						<input id="account-new-password-input" name="account-new-password" autocomplete="off" type="password"
 							placeholder="Password" required />
 					</div>
-					<div class="grid-x">
-						<div class="grid x-4"></div>
-						<button id="account-new-cancel" class="cancel grid x-4">Cancel</button>
-						<button id="account-new-ok" class="grid x-4"
+					<div class="grid">
+						<div class="col-3"></div>
+						<button id="account-new-cancel" class="cancel col-3">Cancel</button>
+						<button id="account-new-ok" class="col-3"
 							onclick="createAccount().then(a => { console.log(a) })">OK</button>
 					</div>
 				</div>