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

v0.20.36

Browse Source 
New design for bitbonds series
This commit is contained in:
sairaj mote 2021-04-21 02:30:38 +05:30
parent dd871e62dd
commit c2dda3f056
9 changed files with 186 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
bitcoinbonds.html
View File

@ -13,6 +13,8 @@
</head> </head>
<body> <body>
<sm-notifications id="notification_drawer"></sm-notifications>
<section id="elevator_popup" class="grid hide-completely"> <section id="elevator_popup" class="grid hide-completely">
<header class="elevator__header"> <header class="elevator__header">
<button class="close-button justify-self-start" onclick="hideSiteMap()"> <button class="close-button justify-self-start" onclick="hideSiteMap()">
@ -116,40 +118,7 @@
</scroll-tab-header> </scroll-tab-header>
</div> </div>
<scroll-tab-panels id="bit_bond_page_group"> <scroll-tab-panels id="bit_bond_page_group">
<div class="flex w-100" style="overflow-x: auto;"> <div id="bit_bond_series__container" class="grid series-container"></div>
<table>
<thead>
<tr class="tr">
<td class="td weight-700 uppercase">Series</td>
<td class="td weight-700 uppercase">Series date</td>
<td class="td weight-700 uppercase">Time Elapsed</td>
<td class="td weight-700 uppercase">Current value</td>
<td class="td weight-700 uppercase">Rate of return</td>
</tr>
</thead>
<tbody>
<tr class="tr">
<td class="td weight-500">$975</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1057</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1064</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1205</td>
</tr>
<tr class="tr">
<td class="td weight-500">$1285</td>
</tr>
<tr class="tr">
<td class="td weight-500">$2513</td>
</tr>
</tr>
</tbody>
</table>
</div>
<p id="bit_bond_info"> <p id="bit_bond_info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt,
doloremque pariatur expedita distinctio itaque. doloremque pariatur expedita distinctio itaque.
@ -159,5 +128,16 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> <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/components.js"></script>
<script src="js/index.js"></script> <script src="js/index.js"></script>
<script>
function renderAllSeries(){
const frag = document.createDocumentFragment()
getRef('bit_bond_series__container').innerHTML = ''
bitBondSerieses.forEach((series, index) => {
frag.append(render.bitBondRow(series))
})
getRef('bit_bond_series__container').append(frag)
}
renderAllSeries()
</script>
</body> </body>
</html> </html>

2
bob'sfund.html
View File

@ -13,6 +13,8 @@
</head> </head>
<body> <body>
<sm-notifications id="notification_drawer"></sm-notifications>
<section id="elevator_popup" class="grid hide-completely"> <section id="elevator_popup" class="grid hide-completely">
<header class="elevator__header"> <header class="elevator__header">
<button class="close-button justify-self-start" onclick="hideSiteMap()"> <button class="close-button justify-self-start" onclick="hideSiteMap()">

94
css/main.css
View File

@ -6,6 +6,10 @@
font-family: "Roboto Slab", serif; font-family: "Roboto Slab", serif;
} }
:root {
font-size: clamp(1rem, 1.2vmax, 3rem);
}
body { body {
--accent-color: #e72c45; --accent-color: #e72c45;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
@ -14,9 +18,9 @@ body {
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #F6f6f6;
--error-color: red; --error-color: red;
--green: #1DC838;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem);
background: var(--background-color); background: var(--background-color);
} }
@ -176,6 +180,10 @@ ul {
position: relative; position: relative;
} }
.text-align-right {
text-align: right;
}
.align-start { .align-start {
align-items: flex-start; align-items: flex-start;
} }
@ -678,7 +686,7 @@ ul {
} }
.outlets-container { .outlets-container {
margin: 1.5rem 0; margin: 1rem 0;
gap: 1.5rem; gap: 1.5rem;
} }
@ -753,21 +761,26 @@ ul {
font-size: 1.3rem; font-size: 1.3rem;
} }
#bit_bond_series__container { .series-container {
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1); gap: 2rem 1.5rem;
background-size: 60%; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.series-container .bit-bond-series__row {
padding: 1.5rem;
} }
#bob_fund_investors__container { /* #bit_bond_series__container{
background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1); background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%; background-size: 60%;
} }
#bob_fund_investors__container{
#ico_investors__container { background: url(../assets/bg/bobsfund-bg.png) bottom left no-repeat, rgba(var(--foreground-color), 1);
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1); background-size: 60%;
background-size: 60%;
} }
#ico_investors__container{
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%;
} */
sm-carousel { sm-carousel {
position: relative; position: relative;
height: 100%; height: 100%;
@ -790,6 +803,27 @@ sm-carousel {
min-width: 100%; min-width: 100%;
} }
.bit-bond-series__row {
gap: 1rem;
border-radius: 0.5rem;
grid-auto-flow: column;
align-items: flex-start;
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
}
.up-arrow {
height: 1.2em;
width: 1.2em;
fill: var(--green);
margin-right: 0.1em;
}
.percent-gain {
color: var(--green);
font-weight: 500;
margin-right: 0.5em;
}
.investor-card { .investor-card {
align-items: flex-start; align-items: flex-start;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -877,7 +911,9 @@ scroll-tab-header {
} }
scroll-tab-panels { scroll-tab-panels {
--gap: 1.5rem;
--background: transparent; --background: transparent;
margin-bottom: 6rem;
} }
scroll-tab-panels > * { scroll-tab-panels > * {
opacity: 0.4; opacity: 0.4;
@ -952,23 +988,6 @@ scroll-tab-panels > [active] {
fill: var(--accent-color); fill: var(--accent-color);
} }
table {
border-collapse: collapse;
width: max-content;
}
.tr {
margin: 0.5rem;
}
.tr:nth-of-type(even) {
background: rgba(var(--text-color), 0.1);
}
.td {
padding: 0.6rem 0.8rem;
white-space: nowrap;
}
#ico_page__carousel { #ico_page__carousel {
width: min(36rem, 100%); width: min(36rem, 100%);
height: max-content; height: max-content;
@ -1084,6 +1103,10 @@ table {
right: 0; right: 0;
} }
.bit-bond-series__row {
grid-auto-flow: column;
}
.carousel-holder { .carousel-holder {
align-self: flex-start; align-self: flex-start;
transform: translateY(-2rem); transform: translateY(-2rem);
@ -1137,17 +1160,6 @@ table {
.grid-3 { .grid-3 {
justify-content: center; justify-content: center;
/* & > .grid:not(:last-of-type){
position: relative;
&::after{
content: '';
position: absolute;
height: 4rem;
width: 1px;
right: 0.5rem;
background-color: var(--accent-color);
}
} */
} }
.grid-3 > .grid { .grid-3 > .grid {
width: 100%; width: 100%;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

72
css/main.scss
View File

@ -5,6 +5,9 @@
box-sizing: border-box; box-sizing: border-box;
font-family: 'Roboto Slab', serif; font-family: 'Roboto Slab', serif;
} }
:root{
font-size: clamp(1rem, 1.2vmax, 3rem);
}
body { body {
--accent-color: #e72c45; --accent-color: #e72c45;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
@ -13,9 +16,9 @@ body {
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #F6f6f6; --background-color: #F6f6f6;
--error-color: red; --error-color: red;
--green: #1DC838;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem);
background: var(--background-color); background: var(--background-color);
} }
body[data-theme='dark']{ body[data-theme='dark']{
@ -151,6 +154,9 @@ ul{
.pos-relative{ .pos-relative{
position: relative; position: relative;
} }
.text-align-right{
text-align: right;
}
.align-start{ .align-start{
align-items: flex-start; align-items: flex-start;
} }
@ -601,7 +607,7 @@ ul{
} }
.outlets-container{ .outlets-container{
margin: 1.5rem 0; margin: 1rem 0;
gap: 1.5rem; gap: 1.5rem;
} }
@ -670,7 +676,14 @@ ul{
font-size: 1.3rem; font-size: 1.3rem;
} }
#bit_bond_series__container{ .series-container{
gap: 2rem 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
.bit-bond-series__row{
padding: 1.5rem;
}
}
/* #bit_bond_series__container{
background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1); background: url(../assets/bg/bitbonds-bg.png) bottom right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%; background-size: 60%;
} }
@ -681,7 +694,7 @@ ul{
#ico_investors__container{ #ico_investors__container{
background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1); background: url(../assets/bg/ico-bg.png) top right no-repeat, rgba(var(--foreground-color), 1);
background-size: 60%; background-size: 60%;
} } */
sm-carousel{ sm-carousel{
position: relative; position: relative;
@ -704,6 +717,26 @@ sm-carousel{
.investor-card{ .investor-card{
min-width: 100%; min-width: 100%;
} }
.bit-bond-series__row{
gap: 1rem;
border-radius: 0.5rem;
grid-auto-flow: column;
align-items: flex-start;
box-shadow: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
}
.up-arrow{
height: 1.2em;
width: 1.2em;
fill: var(--green);
margin-right: 0.1em;
}
.percent-gain{
color: var(--green);
font-weight: 500;
margin-right: 0.5em;
}
.investor-card{ .investor-card{
align-items: flex-start; align-items: flex-start;
@ -784,7 +817,9 @@ scroll-tab-header{
--grid-auto-flow: column; --grid-auto-flow: column;
} }
scroll-tab-panels{ scroll-tab-panels{
--gap: 1.5rem;
--background: transparent; --background: transparent;
margin-bottom: 6rem;
& > *{ & > *{
opacity: 0.4; opacity: 0.4;
flex-shrink: 0; flex-shrink: 0;
@ -856,21 +891,6 @@ scroll-tab-panels{
} }
table{
border-collapse: collapse;
width: max-content;
}
.tr{
margin: 0.5rem;
&:nth-of-type(even){
background: rgba(var(--text-color), 0.1);
}
}
.td{
padding: 0.6rem 0.8rem;
white-space: nowrap;
}
#ico_page__carousel{ #ico_page__carousel{
width: min(36rem ,100%); width: min(36rem ,100%);
height: max-content; height: max-content;
@ -978,6 +998,9 @@ table{
} }
} }
} }
.bit-bond-series__row{
grid-auto-flow: column;
}
.carousel-holder{ .carousel-holder{
align-self: flex-start; align-self: flex-start;
transform: translateY(-2rem); transform: translateY(-2rem);
@ -1026,17 +1049,6 @@ table{
& > .grid{ & > .grid{
width: 100%; width: 100%;
} }
/* & > .grid:not(:last-of-type){
position: relative;
&::after{
content: '';
position: absolute;
height: 4rem;
width: 1px;
right: 0.5rem;
background-color: var(--accent-color);
}
} */
} }
} }
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {

1
ico.html
View File

@ -13,6 +13,7 @@
</head> </head>
<body> <body>
<sm-notifications id="notification_drawer"></sm-notifications>
<template id="ico_phase_template"> <template id="ico_phase_template">
<li class="phase grid"> <li class="phase grid">

53
index.html
View File

@ -15,23 +15,6 @@
<sm-notifications id="notification_drawer"></sm-notifications> <sm-notifications id="notification_drawer"></sm-notifications>
<!-- Component templates --> <!-- Component templates -->
<template id="bit_bond_row">
<div class="bit-bond-series__row grid grid-3 gap-1">
<div class="grid">
<h5 class="label color-0-8 weight-500">Series</h5>
<h3 class="value original-value"></h3>
</div>
<div class="grid">
<h5 class="label color-0-8 weight-500">Current value</h5>
<h3 class="value current-value"></h3>
</div>
<div class="grid">
<h5 class="label color-0-8 weight-500">Time Elapsed</h5>
<h3 class="value time-elapsed"></h3>
</div>
</div>
</template>
<template id="bob_fund_row"> <template id="bob_fund_row">
<div class="bob-fund__row grid gap-2"> <div class="bob-fund__row grid gap-2">
<div class="grid"> <div class="grid">
@ -424,40 +407,6 @@
<script> <script>
const bitBondSerieses = [
{
series: '$975',
currentValue: '$XXXXX',
timeElapsed: '2years'
},
{
series: '$1057',
currentValue: '$XXXXX',
timeElapsed: '2years'
},
{
series: '$1064',
currentValue: '$XXXXX',
timeElapsed: '2years'
},
{
series: '$1205',
currentValue: '$XXXXX',
timeElapsed: '2years'
},
{
series: '$1285',
currentValue: '$XXXXX',
timeElapsed: '2years'
},
{
series: '$2513',
currentValue: '$XXXXX',
timeElapsed: '2years'
},
]
const bobFund = [ const bobFund = [
{ {
investorName: 'John Doe', investorName: 'John Doe',
@ -575,7 +524,7 @@
function renderAllSeries(){ function renderAllSeries(){
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
getRef('bit_bond_series__container').innerHTML = '' getRef('bit_bond_series__container').innerHTML = ''
bitBondSerieses.forEach(series => { bitBondSerieses.forEach((series, index) => {
frag.append(render.bitBondRow(series)) frag.append(render.bitBondRow(series))
}) })
getRef('bit_bond_series__container').append(frag) getRef('bit_bond_series__container').append(frag)

33
js/components.js
View File

@ -3744,11 +3744,11 @@ scrollTabPanels.innerHTML = `
.tab-panels{ .tab-panels{
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
grid-auto-columns: 100%; grid-auto-columns: calc(100% - 3rem);
gap: var(--gap); gap: var(--gap);
border-radius: var(--border-radius); border-radius: var(--border-radius);
background: var(--background); background: var(--background);
scroll-snap-type: x proximity; scroll-snap-type: x mandatory;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
slot::slotted(*){ slot::slotted(*){
@ -3827,31 +3827,14 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
scrollHorizontally = e => { scrollHorizontally = e => {
e.preventDefault() e.preventDefault()
this.throttle(() => { const width = this.tabPanels.getBoundingClientRect().width
const width = this.tabPanels.getBoundingClientRect().width const scrollBy = e.deltaY > 0 ? width : -width
const scrollBy = e.deltaY > 0 ? width : -width this.tabPanels.scrollBy({
this.tabPanels.scrollBy({ left: scrollBy,
left: scrollBy, behavior: 'smooth'
behavior: 'smooth' })
})
}, 100)
} }
throttle = (func, delay) => {
// If setTimeout is already scheduled, no need to do anything
if (timerId) {
return;
}
// Schedule a setTimeout after delay seconds
timerId = setTimeout(function () {
func();
// Once setTimeout function execution is finished, timerId = undefined so that in
// the next scroll event function execution can be scheduled by the setTimeout
timerId = undefined;
}, delay);
}
connectedCallback() { connectedCallback() {
const panelObserver = new IntersectionObserver(entries => { const panelObserver = new IntersectionObserver(entries => {

75
js/index.js
View File

@ -335,8 +335,61 @@ const siteMap = [
}, },
]; ];
const bitBondSerieses = [
{
series: '$975',
currentValue: '$XXXXX',
timeElapsed: '2 years'
},
{
series: '$1057',
currentValue: '$XXXXX',
timeElapsed: '2 years'
},
{
series: '$1064',
currentValue: '$XXXXX',
timeElapsed: '2 years'
},
{
series: '$1205',
currentValue: '$XXXXX',
timeElapsed: '2 years'
},
{
series: '$1285',
currentValue: '$XXXXX',
timeElapsed: '2 years'
},
{
series: '$2513',
currentValue: '$XXXXX',
timeElapsed: '2 years'
},
]
// templates // templates
const bitBondRowTemplate = document.createElement('template')
bitBondRowTemplate.innerHTML = `
<div class="bit-bond-series__row grid">
<div class="grid">
<h5 class="label color-0-8 weight-500">Series</h5>
<h3 class="value original-value"></h3>
</div>
<div class="grid justify-right text-align-right">
<h5 class="label color-0-8 weight-500">Current value</h5>
<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>
`
const floorListitemTemplate = document.createElement('template') const floorListitemTemplate = document.createElement('template')
floorListitemTemplate.innerHTML = ` floorListitemTemplate.innerHTML = `
<li class="floor_list__item"> <li class="floor_list__item">
@ -364,10 +417,10 @@ outletListitemTemplate.innerHTML = `
const render = { const render = {
bitBondRow(obj) { bitBondRow(obj) {
const { series, currentValue, timeElapsed } = obj; const { series, currentValue, timeElapsed } = obj;
const row = getRef("bit_bond_row").content.cloneNode(true); const row = bitBondRowTemplate.content.cloneNode(true);
row.querySelector(".original-value").textContent = series; row.querySelector(".original-value").textContent = series;
row.querySelector(".current-value").textContent = currentValue; row.querySelector(".current-value").textContent = currentValue;
row.querySelector(".time-elapsed").textContent = timeElapsed; row.querySelector(".time-elapsed").textContent = `In last ${timeElapsed}`;
return row; return row;
}, },
bobFundRow(obj) { bobFundRow(obj) {
@ -414,15 +467,15 @@ const render = {
return floorLabel; return floorLabel;
}, },
outletListItem(outletObj) { outletListItem(outletObj) {
const { name, brief, url} = outletObj const { name, brief, url } = outletObj
const li = outletListitemTemplate.content.cloneNode(true).firstElementChild const li = outletListitemTemplate.content.cloneNode(true).firstElementChild
li.querySelector('a').href = `${url}.html` li.querySelector('a').href = `${url}.html`
li.querySelector('.outlet-title').textContent = name li.querySelector('.outlet-title').textContent = name
li.querySelector('.outlet-brief').textContent = brief ? brief: '' li.querySelector('.outlet-brief').textContent = brief ? brief : ''
return li return li
}, },
floorListitem(floorObj, index) { floorListitem(floorObj, index) {
const { floor, outlets} = floorObj const { floor, outlets } = floorObj
const li = floorListitemTemplate.content.cloneNode(true).firstElementChild const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
li.firstElementChild.dataset.target = `floor_${index + 1}`; li.firstElementChild.dataset.target = `floor_${index + 1}`;
li.querySelector('.h3').textContent = floor li.querySelector('.h3').textContent = floor
@ -435,7 +488,7 @@ const render = {
return li return li
}, },
outletSwitcherButton(outletObj, activeOutlet) { outletSwitcherButton(outletObj, activeOutlet) {
const { name, url} = outletObj const { name, url } = outletObj
const button = document.createElement('a') const button = document.createElement('a')
button.classList.add('outlet_switcher__button') button.classList.add('outlet_switcher__button')
if (activeOutlet === url) { if (activeOutlet === url) {
@ -553,12 +606,12 @@ const easeOutOvershoot = `cubic-bezier(0.175, 0.885, 0.32, 1.275)`;
document.addEventListener('click', e => { document.addEventListener('click', e => {
if(e.target.closest('.floor-label, .floor__button')){ if (e.target.closest('.floor-label, .floor__button')) {
const label = e.target.closest('.floor-label, .floor__button') const label = e.target.closest('.floor-label, .floor__button')
const target = label.dataset.target const target = label.dataset.target
window.open(`index.html#${target}`, '_self') window.open(`index.html#${target}`, '_self')
if(isSiteMapOpen){ if (isSiteMapOpen) {
hideSiteMap() hideSiteMap()
} }
} }
}) })
@ -638,7 +691,7 @@ function hideOutletSwitcher() {
}; };
} }
let currentPage let currentPage
function renderSiteMap() { function renderSiteMap() {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index))) siteMap.forEach((floor, index) => frag.append(render.floorListitem(floor, index)))
@ -682,7 +735,7 @@ siteMapTimeline
.from(".floor_list__item", { opacity: 0, y: 16, stagger: 0.1 }); .from(".floor_list__item", { opacity: 0, y: 16, stagger: 0.1 });
function showSiteMap() { function showSiteMap() {
document.querySelectorAll(".page").forEach((page) => { document.querySelectorAll(".page").forEach((page) => {
page.setAttribute("aria-hidden", "true"); page.setAttribute("aria-hidden", "true");