UI improvements

This commit is contained in:
sairaj mote 2023-09-04 04:06:20 +05:30
parent 9d63e36e23
commit 9a72ffa7db
4 changed files with 26 additions and 20 deletions

View File

@ -872,7 +872,7 @@ h3 {
display: none !important;
}
}
@media screen and (min-width: 64rem) {
@media screen and (min-width: 40rem) {
h1 {
font-size: 3vw;
}
@ -882,6 +882,11 @@ h3 {
.popup__header {
padding: 1.5rem 1.5rem 0 0.75rem;
}
#request_loan_popup {
--width: 32rem;
}
}
@media screen and (min-width: 46rem) {
#main_page {
grid-template-columns: 18rem 1fr;
}
@ -891,9 +896,6 @@ h3 {
top: 1rem;
overflow-y: auto;
}
#request_loan_popup {
--width: 32rem;
}
}
@media (any-hover: hover) {
::-webkit-scrollbar {

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -826,7 +826,7 @@ h3 {
}
}
@media screen and (min-width: 64rem) {
@media screen and (min-width: 40rem) {
h1 {
font-size: 3vw;
}
@ -836,6 +836,11 @@ h3 {
.popup__header {
padding: 1.5rem 1.5rem 0 0.75rem;
}
#request_loan_popup {
--width: 32rem;
}
}
@media screen and (min-width: 46rem) {
#main_page {
grid-template-columns: 18rem 1fr;
& > :first-child {
@ -844,9 +849,6 @@ h3 {
overflow-y: auto;
}
}
#request_loan_popup {
--width: 32rem;
}
}
@media (any-hover: hover) {
::-webkit-scrollbar {

View File

@ -971,8 +971,8 @@
My Loans
${myLoanRequests.length ? html`<span class="badge">${myLoanRequests.length}</span>` : ''}
</sm-chip>
<sm-chip value="loan-requests" selected=${view === 'loan-requests'}>
Loan requests
<sm-chip value="lend" selected=${view === 'lend'}>
Lend
${loanRequests.length ? html`<span class="badge">${loanRequests.length}</span>` : ''}
</sm-chip>
</sm-chips>
@ -993,20 +993,22 @@
</div>
`}
`: ''}
${view === 'loan-requests' ? html`
${view === 'lend' ? html`
<div class="grid gap-2 align-center justify-center" style="padding: 2vw 0;">
<div class="grid">
<h2>Earn interest on your USD tokens</h2>
<p>Lend your USD tokens to earn interest assured by BTC collateral.</p>
</div>
</div>
${loanRequests.length ? html`
<ul id="loan_requests_list">
${loanRequests.reverse().map(requestId => render.loanRequest(requestId, floGlobals.loanRequests[requestId]))}
</ul>
`: html`
<div class="grid gap-2 align-center justify-center" style="padding: 2vw 0;">
<div class="grid gap-0-5">
<h1>Earn interest on your USD tokens</h1>
<p>Lend your USD tokens to earn interest assured by BTC collateral.</p>
</div>
<strong>
Borrower loan requests will appear here
</strong>
<strong>
Loan requests will appear here
</strong>
`}
`: ''}
</div>