Rework new/import wallet/account form show/hide. Minor fixes.

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 10728022403fdb0bbc9b561714960a8e0e571100..fccdb392c3df9be1005abc48d89bf43777241ba7 100644 (file)
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -73,6 +73,8 @@
                }
 
                function switchPage (event) {
+                       const pages = document.getElementsByClassName('page')
+                       Array.from(pages).map(p => p.classList.remove('show'))
                        const oldHash = new URL(event.oldURL)?.hash
                        const newHash = new URL(event.newURL)?.hash
                        if (oldHash) {
@@ -91,7 +93,7 @@
                        _show: (msg, color) => {
                                const container = document.querySelector('#notifications')
                                const notification = document.createElement('dialog')
-                               notification.innerText = msg
+                               notification.innerText = `${msg} ${String.fromCodePoint(0x00D7)}`
                                notification.style.color = color ?? notification.style.color
                                notification.addEventListener('click', (event) => {
                                        notification.close()
@@ -162,6 +164,7 @@
                                }
                                case '_new': {
                                        try {
+                                               document.querySelector(location.hash).classList.remove('show')
                                                document.getElementById('wallet-new').classList.add('show')
                                        } catch (err) {
                                                walletSelect.value = ''
@@ -173,6 +176,7 @@
                                }
                                case '_import': {
                                        try {
+                                               document.querySelector(location.hash).classList.remove('show')
                                                document.getElementById('wallet-import').classList.add('show')
                                        } catch (err) {
                                                walletSelect.value = ''
@@ -301,6 +305,7 @@
                        switch (accountSelect.value) {
                                case '_new': {
                                        try {
+                                               document.querySelector(location.hash).classList.remove('show')
                                                document.getElementById('account-new').classList.add('show')
                                        } catch (err) {
                                                accountSelect.value = ''
@@ -342,7 +347,7 @@
                                if (!select) {
                                        throw new TypeError(`Select ${id} not found`)
                                }
-                               ([...select.children])
+                               Array.from(select.children)
                                        .filter(o => o.tagName.toLowerCase() === 'option')
                                        .filter(o => typeof o.value === 'string')
                                        .filter(o => o.value.length > 0)
@@ -410,12 +415,13 @@
                }
 
                async function cancelForm (id) {
-                       await resetDialogInputs()
-                       await document.getElementById(id).classList.remove('show')
+                       await resetFormInputs()
+                       document.getElementById(id).classList.remove('show')
+                       document.querySelector(location.hash).classList.add('show')
                }
 
-               async function resetDialogInputs () {
-                       const fields = document.querySelectorAll('dialog input, dialog select')
+               async function resetFormInputs () {
+                       const fields = document.querySelectorAll('main form input, main form select')
                        for (const field of fields) {
                                field.value = ''
                        }
@@ -447,6 +453,12 @@
                }
        </script>
        <style>
+               * {
+                       border: 0;
+                       box-sizing: border-box;
+                       font: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
+                       margin: 0;
+               }
                html {
                        --color-blue: #209CE9;
                        --color-dark: #20204C;
@@ -454,13 +466,8 @@
                        --color-gray: #676686;
                        --color-black: #070707;
                        --color-white: #FFFFFF;
-                       --text-body: 'serif';
-                       --text-heading: 'sans-serif';
-               }
-               * {
-                       border: 0;
-                       box-sizing: border-box;
-                       margin: 0;
+                       --text-body: normal normal normal calc(16px + 0.1dvh) 'sans-serif';
+                       --text-heading: normal normal bold calc(32px + 0.1dvh) 'sans-serif';
                }
                body {
                        align-items: flex-start;
@@ -469,8 +476,7 @@
                        display: flex;
                        fill: var(--color-blue);
                        flex-direction: column;
-                       font-family: var(--text-body);
-                       font-size: calc(16px + 0.1dvh);  /* prevents input focus zoom on mobile */
+                       font: var(--text-body);
                        height: 100dvh !important;
                        justify-content: stretch;
                        min-height: 100dvh !important;
@@ -486,6 +492,7 @@
                }
                main {
                        flex: 1 0 auto;
+                       padding: 1rem;
                        width: 100%;
                }
                nav {
@@ -495,8 +502,14 @@
                        justify-content: space-evenly;
                        width: 100%;
                }
+               main iframe {
+                       height:100%;
+                       object-fit: fill;
+                       width:100%;
+               }
                h1, h2, h3, h4, h5, h6 {
-                       font-family: var(--text-heading);
+                       font: var(--text-heading);
+                       margin-bottom: 1em;
                }
                .flex {
                        display: flex;
@@ -648,7 +661,7 @@
                        margin: 0 auto;
                        pointer-events: none;
                        position: fixed;
-                       top: 1rem;
+                       top: 0.5rem;
                        width: 100%;
                }
                #notifications > dialog[open] {
@@ -656,6 +669,7 @@
                        border: 1px solid var(--color-black);
                        border-radius: 0.5rem;
                        color: var(--color-light);
+                       cursor: pointer;
                        display: flex;
                        justify-content: center;
                        margin: 0.5rem 0;
@@ -726,33 +740,36 @@
 <body onhashchange="switchPage(event)" style="visibility:hidden;">
        <div id="notifications"></div>
        <header>
+               <form>
 
-               <!-- 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()">
-                               <option disabled selected value>Choose...</option>
-                               <hr />
-                               <option value="_new">New</option>
-                               <option value="_import">Import</option>
-                               <hr />
-                               <option disabled value="_ledger">Ledger</option>
-                               <hr />
-                       </select>
-               </div>
+                       <!-- 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()">
+                                       <option disabled selected value>Choose...</option>
+                                       <hr />
+                                       <option value="_new">New</option>
+                                       <option value="_import">Import</option>
+                                       <hr />
+                                       <option disabled value="_ledger">Ledger</option>
+                                       <hr />
+                               </select>
+                       </div>
 
-               <!-- Account Select -->
+                       <!-- 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()">
-                               <option disabled selected value>Choose...</option>
-                               <hr />
-                               <option value="_new">New</option>
-                               <hr />
-                       </select>
-               </div>
+                       <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()">
+                                       <option disabled selected value>Choose...</option>
+                                       <hr />
+                                       <option value="_new">New</option>
+                                       <hr />
+                               </select>
+                       </div>
+
+               </form>
        </header>
 
        <!-- Main Content Pages -->
@@ -762,6 +779,7 @@
                <!-- 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">
@@ -802,6 +820,7 @@
                <!-- 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">
@@ -856,6 +875,7 @@
                <!-- 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">
@@ -893,7 +913,7 @@
 
                <div id="history" class="page">
                        <h1>History</h1>
-                       <iframe src="" loading="lazy" style="height:100%;object-fit:fill;width:100%;"></iframe>
+                       <iframe id="history-iframe" src="" loading=" lazy"></iframe>
                        <!--
                        <details name="transaction">
                                <summary>Sent 1 to nano_12345...67890</summary>