UI improvements

This commit is contained in:
sairaj mote 2023-06-04 02:55:25 +05:30
parent a8c2c6187e
commit b293fb3f06
4 changed files with 140 additions and 19 deletions

View File

@ -37,9 +37,9 @@ body[data-theme=dark] * {
} }
p { p {
font-size: 0.8; font-size: 0.9rem;
max-width: 65ch; max-width: 65ch;
line-height: 1.7; line-height: 1.5;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
@ -427,13 +427,34 @@ main {
font-weight: 500; font-weight: 500;
} }
#banner {
padding: 1.5rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
margin-bottom: 1.5rem;
}
table {
max-width: 38rem;
}
tr:nth-of-type(2n + 1) {
background: rgba(var(--text-color), 0.06);
}
tr td { tr td {
padding: 0.5rem 0; padding: 0.8rem;
text-align: center; text-align: center;
} }
tr td:first-of-type { tr td:first-of-type {
text-align: left; text-align: left;
} }
tr td:last-of-type {
text-align: right;
}
.stat-value {
font-weight: 700;
}
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
main { main {

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -34,9 +34,9 @@ body[data-theme="dark"] {
} }
} }
p { p {
font-size: 0.8; font-size: 0.9rem;
max-width: 65ch; max-width: 65ch;
line-height: 1.7; line-height: 1.5;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
} }
img { img {
@ -350,15 +350,33 @@ main {
font-weight: 500; font-weight: 500;
} }
} }
#banner {
padding: 1.5rem;
background-color: rgba(var(--text-color), 0.06);
border-radius: 0.5rem;
margin-bottom: 1.5rem;
}
table {
max-width: 38rem;
}
tr { tr {
&:nth-of-type(2n + 1) {
background: rgba(var(--text-color), 0.06);
}
td { td {
padding: 0.5rem 0; padding: 0.8rem;
text-align: center; text-align: center;
&:first-of-type { &:first-of-type {
text-align: left; text-align: left;
} }
&:last-of-type {
text-align: right;
}
} }
} }
.stat-value {
font-weight: 700;
}
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
main { main {
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;

View File

@ -271,18 +271,17 @@
</nav> </nav>
<article class="right language-html"> <article class="right language-html">
<section id="dashboard" class="page"> <section id="dashboard" class="page">
<h1 class="page__title">Tokenroom Economic system</h1> <div class="grid gap-0-5" id="banner">
<div class="grid gap-0-5"> <strong> Target </strong>
<div> <p>Consumption Valuation should be higher than Production valuation.
<p>Target: Consumption Valuation should be higher than Production valuation</p> Amount to go till Consumption Valuation catches up with production Valuation
<p>Amount to go till Consumption Valuation catches up with production Valuation</p> </p>
</div> <b id="amount-left-production-consumption-catchup">
<div id="amount-left-production-consumption-catchup">
<sm-spinner></sm-spinner> <sm-spinner></sm-spinner>
</div> </b>
</div> </div>
<br> <br>
<div class="card-wrapper"> <!-- <div class="card-wrapper">
<div class="card"> <div class="card">
<h3>Expenses</h3> <h3>Expenses</h3>
<p id="total-amount-issued"> <p id="total-amount-issued">
@ -302,13 +301,13 @@
</p> </p>
</div> </div>
<div class="card"> <div class="card">
<h3>Revenue (Booked + stayed)</h3> <h3>Gross Revenue (Booked + stayed)</h3>
<p id="total-consumption-cost"> <p id="total-consumption-cost">
<sm-spinner></sm-spinner> <sm-spinner></sm-spinner>
</p> </p>
</div> </div>
<div class="card"> <div class="card">
<h3>Consumption valuation</h3> <h3>Revenue from stays</h3>
<p id="consumption-valuation"> <p id="consumption-valuation">
<sm-spinner></sm-spinner> <sm-spinner></sm-spinner>
</p> </p>
@ -319,7 +318,90 @@
<sm-spinner></sm-spinner> <sm-spinner></sm-spinner>
</p> </p>
</div> </div>
</div> </div> -->
<table>
<tbody>
<tr>
<td>
<h4>
Expenses
</h4>
<p>
Includes rent of the property, maintenance, staff salaries, etc.
</p>
</td>
<td id="total-amount-issued" class="stat-value">
<sm-spinner></sm-spinner>
</td>
</tr>
<tr>
<td>
<h4>
Price per room night
</h4>
<p>
Includes rent of the property, maintenance, staff salaries, etc.
</p>
</td>
<td id="price-per-unit-consumption" class="stat-value">
<sm-spinner></sm-spinner>
</td>
</tr>
<tr>
<td>
<h4>
Total room nights stayed
</h4>
<p>
Includes rent of the property, maintenance, staff salaries, etc.
</p>
</td>
<td id="total-consumption-measured" class="stat-value">
<sm-spinner></sm-spinner>
</td>
</tr>
<tr>
<td>
<h4>
Gross Revenue (Booked + stayed)
Total room nights stayed
</h4>
<p>
Includes rent of the property, maintenance, staff salaries, etc.
</p>
</td>
<td id="total-consumption-cost" class="stat-value">
<sm-spinner></sm-spinner>
</td>
</tr>
<tr>
<td>
<h4>
Revenue from stays
</h4>
<p>
Includes rent of the property, maintenance, staff salaries, etc.
</p>
</td>
<td id="consumption-valuation" class="stat-value">
<sm-spinner></sm-spinner>
</td>
</tr>
<tr>
<td>
<h4>
System Valuation
</h4>
<p>
Includes rent of the property, maintenance, staff salaries, etc.
</p>
</td>
<td id="system-valuation" class="stat-value">
<sm-spinner></sm-spinner>
</td>
</tr>
</tbody>
</table>
</section> </section>
<section id="userinfo" class="page hide"> <section id="userinfo" class="page hide">