fixed iphone numpad not showing decimal point

components.js

@@ -647,7 +647,7 @@ customElements.define('sm-input',
                 }
                 else if (name === 'type') {
                     if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
-                        this.input.setAttribute('inputmode', 'numeric');
+                        this.input.setAttribute('inputmode', 'decimal');
                     }
                 }
                 else if (name === 'helper-text') {
@@ -689,7 +689,7 @@ customElements.define('sm-input',
     })
 const smNotifications = document.createElement('template')
 smNotifications.innerHTML = `
-<style>
+            <style>
                 *{
                     padding: 0;
                     margin: 0;
@@ -711,13 +711,14 @@ smNotifications.innerHTML = `
                     gap: 0.5rem;
                     position: fixed;
                     left: 0;
-        bottom: 0;
+                    top: 0;
                     z-index: 100;
                     max-height: 100%;
                     padding: 1rem;
                     overflow: hidden auto;
                     -ms-scroll-chaining: none;
                         overscroll-behavior: contain;
+                    touch-action: none;
                 }
                 .notification-panel:empty{
                     display:none;
@@ -728,7 +729,7 @@ smNotifications.innerHTML = `
                     display: flex;
                     position: relative;
                     border-radius: 0.3rem;
-        background: rgba(var(--background-color, (255,255,255)), 1);
+                    background: rgba(var(--foreground-color, (255,255,255)), 1);
                     overflow: hidden;
                     overflow-wrap: break-word;
                     word-wrap: break-word;
@@ -741,6 +742,7 @@ smNotifications.innerHTML = `
                     max-width: 100%;
                     padding: 1rem;
                     align-items: center;
+                    touch-action: none;
                 }
                 .icon-container:not(:empty){
                     margin-right: 0.5rem;
@@ -804,6 +806,8 @@ smNotifications.innerHTML = `
                     .notification-panel{
                         max-width: 28rem;
                         width: max-content;
+                        top: auto;
+                        bottom: 0;
                     }
                     .notification{
                         width: auto;
@@ -826,11 +830,9 @@ smNotifications.innerHTML = `
                         background-color: rgba(var(--text-color, (17,17,17)), 0.1);
                     }
                 }
-</style>
+            </style>
-<div class="notification-panel"></div>
+            <div class="notification-panel"></div>
-`;
+            `;
-
-
 customElements.define('sm-notifications', class extends HTMLElement {
     constructor() {
         super();
@@ -849,7 +851,23 @@ customElements.define('sm-notifications', class extends HTMLElement {
         this.createNotification = this.createNotification.bind(this)
         this.removeNotification = this.removeNotification.bind(this)
         this.clearAll = this.clearAll.bind(this)
+        this.handlePointerMove = this.handlePointerMove.bind(this)
 
+
+        this.startX = 0;
+        this.currentX = 0;
+        this.endX = 0;
+        this.swipeDistance = 0;
+        this.swipeDirection = '';
+        this.swipeThreshold = 0;
+        this.startTime = 0;
+        this.swipeTime = 0;
+        this.swipeTimeThreshold = 200;
+        this.currentTarget = null;
+
+        this.mediaQuery = window.matchMedia('(min-width: 640px)')
+        this.handleOrientationChange = this.handleOrientationChange.bind(this)
+        this.isLandscape = false
     }
 
     randString(length) {
@@ -884,28 +902,45 @@ customElements.define('sm-notifications', class extends HTMLElement {
 
     push(message, options = {}) {
         const notification = this.createNotification(message, options);
+        if (this.isLandscape)
             this.notificationPanel.append(notification);
+        else
+            this.notificationPanel.prepend(notification);
+        this.notificationPanel.animate(
+            [
+                {
+                    transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`,
+                },
+                {
+                    transform: `none`,
+                },
+            ], this.animationOptions
+        )
         notification.animate([
             {
-                transform: `translateY(1rem)`,
+                transform: `translateY(-1rem)`,
                 opacity: '0'
             },
             {
                 transform: `none`,
                 opacity: '1'
             },
-        ], this.animationOptions);
+        ], this.animationOptions).onfinish = (e) => {
+            e.target.commitStyles()
+            e.target.cancel()
+        }
         return notification.id;
     }
 
-    removeNotification(notification) {
+    removeNotification(notification, direction = 'left') {
+        const sign = direction === 'left' ? '-' : '+';
         notification.animate([
             {
-                transform: `none`,
+                transform: this.currentX ? `translateX(${this.currentX}px)` : `none`,
                 opacity: '1'
             },
             {
-                transform: `translateY(0.5rem)`,
+                transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
@@ -919,7 +954,70 @@ customElements.define('sm-notifications', class extends HTMLElement {
         });
     }
 
+    handlePointerMove(e) {
+        this.currentX = e.clientX - this.startX;
+        this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
+    }
+
+    handleOrientationChange(e) {
+        this.isLandscape = e.matches
+        if (e.matches) {
+            // landscape
+
+        } else {
+            // portrait
+        }
+    }
     connectedCallback() {
+
+        this.handleOrientationChange(this.mediaQuery);
+
+        this.mediaQuery.addEventListener('change', this.handleOrientationChange);
+        this.notificationPanel.addEventListener('pointerdown', e => {
+            if (e.target.closest('.notification')) {
+                this.swipeThreshold = this.clientWidth / 2;
+                this.currentTarget = e.target.closest('.notification');
+                this.currentTarget.setPointerCapture(e.pointerId);
+                this.startTime = Date.now();
+                this.startX = e.clientX;
+                this.startY = e.clientY;
+                this.notificationPanel.addEventListener('pointermove', this.handlePointerMove);
+            }
+        });
+        this.notificationPanel.addEventListener('pointerup', e => {
+            this.endX = e.clientX;
+            this.endY = e.clientY;
+            this.swipeDistance = Math.abs(this.endX - this.startX);
+            this.swipeTime = Date.now() - this.startTime;
+            if (this.endX > this.startX) {
+                this.swipeDirection = 'right';
+            } else {
+                this.swipeDirection = 'left';
+            }
+            if (this.swipeTime < this.swipeTimeThreshold) {
+                if (this.swipeDistance > 50)
+                    this.removeNotification(this.currentTarget, this.swipeDirection);
+            } else {
+                if (this.swipeDistance > this.swipeThreshold) {
+                    this.removeNotification(this.currentTarget, this.swipeDirection);
+                } else {
+                    this.currentTarget.animate([
+                        {
+                            transform: `translateX(${this.currentX}px)`,
+                        },
+                        {
+                            transform: `none`,
+                        },
+                    ], this.animationOptions).onfinish = (e) => {
+                        e.target.commitStyles()
+                        e.target.cancel()
+                    }
+                }
+            }
+            this.notificationPanel.removeEventListener('pointermove', this.handlePointerMove)
+            this.notificationPanel.releasePointerCapture(e.pointerId);
+            this.currentX = 0;
+        });
         this.notificationPanel.addEventListener('click', e => {
             if (e.target.closest('.close')) {
                 this.removeNotification(e.target.closest('.notification'));
@@ -941,6 +1039,9 @@ customElements.define('sm-notifications', class extends HTMLElement {
             childList: true,
         });
     }
+    disconnectedCallback() {
+        mediaQueryList.removeEventListener('change', handleOrientationChange);
+    }
 });
 
 class Stack {

index.html

@@ -332,7 +332,6 @@
                     </div>
                 </sm-form>
             </div>
-            <div id="vault" class="page hide"></div>
             <div id="settings" class="page hide gap-2">
                 <h3>Settings</h3>
                 <section class="grid gap-1">
@@ -378,7 +377,7 @@
         <nav id="main_navbar">
             <ul>
                 <li>
-                    <a href="#/home" data-target-page="" class="nav-item interact">
+                    <a href="#/home" class="nav-item interact">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                             width="24px" fill="#000000">
                             <path d="M0 0h24v24H0z" fill="none" />
@@ -397,21 +396,6 @@
                         <span class="nav-item__title">Send</span>
                     </a>
                 </li>
-                <!-- <li>
-                    <a href="#/vault" class="nav-item interact" title='Send FLO data'>
-                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                            height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                            <g>
-                                <path d="M0,0h24v24H0V0z" fill="none" />
-                            </g>
-                            <g>
-                                <path
-                                    d="M12,2L4,5v6.09c0,5.05,3.41,9.76,8,10.91c4.59-1.15,8-5.86,8-10.91V5L12,2z M10.94,15.54L7.4,12l1.41-1.41l2.12,2.12 l4.24-4.24l1.41,1.41L10.94,15.54z" />
-                            </g>
-                        </svg>
-                        <span class="nav-item__title">Vault</span>
-                    </a>
-                </li> -->
                 <li>
                     <a href="#/settings" class="nav-item interact">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
@@ -448,8 +432,7 @@
                 required>
             </sm-input>
             <sm-input id="addrLabel" placeholder="Name" animate></sm-input>
-            <button id="addAddressToMonitor" class="button button--primary cta" type="submit" onclick="saveFloId()"
+            <button class="button button--primary cta" type="submit" onclick="saveFloId()" disabled>Add</button>
-                disabled>Add</button>
         </sm-form>
     </sm-popup>
     <sm-popup id="edit_saved_popup">