fixed iphone numpad not showing decimal point
This commit is contained in:
sairaj mote
parent
a173ef09dd
commit
51dd2b7de2
413
components.js
413
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,148 +689,150 @@ customElements.define('sm-input',
|
||||
})
|
||||
const smNotifications = document.createElement('template')
|
||||
smNotifications.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
--icon-height: 1.5rem;
|
||||
--icon-width: 1.5rem;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.notification-panel{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
max-height: 100%;
|
||||
padding: 1rem;
|
||||
overflow: hidden auto;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
.notification-panel:empty{
|
||||
display:none;
|
||||
}
|
||||
.notification{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--background-color, (255,255,255)), 1);
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.icon-container:not(:empty){
|
||||
margin-right: 0.5rem;
|
||||
height: var(--icon-height);
|
||||
width: var(--icon-width);
|
||||
}
|
||||
h4:first-letter,
|
||||
p:first-letter{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h4{
|
||||
font-weight: 400;
|
||||
}
|
||||
p{
|
||||
line-height: 1.6;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
color: rgba(var(--text-color, (17,17,17)), 0.9);
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.notification:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.icon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
fill: rgba(var(--text-color, (17,17,17)), 0.7);
|
||||
}
|
||||
.icon--success {
|
||||
fill: var(--green);
|
||||
}
|
||||
.icon--failure,
|
||||
.icon--error {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
.close{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
border-radius: 50%;
|
||||
padding: 0.3rem;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
background-color: transparent;
|
||||
}
|
||||
.close:active{
|
||||
transform: scale(0.9);
|
||||
}
|
||||
@media screen and (min-width: 640px){
|
||||
.notification-panel{
|
||||
max-width: 28rem;
|
||||
width: max-content;
|
||||
}
|
||||
.notification{
|
||||
width: auto;
|
||||
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb{
|
||||
background: rgba(var(--text-color, (17,17,17)), 0.3);
|
||||
border-radius: 1rem;
|
||||
&:hover{
|
||||
background: rgba(var(--text-color, (17,17,17)), 0.5);
|
||||
}
|
||||
}
|
||||
.close:hover{
|
||||
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="notification-panel"></div>
|
||||
`;
|
||||
|
||||
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
--icon-height: 1.5rem;
|
||||
--icon-width: 1.5rem;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.notification-panel{
|
||||
display: grid;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
position: fixed;
|
||||
left: 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;
|
||||
}
|
||||
.notification{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-radius: 0.3rem;
|
||||
background: rgba(var(--foreground-color, (255,255,255)), 1);
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
touch-action: none;
|
||||
}
|
||||
.icon-container:not(:empty){
|
||||
margin-right: 0.5rem;
|
||||
height: var(--icon-height);
|
||||
width: var(--icon-width);
|
||||
}
|
||||
h4:first-letter,
|
||||
p:first-letter{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
h4{
|
||||
font-weight: 400;
|
||||
}
|
||||
p{
|
||||
line-height: 1.6;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
color: rgba(var(--text-color, (17,17,17)), 0.9);
|
||||
overflow-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.notification:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.icon {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
fill: rgba(var(--text-color, (17,17,17)), 0.7);
|
||||
}
|
||||
.icon--success {
|
||||
fill: var(--green);
|
||||
}
|
||||
.icon--failure,
|
||||
.icon--error {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
.close{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
border-radius: 50%;
|
||||
padding: 0.3rem;
|
||||
transition: background-color 0.3s, transform 0.3s;
|
||||
background-color: transparent;
|
||||
}
|
||||
.close:active{
|
||||
transform: scale(0.9);
|
||||
}
|
||||
@media screen and (min-width: 640px){
|
||||
.notification-panel{
|
||||
max-width: 28rem;
|
||||
width: max-content;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.notification{
|
||||
width: auto;
|
||||
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
width: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb{
|
||||
background: rgba(var(--text-color, (17,17,17)), 0.3);
|
||||
border-radius: 1rem;
|
||||
&:hover{
|
||||
background: rgba(var(--text-color, (17,17,17)), 0.5);
|
||||
}
|
||||
}
|
||||
.close:hover{
|
||||
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<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) {
|
||||
@ -867,16 +885,16 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
notification.classList.add('notification');
|
||||
let composition = ``;
|
||||
composition += `
|
||||
<div class="icon-container">${icon}</div>
|
||||
<p>${message}</p>
|
||||
`;
|
||||
<div class="icon-container">${icon}</div>
|
||||
<p>${message}</p>
|
||||
`;
|
||||
if (pinned) {
|
||||
notification.classList.add('pinned');
|
||||
composition += `
|
||||
<button class="close">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||
</button>
|
||||
`;
|
||||
<button class="close">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
notification.innerHTML = composition;
|
||||
return notification;
|
||||
@ -884,28 +902,45 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
|
||||
push(message, options = {}) {
|
||||
const notification = this.createNotification(message, options);
|
||||
this.notificationPanel.append(notification);
|
||||
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 {
|
||||
|
||||
21
index.html
21
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()"
|
||||
disabled>Add</button>
|
||||
<button class="button button--primary cta" type="submit" onclick="saveFloId()" disabled>Add</button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<sm-popup id="edit_saved_popup">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user