From: Chris Duncan <chris@zoso.dev>
Date: Mon, 28 Oct 2024 21:02:34 +0000 (-0700)
Subject: Collapse utility CSS to ease dev scrolling. Explicitly define minmax page width based...
X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=4075bc14397950eaaa2528c2d428b200afa64895;p=nemo-wallet.git
Collapse utility CSS to ease dev scrolling. Explicitly define minmax page width based on typical screen sizes.
---
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 -->