docs(wallet): add toggle browser button on mobile to wallet-iframe

aeternity · Sep 16, 2023 · f6b5bcd · f6b5bcd
1 parent 7412e88
commit f6b5bcd
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/examples/browser/wallet-iframe/src/App.vue b/examples/browser/wallet-iframe/src/App.vue
@@ -1,5 +1,9 @@
 <template>
-  <h2>Wallet Iframe</h2>
+  <input id="toggle-aepp" type="checkbox" />
+  <h2>
+    Wallet Iframe
+    <label for="toggle-aepp" />
+  </h2>
 
   <div class="group">
     <div>
@@ -265,3 +269,40 @@ export default {
 </script>
 
 <style lang="scss" src="./styles.scss" />
+
+<style lang="scss" scoped>
+input[id=toggle-aepp] {
+  display: none;
+}
+
+label[for=toggle-aepp]::after {
+  font-size: initial;
+  font-weight: initial;
+  text-decoration: underline dotted;
+  cursor: pointer;
+}
+
+@media (max-width: 450px), (max-height: 650px) {
+  input[id=toggle-aepp] {
+    &:checked ~ {
+      h2 label[for=toggle-aepp]::after {
+        content: 'Hide aepp';
+      }
+
+      .group {
+        display: none;
+      }
+    }
+
+    &:not(:checked) ~ {
+      h2 label[for=toggle-aepp]::after {
+        content: 'Show aepp';
+      }
+
+      iframe {
+        display: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/examples/browser/wallet-iframe/src/styles.scss b/examples/browser/wallet-iframe/src/styles.scss
@@ -6,7 +6,7 @@ body {
   @extend .bg-gray-300;
 
   #app {
-    @extend .p-4, .flex, .flex-col, .w-full, .h-screen;
+    @extend .p-4, .flex, .flex-col, .w-full, .min-h-screen;
 
     iframe {
       @extend .flex-grow, .mt-4, .bg-white, .border, .border-black, .border-dashed;