RanchiMall/floscout-testnet
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-04-15 16:36:21 +05:30
parent 82a2c569f9
commit b004720c0b
4 changed files with 52 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -1054,6 +1054,16 @@ p {
flex-direction: column;
}
#participant_container {
display: grid;
gap: 2.5rem;
}
.participant {
flex-wrap: wrap;
gap: 2rem;
}
@media only screen and (min-width: 640px) {
.margin,
.page {
@ -1092,8 +1102,13 @@ p {
grid-template-columns: 2fr 1fr 1fr;
align-items: center;
}
#contract_info {
gap: 1rem 4rem;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}
.info-row {
flex-direction: row;
align-items: center;
}
.info-row h5 {
min-width: 11rem;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
css/main.scss
View File

@ -960,6 +960,14 @@ p {
.info-row {
flex-direction: column;
}
#participant_container {
display: grid;
gap: 2.5rem;
}
.participant {
flex-wrap: wrap;
gap: 2rem;
}
@media only screen and (min-width: 640px) {
.margin,
.page {
@ -1004,8 +1012,13 @@ p {
grid-template-columns: 2fr 1fr 1fr;
align-items: center;
}
#contract_info {
gap: 1rem 4rem;
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}
.info-row {
flex-direction: row;
align-items: center;
h5 {
min-width: 11rem;
}

29
index.html
View File

@ -833,7 +833,7 @@
`)}
</ul>
`: ''}
<div class="card grid gap-1-5" style="grid-template-columns: repeat(auto-fill, minmax(24rem,1fr)); gap: 1rem 3rem">
<div id="contract_info" class="card grid gap-1-5">
<div class="flex gap-0-5 info-row">
<h5 class="label">Contract Type</h5>
<h4>${replaceDash(contractType)}</h4>
@ -953,11 +953,28 @@
participantCard(details) {
const { participantFloAddress, participationAmount, swapAmount, swapPrice, transactionHash, accepting_token, selling_token } = details;
return html`
<li class="flex align-center flex-wrap participant">
<a href=${`#/address/${participantFloAddress}`} class="address wrap-around">${participantFloAddress}</a> swapped
<h4>${formatAmount(participationAmount, 'usd')} ${accepting_token}</h4> with
<h4>${formatAmount(swapAmount, 'usd')} ${selling_token}</h4> @
<h4>${formatAmount(swapPrice, 'usd')} ${accepting_token}</h4>
<li class="flex participant">
<div class="grid gap-0-5 flex-1">
<div class="flex align-center gap-0-5">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/></svg>
<h5>Token swap</h5>
</div>
<a href=${`#/address/${participantFloAddress}`} class="address wrap-around">${participantFloAddress}</a>
</div>
<div class="grid align-center gap-1 flex-1" style="grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr))">
<div>
<h5 class="label">Input amount</h5>
<b>${formatAmount(participationAmount, 'usd')} ${accepting_token}</b>
</div>
<div>
<h5 class="label">Output amount</h5>
<b>${formatAmount(swapAmount, 'usd')} ${selling_token}</b>
</div>
<div>
<h5 class="label">Exchange rate</h5>
<b>${formatAmount(swapPrice, 'usd')} ${accepting_token}</b>
</div>
</div>
</li>
`;
},