From e3c9d733ce9ddd2e6e3dffa1770396d1bc9a6ca3 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 31 Oct 2019 19:40:14 +0530 Subject: [PATCH] FLO web wallet 2.7.1 Fixed - -Solved an issue where if an address had a longer label, it would expand in title bar beyond limited height when viewing transactions. - Solved an issue where text inside disconnectivity banner would change to white in dark mode, causing low contrast issue. Added - - Added option for checking FLO balance directly from the address card options. --- FLO_webWallet_mainnet.html | 165 ++++++++++++++++++++++++------------- 1 file changed, 107 insertions(+), 58 deletions(-) diff --git a/FLO_webWallet_mainnet.html b/FLO_webWallet_mainnet.html index 9b60578..d9a7e3a 100644 --- a/FLO_webWallet_mainnet.html +++ b/FLO_webWallet_mainnet.html @@ -309,6 +309,28 @@ textarea, input { bottom: 54px; } +#loadBalance, #spinner { + position: absolute; + top: 0; + right: 0; + width: 2em; + height: 2em; + padding: 0.3em; + margin: 1.9em 1em; +} + +#loadBalance .p1, #spinner .p1 { + fill: none; +} + +#loadBalance .p2, #spinner .p2 { + fill: var(--accent-color); +} + +#spinner { + margin: 0.7em 0; +} + #sendData #sdleft { display: -webkit-box; display: -ms-flexbox; @@ -353,25 +375,6 @@ textarea, input { border: 1px solid var(--accent-color); } -#sendData #sdleft #loadBalance { - opacity: 0; - position: absolute; - top: 0; - right: 0; - width: 2em; - height: 2em; - padding: 0.3em; - margin: 2em 1em; -} - -#sendData #sdleft #loadBalance #p1 { - fill: none; -} - -#sendData #sdleft #loadBalance #p2 { - fill: var(--accent-color); -} - #sendData #sdright { opacity: 0.6; -ms-flex-wrap: wrap; @@ -631,7 +634,7 @@ input[type=number] { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; - text-overflow: ellipsis; + width: calc(100% - 8em); font-weight: bold; line-height: 1.5em; } @@ -643,6 +646,9 @@ input[type=number] { .title-bar h3 { margin: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #dispMsg trans-container { @@ -819,7 +825,7 @@ loading #p2 { width: 100% !important; } -#edit-container #edit svg { +#edit-container #edit #loadingSvg { top: 0; -ms-flex-item-align: center; -ms-grid-row-align: center; @@ -831,7 +837,7 @@ loading #p2 { height: 2em; width: 2em; padding: 0.5em; - margin: 4.8em 1.5em 1em 1.5em; + margin: 1.7em 1em 1em 1.5em; -webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease; z-index: 2; @@ -839,21 +845,48 @@ loading #p2 { cursor: pointer; } -#edit-container #edit svg:hover { +#edit-container #edit #loadingSvg:hover { background: var(--sec-color); } +#edit-container #edit div:first-of-type { + position: relative; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-line-pack: center; + align-content: center; + margin-bottom: 1em; +} + +#edit-container #edit div:first-of-type button { + display: flexbox; + white-space: nowrap; + margin-left: 0 !important; + -ms-flex-item-align: center; + align-self: center; +} + +#edit-container #edit div:first-of-type h4 { + padding: 0; + -ms-flex-item-align: center; + align-self: center; + display: flexbox; + text-align: right; +} + +#edit-container #edit h4 { + padding-right: 2em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + #edit-container #edit button:nth-of-type(2) { margin-left: auto !important; } -#edit-container #edit div:first-of-type { - word-break: break-all; - opacity: 0.6; - margin: 1em 0; - padding-right: 2em; -} - #edit-container #edit h3, #edit-container #edit h4, #edit-container #edit h5 { display: flexbox; width: 100%; @@ -1188,6 +1221,7 @@ input:checked + .slider:before { padding: 1em; z-index: 11; background: khaki; + color: #000; } .spin { @@ -1538,20 +1572,20 @@ input:checked + .slider:before { @media screen and (min-width: 1280px) { #main-card { - width: 60% !important; + width: 60vw !important; height: 80vh !important; } } @media screen and (min-width: 1600px) { #main-card { - width: 50% !important; + width: 50vw !important; } } @media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) { #main-card { - width: 80% !important; + width: 80vw !important; height: 60vh !important; } monitor svg { @@ -1561,7 +1595,7 @@ input:checked + .slider:before { @media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) { #main-card { - width: 80% !important; + width: 80vw !important; height: 70vh !important; } monitor svg { @@ -1717,19 +1751,29 @@ input:checked + .slider:before {

Edit display card

+ + Copy FLO address + +
- Flo address + + + + + + + +

- - Copy FLO address - - @@ -1771,11 +1815,11 @@ input:checked + .slider:before {
- + - - @@ -1874,7 +1918,7 @@ input:checked + .slider:before {

About

-
Version 2.6
+
Version 2.7.1
Powered by
{ + loading.classList.remove('show', 'spin'); + document.getElementById('showBalance').textContent = `${balance} FLOs`; + }).catch((error) => { + loading.classList.remove('show', 'spin'); + document.getElementById('showBalance').textContent = `Something went wrong!`; + }) + } + function getBal(){ let x= document.getElementById("getBal_addr"), loading = document.getElementById('loadBalance'), @@ -2347,9 +2403,9 @@ input:checked + .slider:before { tCont.innerHTML= ` - - @@ -2471,7 +2527,7 @@ input:checked + .slider:before { let x = document.getElementById('edit'); x.classList.add('slide-up'); newAddrLabel.focus(); - x.children[1].textContent = parent.children[1].textContent; + x.children[0].textContent = parent.children[1].textContent; newAddrLabel.value = parent.children[0].textContent; let y =document.addEventListener("click", function(event) { if (event.target.closest('#edit') || event.target.closest('.edit-options')) return; @@ -2506,6 +2562,7 @@ input:checked + .slider:before { document.getElementById('edit-container').classList.remove('show'); document.getElementById('edit').classList.remove('slide-up'); newAddrLabel.value=''; + document.getElementById('showBalance').textContent = ``; } function createAllCards(){ @@ -2588,9 +2645,7 @@ input:checked + .slider:before { console.log('hey') document.getElementById('transactions-container').scrollTop = 0; } - - - - - -