]> zoso.dev Git - nemo-wallet.git/commitdiff
projects / nemo-wallet.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 84d7636)
Add bottom tab navigation. Add viewport meta tag to zoom properly on mobile devices.
authorChris Duncan <chris@zoso.dev>
Wed, 16 Oct 2024 18:29:01 +0000 (11:29 -0700)
committerChris Duncan <chris@zoso.dev>
Wed, 16 Oct 2024 18:29:01 +0000 (11:29 -0700)
app/pages/nemo-wallet.html patch | blob | history

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 5a4d1d89887252e29504909693f5cbec68e60253..3cca50cedb73e827c8f910f5a3d013bf4555f148 100644 (file)
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 
 <head>
-  <meta lang="en">
+  <meta lang="en" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <script>
     let Account, Bip44Wallet, Blake2bWallet, LedgerWallet, SendBlock, ReceiveBlock, ChangeBlock, rpc, Rolodex, Xel
     const observer = new MutationObserver((mutations) => {
@@ -134,13 +135,24 @@
     }
   </script>
   <script src="" type="module"></script>
-  <meta name="xel-theme" content="https://unpkg.com/xel@latest/themes/adwaita-dark.css">
-  <meta name="xel-accent-color" content="blue">
-  <meta name="xel-icons" content="https://unpkg.com/xel@latest/icons/fluent-outlined.svg">
+  <meta name="xel-theme" content="https://unpkg.com/xel@latest/themes/adwaita-dark.css" />
+  <meta name="xel-accent-color" content="blue" />
+  <meta name="xel-icons" content="https://unpkg.com/xel@latest/icons/fluent-outlined.svg" />
+  <style>
+    x-tab x-box:is([vertical]) x-icon + x-label {
+      margin-left: 0
+    }
+    x-box.centered {
+      align-items: center;
+    }
+    x-tabs.full-width > x-tab {
+      flex-grow: 1
+    }
+  </style>
 </head>
 
 <body onload="load()" style="visibility:hidden;">
-  <x-box id="main">
+  <main>
     <x-notification id="notification"></x-notification>
     <x-box id="wallets">
       <x-button>
@@ -176,5 +188,39 @@
     <x-button onclick="clearStorage()">
       <x-label>Clear Storage</x-label>
     </x-button>
-  </x-box>
+  </main>
+  <nav>
+    <x-tabs class="full-width">
+      <x-tab>
+        <x-box vertical class="centered">
+          <x-icon href="#earth"></x-icon>
+          <x-label>Exchange</x-label>
+        </x-box>
+      </x-tab>
+      <x-tab>
+        <x-box vertical class="centered">
+          <x-icon href="#bars"></x-icon>
+          <x-label>History</x-label>
+        </x-box>
+      </x-tab>
+      <x-tab>
+        <x-box vertical class="centered">
+          <x-icon href="#credit-card"></x-icon>
+          <x-label>Transact</x-label>
+        </x-box>
+      </x-tab>
+      <x-tab>
+        <x-box vertical class="centered">
+          <x-icon href="#person"></x-icon>
+          <x-label>Rolodex</x-label>
+        </x-box>
+      </x-tab>
+      <x-tab>
+        <x-box vertical class="centered">
+          <x-icon href="#settings"></x-icon>
+          <x-label>Settings</x-label>
+        </x-box>
+      </x-tab>
+    </x-tabs>
+  </nav>
 </body>
Web-based wallet for Nano digital cash.