v0.20.38
New design for tabular data
This commit is contained in:
sairaj mote
parent
cbb93400bb
commit
8d814a6f54
@ -101,7 +101,7 @@
|
||||
</g>
|
||||
</svg>
|
||||
<span class="button__label">
|
||||
Returns
|
||||
Series
|
||||
</span>
|
||||
</button>
|
||||
<button class="room-button">
|
||||
@ -118,7 +118,10 @@
|
||||
</scroll-tab-header>
|
||||
</div>
|
||||
<scroll-tab-panels id="bit_bond_page_group">
|
||||
<div id="bit_bond_series__container" class="grid series-container"></div>
|
||||
<section class="grid">
|
||||
<h3 class="h3 margin-bottom-1-5r">Bitcoin bonds series</h3>
|
||||
<div id="bit_bond_series__container" class="grid series-container"></div>
|
||||
</section>
|
||||
<p id="bit_bond_info">
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt,
|
||||
doloremque pariatur expedita distinctio itaque.
|
||||
|
||||
@ -92,10 +92,10 @@
|
||||
</scroll-tab-header>
|
||||
</div>
|
||||
<scroll-tab-panels id="bob_fund_page_group">
|
||||
<div>
|
||||
<!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
|
||||
<h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
|
||||
</div>
|
||||
<section class="grid">
|
||||
<h3 class="h3 margin-bottom-1-5r">Investors</h3>
|
||||
<div id="bob_fund_investors__container" class="grid series-container"></div>
|
||||
</section>
|
||||
<div>
|
||||
<p id="bob_fund_info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi facere officiis eius iusto quibusdam tenetur illo blanditiis asperiores et corporis!</p>
|
||||
</div>
|
||||
@ -105,5 +105,16 @@
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
<script src="js/components.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
<script>
|
||||
function renderAllFundInvestors(){
|
||||
const frag = document.createDocumentFragment()
|
||||
getRef('bob_fund_investors__container').innerHTML = ''
|
||||
bobFund.forEach(investor => {
|
||||
frag.append(render.bobFundRow(investor))
|
||||
})
|
||||
getRef('bob_fund_investors__container').append(frag)
|
||||
}
|
||||
renderAllFundInvestors()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
25
css/main.css
25
css/main.css
@ -18,7 +18,7 @@ body {
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--green: #1DC838;
|
||||
--green: #007936;
|
||||
color: rgba(var(--text-color), 1);
|
||||
height: calc(100%);
|
||||
background: var(--background-color);
|
||||
@ -763,10 +763,12 @@ ul {
|
||||
}
|
||||
|
||||
.series-container {
|
||||
gap: 2rem 1.5rem;
|
||||
gap: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
}
|
||||
.series-container .bit-bond-series__row {
|
||||
.series-container .bit-bond-series__row,
|
||||
.series-container .bob-fund__row {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
@ -804,11 +806,20 @@ sm-carousel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.bit-bond-series__row {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.bob-fund__row .grid {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.bob-fund__row,
|
||||
.bit-bond-series__row {
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
align-items: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@ -820,13 +831,13 @@ sm-carousel {
|
||||
}
|
||||
|
||||
.percent-gain {
|
||||
font-weight: 500;
|
||||
color: var(--green);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.percent-gain,
|
||||
.time-elapsed {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@ -1055,6 +1066,10 @@ scroll-tab-panels > [active] {
|
||||
.outlet-hero-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.series-container {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.page {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -16,7 +16,7 @@ body {
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--green: #1DC838;
|
||||
--green: #007936;
|
||||
color: rgba(var(--text-color), 1);
|
||||
height: calc(100%);
|
||||
background: var(--background-color);
|
||||
@ -678,9 +678,11 @@ ul{
|
||||
}
|
||||
|
||||
.series-container{
|
||||
gap: 2rem 1.5rem;
|
||||
gap: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
.bit-bond-series__row{
|
||||
.bit-bond-series__row,
|
||||
.bob-fund__row{
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -718,11 +720,22 @@ sm-carousel{
|
||||
.investor-card{
|
||||
min-width: 100%;
|
||||
}
|
||||
.bit-bond-series__row{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.bob-fund__row{
|
||||
.grid{
|
||||
align-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.bob-fund__row,
|
||||
.bit-bond-series__row{
|
||||
gap: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
grid-auto-flow: column;
|
||||
align-items: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@ -733,12 +746,12 @@ sm-carousel{
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
.percent-gain{
|
||||
font-weight: 500;
|
||||
color: var(--green);
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.percent-gain,
|
||||
.time-elapsed{
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.time-elapsed{
|
||||
@ -955,6 +968,9 @@ scroll-tab-panels{
|
||||
.outlet-hero-section{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.series-container{
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.page{
|
||||
|
||||
44
index.html
44
index.html
@ -15,29 +15,6 @@
|
||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||
<!-- Component templates -->
|
||||
|
||||
<template id="bob_fund_row">
|
||||
<div class="bob-fund__row grid gap-2">
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Investor</h5>
|
||||
<h3 class="value investor__name"></h3>
|
||||
</div>
|
||||
<div class="grid grid-3 gap-1">
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Invested</h5>
|
||||
<h3 class="value original-value"></h3>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<h4 class="label color-0-8 weight-500">Current value</h4>
|
||||
<h3 class="value current-value"></h3>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<h4 class="label color-0-8 weight-500">Time Elapsed</h4>
|
||||
<h3 class="value time-elapsed"></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="ico_investor_row">
|
||||
<div class="investor-card grid gap-1-5">
|
||||
<img class="investor__image" src="" alt="" loading="lazy">
|
||||
@ -407,27 +384,6 @@
|
||||
|
||||
<script>
|
||||
|
||||
const bobFund = [
|
||||
{
|
||||
investorName: 'John Doe',
|
||||
invested: '₹20000',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
investorName: 'Jane Doe',
|
||||
invested: '₹10000',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
investorName: 'james Doe',
|
||||
invested: '₹15000',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
]
|
||||
|
||||
const icoInvestors = [
|
||||
{
|
||||
extension: 'jpg',
|
||||
|
||||
50
js/index.js
50
js/index.js
@ -368,6 +368,27 @@ const bitBondSerieses = [
|
||||
},
|
||||
]
|
||||
|
||||
const bobFund = [
|
||||
{
|
||||
investorName: 'John Doe',
|
||||
invested: '₹20000',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
investorName: 'Jane Doe',
|
||||
invested: '₹10000',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
{
|
||||
investorName: 'james Doe',
|
||||
invested: '₹15000',
|
||||
currentValue: '$XXXXX',
|
||||
timeElapsed: '2years'
|
||||
},
|
||||
]
|
||||
|
||||
// templates
|
||||
|
||||
const bitBondRowTemplate = document.createElement('template')
|
||||
@ -389,6 +410,31 @@ bitBondRowTemplate.innerHTML = `
|
||||
</div>
|
||||
`
|
||||
|
||||
const bobsFundRowTemplate = document.createElement('template')
|
||||
bobsFundRowTemplate.innerHTML = `
|
||||
<div class="bob-fund__row grid">
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Investor</h5>
|
||||
<h3 class="value investor__name"></h3>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="grid">
|
||||
<h5 class="label color-0-8 weight-500">Invested</h5>
|
||||
<h3 class="value original-value"></h3>
|
||||
</div>
|
||||
<div class="grid justify-right text-align-right">
|
||||
<h4 class="label color-0-8 weight-500">Current value</h4>
|
||||
<h3 class="value current-value"></h3>
|
||||
<div class="flex align-center">
|
||||
<svg class="icon up-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"/></svg>
|
||||
<span class="percent-gain">2000%</span>
|
||||
<span class="time-elapsed"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
|
||||
const floorListitemTemplate = document.createElement('template')
|
||||
floorListitemTemplate.innerHTML = `
|
||||
@ -425,11 +471,11 @@ const render = {
|
||||
},
|
||||
bobFundRow(obj) {
|
||||
const { investorName, invested, currentValue, timeElapsed } = obj;
|
||||
const row = getRef("bob_fund_row").content.cloneNode(true);
|
||||
const row = bobsFundRowTemplate.content.cloneNode(true);
|
||||
row.querySelector(".investor__name").textContent = investorName;
|
||||
row.querySelector(".original-value").textContent = invested;
|
||||
row.querySelector(".current-value").textContent = currentValue;
|
||||
row.querySelector(".time-elapsed").textContent = timeElapsed;
|
||||
row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed}`;
|
||||
return row;
|
||||
},
|
||||
icoInvestorRow(obj, options) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user