taler-typescript-core

commit 386f37cbd8b7f804f186b38cecf39189498337eb
parent 867049abeacecfbec73094d9963ee57889887260
Author: Nullptrderef <nullptrderef@proton.me>
Date:   Tue, 20 Aug 2024 10:15:56 +0200

fix: cleanup webext index.html

this commit formats & cleans up the internals of the webext index.html, additionally making it consistent between UAs (not relying on browser for button style, for example)
this mainly affects development mode

Diffstat:
M
packages/taler-wallet-webextension/src/pwa/index.html
 | 
91
++++++++++++++++++++++++++++++++++++++++++++-----------------------------------

1 file changed, 51 insertions(+), 40 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/pwa/index.html b/packages/taler-wallet-webextension/src/pwa/index.html
@@ -3,18 +3,56 @@
     <meta charset="utf-8" />
     <link rel="manifest" href="./manifest.json" />
     <style>
+      /* Normalize font-family, rather than letting the UA decide */
+      html {
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          Roboto,
+          Oxygen,
+          Ubuntu,
+          Cantarell,
+          "Open Sans",
+          "Helvetica Neue",
+          sans-serif;
+      }
+
+      /* Setup the popup overlay */
       .overlay {
-        position: absolute;
+        /* TODO: Consider moving it ot the top right of the screen, like an actual popup usually is */
+        position: fixed;
         top: 0px;
+        left: 0px;
         display: none;
         width: 100%;
         height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: #0007;
+        backdrop-filter: blur(12px);
         color: white;
         justify-content: center;
       }
       .overlay > iframe {
         margin: auto;
+        border: 1px solid #666;
+      }
+      #wallet-window {
+        border: 1px solid #666;
+        border-radius: 4px;
+        /* TODO: why arbitrary 38px? also why no flexbox? */
+        height: calc(100% - 38px);
+        width: min(850px, calc(100% - 8px));
+      }
+
+      /* firefox's native button styles more or less, because conistency is good */
+      button {
+        background: #e9e9ed;
+        color: #151516;
+        border: 1px solid #828282;
+        border-radius: 4px;
+      }
+      button:hover {
+        background: #c0c0c0;
       }
     </style>
   </head>
@@ -37,53 +75,26 @@
         redirectWallet("about:blank");
       }
       function reloadWallet() {
-        window.frames["wallet"].location.reload()
+        window.frames["wallet"].location.reload();
       }
       function openPage() {
         window.frames["other"].location =
           document.getElementById("page-url").value;
       }
     </script>
-    <button value="asd" onclick="openPopup()">open popup</button>
-    <button value="asd" onclick="closeWallet();openWallet()">
-      restart
-    </button>
-    <button value="asd" onclick="reloadWallet()">
-      refresh
-    </button>
-    <br />
-    <iframe
-      id="wallet-window"
-      name="wallet"
-      src="wallet.html"
-      style="height: calc(100% - 30px)"
-      width="850"
-      height="90%"
-    >
+    <button onclick="openPopup()">Open Popup</button>
+    <button onclick="closeWallet();openWallet()">Restart Wallet</button>
+    <button onclick="reloadWallet()">Refresh Frame</button>
+    <div style="height: 8px"></div>
+    <iframe id="wallet-window" name="wallet" src="wallet.html" width="">
     </iframe>
-    <!-- <input id="page-url" type="text" />
-    <button onclick="openPage()">open</button> -->
-    <!-- <a
-      href='javascript:void(window.frames["other"].location = "http://bank.taler:5882")'
-      >open local bank</a
-    >
-    <hr />
-    <iframe
-      id="other-window"
-      name="other"
-      src="http://bank.taler:5882"
-      width="100%"
-      height="325"
-    >
-    </iframe> -->
     <div class="overlay" id="popup-overlay" onclick="closePopup()">
-      
       <iframe
-      id="popup-window"
-      name="popup"
-      src="about:blank"
-      width="500"
-      height="325"
+        id="popup-window"
+        name="popup"
+        src="about:blank"
+        width="500"
+        height="325"
       >
       </iframe>
     </div>