RanchiMall/flowallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements

Browse Source
This commit is contained in:
sairaj mote 2023-10-04 03:13:04 +05:30
parent fc2dafa686
commit 8f0de4b0f0
4 changed files with 38 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -990,7 +990,7 @@ h3 {
#transaction_result { #transaction_result {
display: grid; display: grid;
gap: 0.5rem; gap: 1.5rem;
height: max(40vh, 24rem); height: max(40vh, 24rem);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -1004,7 +1004,7 @@ h3 {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
#transaction_result .icon { #transaction_result > .icon {
justify-self: center; justify-self: center;
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
@ -1013,18 +1013,21 @@ h3 {
-webkit-animation: popup 1s; -webkit-animation: popup 1s;
animation: popup 1s; animation: popup 1s;
} }
#transaction_result .icon--success { #transaction_result > .icon--success {
fill: rgba(var(--background-color), 1); fill: rgba(var(--background-color), 1);
padding: 1rem; padding: 1rem;
background-color: #0bbe56; background-color: #0bbe56;
} }
#transaction_result .icon--failed { #transaction_result > .icon--failed {
background-color: rgba(var(--text-color), 0.03); background-color: rgba(var(--text-color), 0.03);
fill: var(--danger-color); fill: var(--danger-color);
} }
#transaction_result sm-copy { #transaction_result sm-copy {
font-size: 0.8rem; font-size: 0.8rem;
} }
#transaction_result #transaction_link {
justify-self: center;
}
@-webkit-keyframes popup { @-webkit-keyframes popup {
0% { 0% {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
css/main.scss
View File

@ -959,7 +959,7 @@ h3 {
} }
#transaction_result { #transaction_result {
display: grid; display: grid;
gap: 0.5rem; gap: 1.5rem;
height: max(40vh, 24rem); height: max(40vh, 24rem);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -972,7 +972,7 @@ h3 {
text-align: center; text-align: center;
width: 100%; width: 100%;
} }
.icon { & > .icon {
justify-self: center; justify-self: center;
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;
@ -992,6 +992,9 @@ h3 {
sm-copy { sm-copy {
font-size: 0.8rem; font-size: 0.8rem;
} }
#transaction_link {
justify-self: center;
}
} }
@keyframes popup { @keyframes popup {
0% { 0% {

45
index.html
View File

@ -2708,24 +2708,27 @@
description = success ? 'This might take upto 30 mins to complete and reflect on blockchain.' : result description = success ? 'This might take upto 30 mins to complete and reflect on blockchain.' : result
renderElem(getRef('transaction_result'), html` renderElem(getRef('transaction_result'), html`
${success ? html` ${success ? html`
<svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg> <svg class="icon icon--success" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" /> </svg>
` : ''} ` : ''}
${!success ? html` ${!success ? html`
<svg class="icon icon--failed" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" /> </svg> <svg class="icon icon--failed" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none" /> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" /> </svg>
` : ''} ` : ''}
<h3 id="transaction_result__title">${title}</h3> <h3 id="transaction_result__title">${title}</h3>
<p id="transaction_result__description"> ${description} </p> <p id="transaction_result__description"> ${description} </p>
${success && result ? html` ${success && result ? html`
<div class="grid gap-1"> <div class="grid gap-1">
<a id="transaction_link" href=${`${floBlockchainAPI.current_server}tx/${result}`} style="margin-top: 1.5rem;" target="_blank">See transaction on blockchain</a> <a id="transaction_link" class="flex align-center button--colored" href=${`${floBlockchainAPI.current_server}tx/${result}`} style="margin-top: 1.5rem;" target="_blank">
<div class="grid"> See transaction on blockchain
<span class="label">Transaction ID</span> <svg class="icon margin-left-0-5" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <path d="M0 0h24v24H0z" fill="none"></path> <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path> </svg>
<sm-copy class="justify-self-center" value=${result}></sm-copy> </a>
</div> <div class="grid">
</div> <span class="label">Transaction ID</span>
` : ''} <sm-copy class="justify-self-center" value=${result}></sm-copy>
`) </div>
</div>
` : ''}
`)
openPopup('transaction_result_popup') openPopup('transaction_result_popup')
} }
@ -3215,8 +3218,10 @@
floBlockchainAPI.writeData(creatorAddress, floData, creatorPrivateKey, creatorAddress).then((txid) => { floBlockchainAPI.writeData(creatorAddress, floData, creatorPrivateKey, creatorAddress).then((txid) => {
showTransactionResult(true, txid, { showTransactionResult(true, txid, {
title: 'Smart contract creation initiated', title: 'Smart contract creation initiated',
description: html`Check details about your smart contract <a href=${`https://ranchimall.github.io/floscout/#/contract/${contractName}-${creatorAddress}`} target="_blank" rel="noopener noreferrer">here</a>. description: html`
<br> It may take some time for the smart contract to be created.` <strong> It may take some time for the smart contract to be created.</strong><br>
<a class="button button--small button--primary" style="margin-top: 0.5rem;" href=${`https://ranchimall.github.io/floscout/#/smart-contracts`} target="_blank" rel="noopener noreferrer">Check out created smart contract</a>
`
}) })
getRef('smart_contract_creation_form').reset() getRef('smart_contract_creation_form').reset()
document.getElementById('create_contract_button').disabled = true document.getElementById('create_contract_button').disabled = true