Minor UI fixes
This commit is contained in:
sairaj mote
parent
e654cd11e4
commit
76eb168171
@ -690,150 +690,150 @@ customElements.define('sm-input',
|
|||||||
|
|
||||||
const smNotifications = document.createElement('template')
|
const smNotifications = document.createElement('template')
|
||||||
smNotifications.innerHTML = `
|
smNotifications.innerHTML = `
|
||||||
<style>
|
<style>
|
||||||
*{
|
*{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
:host{
|
:host{
|
||||||
display: flex;
|
display: flex;
|
||||||
--icon-height: 1.5rem;
|
--icon-height: 1.5rem;
|
||||||
--icon-width: 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);
|
|
||||||
}
|
}
|
||||||
}
|
.hide{
|
||||||
.close:hover{
|
opacity: 0 !important;
|
||||||
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
|
pointer-events: none !important;
|
||||||
}
|
}
|
||||||
}
|
.notification-panel{
|
||||||
</style>
|
display: grid;
|
||||||
<div class="notification-panel"></div>
|
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 {
|
customElements.define('sm-notifications', class extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@ -886,16 +886,16 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
|||||||
notification.classList.add('notification');
|
notification.classList.add('notification');
|
||||||
let composition = ``;
|
let composition = ``;
|
||||||
composition += `
|
composition += `
|
||||||
<div class="icon-container">${icon}</div>
|
<div class="icon-container">${icon}</div>
|
||||||
<p>${message}</p>
|
<p>${message}</p>
|
||||||
`;
|
`;
|
||||||
if (pinned) {
|
if (pinned) {
|
||||||
notification.classList.add('pinned');
|
notification.classList.add('pinned');
|
||||||
composition += `
|
composition += `
|
||||||
<button class="close">
|
<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>
|
<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>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
notification.innerHTML = composition;
|
notification.innerHTML = composition;
|
||||||
return notification;
|
return notification;
|
||||||
@ -941,7 +941,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
|||||||
opacity: '1'
|
opacity: '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
transform: `translateX(calc(${sign}${this.currentX}px ${sign} 1rem))`,
|
transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
|
||||||
opacity: '0'
|
opacity: '0'
|
||||||
}
|
}
|
||||||
], this.animationOptions).onfinish = () => {
|
], this.animationOptions).onfinish = () => {
|
||||||
|
|||||||
@ -226,9 +226,9 @@
|
|||||||
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
|
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
|
||||||
</svg>
|
</svg>
|
||||||
<h4>
|
<h4>
|
||||||
No orders placed yet.
|
No orders placed yet
|
||||||
</h4>
|
</h4>
|
||||||
<p>My orders will only show completed orders.</p>
|
<p>My orders will only show completed orders</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section id="market" class="grid gap-1 hide mobile-page">
|
<section id="market" class="grid gap-1 hide mobile-page">
|
||||||
@ -402,7 +402,7 @@
|
|||||||
<div class="grid gap-0-5">
|
<div class="grid gap-0-5">
|
||||||
<h4>Add password lock</h4>
|
<h4>Add password lock</h4>
|
||||||
<p>
|
<p>
|
||||||
Adding a password lock allows to authenticate transactions with custom a password instead of
|
Adding a password lock allows to authenticate transactions with a custom password instead of
|
||||||
private key.
|
private key.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user