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

larger screen specific enhancements

Browse Source
This commit is contained in:
sairaj mote 2023-02-17 01:48:55 +05:30
parent 6d7de287dd
commit 5dddaa626c
4 changed files with 61 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
css/main.css
View File

@ -219,6 +219,10 @@ sm-textarea button .icon {
fill: var(--accent-color);
}
sm-textarea {
--max-height: auto;
}
sm-spinner {
--size: 1rem;
--stroke-width: 0.1rem;
@ -774,9 +778,15 @@ h3 {
grid-template-columns: auto 1fr auto;
}
#flo_id_name {
overflow: hidden;
text-overflow: ellipsis;
#queried_flo_address {
margin: 0.5rem 0;
margin-left: 0.7rem;
}
#queried_flo_address h4 {
font-size: 1.1rem;
}
#queried_flo_address > sm-copy {
font-size: 0.8rem;
}
#token_list {
@ -967,7 +977,6 @@ h3 {
grid-template-rows: auto 1fr;
grid-template-areas: "nav header" "nav main";
position: relative;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
background-color: rgba(var(--foreground-color), 0.9);
@ -1011,10 +1020,20 @@ h3 {
grid-template-columns: 45% 1fr;
}
}
@media screen and (min-width: 56rem) {
@media screen and (min-width: 64rem) {
#main_card {
height: 80vh;
width: 56rem;
border-radius: 0.5rem;
height: 90vh;
width: 80vw;
}
#transactions_scroller {
grid-template-columns: 22rem 1fr;
align-items: flex-start;
}
#transactions_hero_section {
position: -webkit-sticky;
position: sticky;
top: 0;
}
}
@media (any-hover: hover) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
css/main.scss
View File

@ -210,6 +210,9 @@ sm-textarea {
}
}
}
sm-textarea {
--max-height: auto;
}
sm-spinner {
--size: 1rem;
--stroke-width: 0.1rem;
@ -740,9 +743,15 @@ h3 {
}
}
}
#flo_id_name {
overflow: hidden;
text-overflow: ellipsis;
#queried_flo_address {
margin: 0.5rem 0;
margin-left: 0.7rem;
h4 {
font-size: 1.1rem;
}
& > sm-copy {
font-size: 0.8rem;
}
}
#token_list {
display: flex;
@ -917,7 +926,6 @@ h3 {
grid-template-rows: auto 1fr;
grid-template-areas: "nav header" "nav main";
position: relative;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
0 1rem 3rem rgba(0, 0, 0, 0.2);
@ -967,10 +975,19 @@ h3 {
}
}
}
@media screen and (min-width: 56rem) {
@media screen and (min-width: 64rem) {
#main_card {
height: 80vh;
width: 56rem;
border-radius: 0.5rem;
height: 90vh;
width: 80vw;
}
#transactions_scroller {
grid-template-columns: 22rem 1fr;
align-items: flex-start;
}
#transactions_hero_section {
position: sticky;
top: 0;
}
}

14
index.html
View File

@ -24,6 +24,7 @@
<script src="scripts/floBlockchainAPI.js"></script>
<script src="scripts/compactIDB.js"></script>
<script src="scripts/flo-webwallet.js"></script>
<script src="https://unpkg.com/uhtml@3.0.1/es.js"></script>
<script>
function onLoadStartUp() {
var IDBObjects = {
@ -207,7 +208,6 @@
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg>
</a>
<h4 id="flo_id_name"></h4>
<button class="icon-only" style="margin-left:auto" onclick="render.transactions()"
title="Refresh">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@ -218,6 +218,7 @@
</svg>
</button>
</div>
<div id="queried_flo_address"></div>
</header>
<section id="transactions_scroller" class="grid gap-2" style="overflow-y: auto;padding: 0 1.5rem;">
<div id="transactions_hero_section" class="grid gap-2"
@ -344,7 +345,7 @@
<sm-input id="amount" type="number" placeholder="Amount" step="0.00001" min="0.00001"
error-text="Invalid amount" animate required>
</sm-input>
<sm-textarea id="flo_data_textarea" placeholder="FLO data" rows="4" maxlength="1040" animate>
<sm-textarea id="flo_data_textarea" placeholder="FLO data" rows="8" maxlength="1040" animate>
</sm-textarea>
<div id="show_character_count">1040/1040</div>
<p id="flo_data_status"></p>
@ -676,6 +677,7 @@
</template>
<script>
// Global variables
const { html, render: renderElem } = uhtml;
const domRefs = {};
const currentYear = new Date().getFullYear();
@ -1301,7 +1303,7 @@
hasTokens = true
frag.append(createElement('li', {
className: 'token-item',
innerHTML: `<span>${token}: </span><span>${floAddressBalances[token].balance}</span>`
innerHTML: `<span>${token}: </span><span>${parseFloat(floAddressBalances[token].balance.toFixed(8))}</span>`
}))
}
if (hasTokens) {
@ -1319,7 +1321,11 @@
notify(error, 'error');
})
floWebWallet.getLabels().then(allLabels => {
getRef('flo_id_name').textContent = allLabels.hasOwnProperty(queriedFloId) ? allLabels[queriedFloId] === 'Unknown' ? queriedFloId : allLabels[queriedFloId] : queriedFloId
if (allLabels[queriedFloId]) {
renderElem(getRef('queried_flo_address'), html`<h4>${allLabels[queriedFloId]}</h4> <sm-copy clip-text value=${queriedFloId}></sm-copy>`)
} else {
renderElem(getRef('queried_flo_address'), html`<h4><sm-copy clip-text value=${queriedFloId}></sm-copy></h4>`)
}
})
// render transactions
getRef('transactions_scroller').nextElementSibling.classList.remove('hide')