From 4075bc14397950eaaa2528c2d428b200afa64895 Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Mon, 28 Oct 2024 14:02:34 -0700
Subject: [PATCH] Collapse utility CSS to ease dev scrolling. Explicitly define
 minmax page width based on typical screen sizes.

---
 app/pages/nemo-wallet.html | 214 ++++++++++++-------------------------
 1 file changed, 71 insertions(+), 143 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index c0a1cf8..ab6a3f0 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -453,12 +453,8 @@
 		}
 	</script>
 	<style>
-		* {
-			border: 0;
-			box-sizing: border-box;
-			font: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
-			margin: 0;
-		}
+		*{border:0;box-sizing:border-box;font:normal normal normal calc(16px + 0.1dvh) 'sans-serif';margin:0;}
+		.grid{align-items:center;display:grid;grid-template-columns:repeat(12,minmax(1rem,1fr));}.grid>.col-1{grid-column-start:auto;grid-column-end:span 1;}.grid>.col-2{grid-column-start:auto;grid-column-end:span 2;}.grid>.col-3{grid-column-start:auto;grid-column-end:span 3;}.grid>.col-4{grid-column-start:auto;grid-column-end:span 4;}.grid>.col-5{grid-column-start:auto;grid-column-end:span 5;}.grid>.col-6{grid-column-start:auto;grid-column-end:span 6;}.grid>.col-7{grid-column-start:auto;grid-column-end:span 7;}.grid>.col-8{grid-column-start:auto;grid-column-end:span 8;}.grid>.col-9{grid-column-start:auto;grid-column-end:span 9;}.grid>.col-10{grid-column-start:auto;grid-column-end:span 10;}.grid>.col-11{grid-column-start:auto;grid-column-end:span 11;}.grid>.col-12{grid-column-start:auto;grid-column-end:span 12;}.grid>.fill{grid-column-start:auto;grid-column-end:12;}
 		html {
 			--color-blue: #209CE9;
 			--color-dark: #20204C;
@@ -468,6 +464,7 @@
 			--color-white: #FFFFFF;
 			--text-body: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
 			--text-heading: normal normal bold calc(32px + 0.1dvh) 'sans-serif';
+			background: linear-gradient(to right, var(--color-dark), calc((100dvw - 1080px) / 2), var(--color-black) 50%, calc(100dvw - ((100dvw - 1080px) / 2)), var(--color-dark));
 		}
 		body {
 			align-items: flex-start;
@@ -479,10 +476,11 @@
 			font: var(--text-body);
 			height: 100dvh !important;
 			justify-content: stretch;
+			margin: 0 auto;
 			min-height: 100dvh !important;
-			min-width: 100dvw !important;
+			min-width: 360px !important;
 			max-height: 100dvh !important;
-			max-width: 100dvw !important;
+			max-width: 1080px !important;
 			width: 100dvw !important
 		}
 		header {
@@ -511,139 +509,71 @@
 			font: var(--text-heading);
 			margin-bottom: 1em;
 		}
-		.flex {
+		.flex-x,
+		.flex-y {
 			display: flex;
-		}
-		.flex.x-top,
-		.flex.x-mid,
-		.flex.x-bottom,
-		.flex.x-stretch,
-		.flex.x-left,
-		.flex.x-center,
-		.flex.x-right,
-		.flex.x-full {
 			flex: 1 0 0;
-			flex-direction: row;
 			justify-content: center;
 		}
-		.flex.x-top {
-			align-items: flex-start;
-		}
-		.flex.x-mid {
-			align-items: center;
-		}
-		.flex.x-bottom {
-			align-items: flex-end;
+		.flex-x {
+			flex-direction: row;
 		}
-		.flex.x-stretch {
-			align-items: stretch;
+		.flex-y {
+			flex-direction: column;
 		}
-		.flex.x-stretch > * {
-			height: 100%;
+		.flex-x.top {
+			align-items: flex-start;
 		}
-		.flex.x-left {
+		.flex-y.top {
 			justify-content: flex-start;
 		}
-		.flex.x-center {
-			justify-content: center;
-		}
-		.flex.x-right {
-			justify-content: flex-end;
-		}
-		.flex.x-full {
-			width: 100%;
+		.flex-x.mid {
+			align-items: center;
 		}
-		.flex.y-left,
-		.flex.y-center,
-		.flex.y-right,
-		.flex.y-stretch,
-		.flex.y-top,
-		.flex.y-mid,
-		.flex.y-bottom,
-		.flex.full {
-			flex: 1 0 0;
-			flex-direction: column;
+		.flex-y.mid {
 			justify-content: center;
 		}
-		.flex.y-left {
-			align-items: flex-start;
+		.flex-x.bottom {
+			align-items: flex-end;
 		}
-		.flex.y-center {
-			align-items: center;
+		.flex-y.bottom {
+			justify-content: flex-end;
 		}
-		.flex.y-right {
-			align-items: flex-end;
+		.flex-x.stretch {
+			align-items: stretch;
 		}
-		.flex.y-stretch {
+		.flex-y.stretch {
 			align-items: stretch;
 		}
-		.flex.y-stretch * {
+		.flex-x.stretch > * {
+			height: 100%;
+		}
+		.flex-y.stretch * {
 			width: 100%;
 		}
-		.flex.y-top {
+		.flex-x.left {
 			justify-content: flex-start;
 		}
-		.flex.y-mid {
-			justify-content: center;
-		}
-		.flex.y-bottom {
-			justify-content: flex-end;
+		.flex-y.left {
+			align-items: flex-start;
 		}
-		.flex.y-full {
-			height: 100%;
+		.flex-x.center {
+			justify-content: center;
 		}
-		.grid {
+		.flex-y.center {
 			align-items: center;
-			display: grid;
-			grid-template-columns: repeat(12, 1fr);
-		}
-		.grid > .col-1 {
-			grid-column-start: auto;
-			grid-column-end: span 1;
-		}
-		.grid > .col-2 {
-			grid-column-start: auto;
-			grid-column-end: span 2;
 		}
-		.grid > .col-3 {
-			grid-column-start: auto;
-			grid-column-end: span 3;
-		}
-		.grid > .col-4 {
-			grid-column-start: auto;
-			grid-column-end: span 4;
-		}
-		.grid > .col-5 {
-			grid-column-start: auto;
-			grid-column-end: span 5;
-		}
-		.grid > .col-6 {
-			grid-column-start: auto;
-			grid-column-end: span 6;
-		}
-		.grid > .col-7 {
-			grid-column-start: auto;
-			grid-column-end: span 7;
-		}
-		.grid > .col-8 {
-			grid-column-start: auto;
-			grid-column-end: span 8;
-		}
-		.grid > .col-9 {
-			grid-column-start: auto;
-			grid-column-end: span 9;
+		.flex-x.right {
+			justify-content: flex-end;
 		}
-		.grid > .col-10 {
-			grid-column-start: auto;
-			grid-column-end: span 10;
+		.flex-y.right {
+			align-items: flex-end;
 		}
-		.grid > .col-11 {
-			grid-column-start: auto;
-			grid-column-end: span 11;
+		.flex-x.full {
+			width: 100%;
 		}
-		.grid > .col-12 {
-			grid-column-start: auto;
-			grid-column-end: span 12;
+		.flex-y.full {
+			height: 100%;
 		}
 		hr {
 			margin: revert !important;
@@ -715,7 +645,7 @@
 			display: flex;
 			flex: 1 1 auto;
 			justify-content: center;
-			padding: 1rem;
+			padding: 0 1dvh;
 		}
 		#xno {
 			fill: var(--color-blue);
@@ -779,15 +709,15 @@
 		<!-- New Wallet Form -->
 
 		<div id="wallet-new" class="page">
-			<h1>New Wallet</h1>
-			<form>
-				<div class="flex y-stretch">
-					<div id="wallet-new-name" class="flex x-left x-mid">
+			<form id="wallet-new-form">
+				<h1>New Wallet</h1>
+				<div class="flex-y stretch">
+					<div id="wallet-new-name" class="flex-x left mid">
 						<label for="wallet-new-name-input">Name</label>
 						<input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" maxlength="80" pattern="[^_].*"
 							placeholder="My Wallet" />
 					</div>
-					<div id="wallet-new-algorithm" class="flex x-left x-mid">
+					<div id="wallet-new-algorithm" class="flex-x left mid">
 						<label for="wallet-new-algorithm-select">Algorithm</label>
 						<select id="wallet-new-algorithm-select" name="wallet-new-algorithm" autocomplete="off"
 							onchange="updateWalletForm('wallet-new')" required>
@@ -796,12 +726,12 @@
 							<option value="blake2b">BLAKE2b</option>
 						</select>
 					</div>
-					<div id="wallet-new-salt" class="flex x-left x-mid hide">
+					<div id="wallet-new-salt" class="flex-x left mid hide">
 						<label for="wallet-new-salt-input">Salt</label>
 						<input id="wallet-new-salt-input" name="wallet-new-salt" type="password" autocomplete="off"
 							placeholder="Optional" />
 					</div>
-					<div id="wallet-new-password" class="flex x-left x-mid">
+					<div id="wallet-new-password" class="flex-x left mid">
 						<label for="wallet-new-password-input">Lock</label>
 						<input id="wallet-new-password-input" name="wallet-new-password" type="password" autocomplete="off"
 							placeholder="Password" required />
@@ -820,15 +750,15 @@
 		<!-- Import Wallet Form -->
 
 		<div id="wallet-import" class="page">
-			<h1>Import Wallet</h1>
-			<form>
-				<div class="flex y-stretch">
-					<div id="wallet-import-name" class="flex x-left x-mid">
+			<form id="wallet-import-form">
+				<h1>Import Wallet</h1>
+				<div class="flex-y stretch">
+					<div id="wallet-import-name" class="flex-x left mid">
 						<label for="wallet-import-name-input">Name</label>
 						<input id="wallet-import-name-input" name="wallet-import-name" autocomplete="off" maxlength="80"
 							pattern="[^_].*" placeholder="My Wallet" />
 					</div>
-					<div id="wallet-import-algorithm" class="flex x-left x-mid">
+					<div id="wallet-import-algorithm" class="flex-x left mid">
 						<label for="wallet-import-algorithm-select">Algorithm</label>
 						<select id="wallet-import-algorithm-select" name="wallet-import-algorithm" autocomplete="off"
 							onchange="updateWalletForm('wallet-import')" required>
@@ -837,7 +767,7 @@
 							<option value="blake2b">BLAKE2b</option>
 						</select>
 					</div>
-					<div id="wallet-import-type" class="flex x-left x-mid hide">
+					<div id="wallet-import-type" class="flex-x left mid hide">
 						<label for="wallet-import-type-select">Type</label>
 						<select id="wallet-import-type-select" name="wallet-import-type" autocomplete="off"
 							onchange="updateWalletForm('wallet-import')" required>
@@ -846,17 +776,17 @@
 							<option value="seed">Import seed</option>
 						</select>
 					</div>
-					<div id="wallet-import-value" class="flex x-left x-mid hide">
+					<div id="wallet-import-value" class="flex-x left mid hide">
 						<label for="wallet-import-value-input" style="text-transform:capitalize"></label>
 						<input id="wallet-import-value-input" name="wallet-import-value" type="password" autocomplete="off"
 							placeholder="Password" required />
 					</div>
-					<div id="wallet-import-salt" class="flex x-left x-mid hide">
+					<div id="wallet-import-salt" class="flex-x left mid hide">
 						<label for="wallet-import-salt-input">Salt</label>
 						<input id="wallet-import-salt-input" name="wallet-import-salt" type="password" autocomplete="off"
 							placeholder="Optional" />
 					</div>
-					<div id="wallet-import-password" class="flex x-left x-mid">
+					<div id="wallet-import-password" class="flex-x left mid">
 						<label for="wallet-import-password-input">Lock</label>
 						<input id="wallet-import-password-input" name="wallet-import-password" type="password" autocomplete="off"
 							placeholder="Password" required />
@@ -875,28 +805,28 @@
 		<!-- New Account Form -->
 
 		<div id="account-new" class="page">
-			<h1>New Account</h1>
-			<form>
-				<div class="flex y-stretch">
-					<div id="account-new-name" class="flex x-left x-mid">
+			<form id="account-new-form">
+				<h1>New Account</h1>
+				<div class="flex-y stretch">
+					<div id="account-new-name" class="flex-x left mid">
 						<label for="account-new-name-input">Name</label>
-						<input id="account-new-name-input" name="account-new-name" autocomplete="off" maxlength="80"
+						<input id="account-new-name-input" name="account-new-name" form="account-new-form" autocomplete="off" maxlength="80"
 							pattern="[^_].*" placeholder="My Account" />
 					</div>
-					<div id="account-new-index" class="flex x-left x-mid">
+					<div id="account-new-index" class="flex-x left mid">
 						<label for="account-new-index-input">Index</label>
-						<input id="account-new-index-input" name="account-new-index" type="number" autocomplete="off" min="0"
+						<input id="account-new-index-input" name="account-new-index" form="account-new-form" type="number" autocomplete="off" min="0"
 							max="2147483647" required value="0" />
 					</div>
-					<div id="account-new-password" class="flex x-left x-mid">
+					<div id="account-new-password" class="flex-x left mid">
 						<label for="account-new-password-input">Unlock</label>
-						<input id="account-new-password-input" name="account-new-password" autocomplete="off" type="password"
+						<input id="account-new-password-input" name="account-new-password" form="account-new-form" autocomplete="off" type="password"
 							placeholder="Password" required />
 					</div>
 					<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"
+						<button id="account-new-cancel" form="account-new-form" class="cancel col-3" type="reset">Cancel</button>
+						<button id="account-new-ok" form="account-new-form" class="col-3"
 							onclick="createAccount().then(a => { console.log(a) })">OK</button>
 					</div>
 				</div>
@@ -930,8 +860,6 @@
 
 		<div id="transact" class="page">
 			<h1>Transact</h1>
-			<div id="walletCard">
-			</div>
 		</div>
 
 		<!-- Rolodex Page -->
-- 
2.34.1