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

v0.10.5

Browse Source 
Added outlet room indicator mechanism

- improved floor indicator UX on mobile devices
This commit is contained in:
sairaj mote 2021-04-05 17:26:05 +05:30
parent a38dd6a031
commit 552d927cc5
5 changed files with 208 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
components.js
View File

@ -2451,6 +2451,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
this.isAutoPlaying = false this.isAutoPlaying = false
this.autoPlayInterval = 5000 this.autoPlayInterval = 5000
this.autoPlayTimeout this.autoPlayTimeout
this.initialTimeout
this.activeSlideNum = 0 this.activeSlideNum = 0
this.carouselItems this.carouselItems
this.indicators this.indicators
@ -2496,20 +2497,26 @@ customElements.define('sm-carousel', class extends HTMLElement {
behavior: 'smooth' behavior: 'smooth'
}) })
} }
nextSlide = () => {
if (!this.carouselItems) return
let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
this.showSlide(showSlideNo)
}
startAutoPlay = () => { autoPlay = () => {
if(!this.carouselItems) return this.nextSlide()
if((this.activeSlideNum + 1) < this.carouselItems.length)
this.showSlide(this.activeSlideNum + 1)
else
this.showSlide(0)
if (this.isAutoPlaying) { if (this.isAutoPlaying) {
this.autoPlayTimeout = setTimeout(() => { this.autoPlayTimeout = setTimeout(() => {
this.startAutoPlay() this.autoPlay()
}, this.autoPlayInterval); }, this.autoPlayInterval);
} }
} }
startAutoPlay = () => {
this.setAttribute('autoplay', '')
}
stopAutoPlay = () => { stopAutoPlay = () => {
this.removeAttribute('autoplay') this.removeAttribute('autoplay')
} }
@ -2586,7 +2593,7 @@ customElements.define('sm-carousel', class extends HTMLElement {
this.indicators = this.indicatorsContainer.children this.indicators = this.indicatorsContainer.children
} }
if (this.hasAttribute('autoplay')) { if (this.hasAttribute('autoplay')) {
this.startAutoPlay() this.autoPlay()
} }
}) })
@ -2612,13 +2619,16 @@ customElements.define('sm-carousel', class extends HTMLElement {
} }
if (name === 'autoplay') { if (name === 'autoplay') {
if (this.hasAttribute('autoplay')) { if (this.hasAttribute('autoplay')) {
this.isAutoPlaying = true
if(this.carouselSlot.assignedElements().length > 1) if(this.carouselSlot.assignedElements().length > 1)
this.startAutoPlay() this.initialTimeout = setTimeout(() => {
this.isAutoPlaying = true
this.autoPlay()
}, this.autoPlayInterval);
} }
else { else {
this.isAutoPlaying = false this.isAutoPlaying = false
clearTimeout(this.autoPlayTimeout) clearTimeout(this.autoPlayTimeout)
clearTimeout(this.initialTimeout)
} }
} }

46
css/main.css
View File

@ -471,7 +471,7 @@ ul {
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 5rem); max-height: calc(100vh - 5rem);
padding: 0; padding: 0;
grid-template-columns: 3rem 1fr; grid-template-columns: 2rem 1fr;
} }
#floor_line_map { #floor_line_map {
@ -488,19 +488,57 @@ ul {
height: 100%; height: 100%;
} }
.line-map__circle { .line-map__track {
height: 1rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.line-map__circle,
.line-map__disc {
position: absolute; position: absolute;
border-radius: 1rem;
z-index: 1;
}
.line-map__disc {
height: 0.5rem;
width: 0.5rem;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
background: rgba(var(--text-color), 1);
}
.line-map__line {
height: 0.1rem;
width: 100%;
background: rgba(var(--text-color), 0.8);
}
.room-button {
font-weight: 500;
font-size: 1.4rem;
opacity: 0.6;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.room-button--active {
opacity: 1;
}
.line-map__circle {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: -0.5rem;
border-radius: 1rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border: solid 0.2rem rgba(var(--text-color), 1); border: solid 0.2rem rgba(var(--text-color), 1);
-webkit-transition: -webkit-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear;
transition: -webkit-transform 0.1s linear; transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear; transition: transform 0.1s linear;
transition: transform 0.1s linear, -webkit-transform 0.1s linear; transition: transform 0.1s linear, -webkit-transform 0.1s linear;
z-index: 1;
} }
.line-map__bar { .line-map__bar {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

35
css/main.scss
View File

@ -375,7 +375,7 @@ ul{
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 5rem); max-height: calc(100vh - 5rem);
padding: 0; padding: 0;
grid-template-columns: 3rem 1fr; grid-template-columns: 2rem 1fr;
} }
#floor_line_map{ #floor_line_map{
@ -389,16 +389,43 @@ ul{
.line-map{ .line-map{
height: 100%; height: 100%;
} }
.line-map__circle{ .line-map__track{
height: 1rem;
align-items: center;
}
.line-map__circle,
.line-map__disc{
position: absolute; position: absolute;
border-radius: 1rem;
z-index: 1;
}
.line-map__disc{
height: 0.5rem;
width: 0.5rem;
transition: transform 0.3s;
background: rgba(var(--text-color), 1);
}
.line-map__line{
height: 0.1rem;
width: 100%;
background: rgba(var(--text-color), 0.8);
}
.room-button{
font-weight: 500;
font-size: 1.4rem;
opacity: 0.6;
transition: opacity 0.3s;
&--active{
opacity: 1;
}
}
.line-map__circle{
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: -0.5rem;
border-radius: 1rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border: solid 0.2rem rgba(var(--text-color), 1); border: solid 0.2rem rgba(var(--text-color), 1);
transition: transform 0.1s linear; transition: transform 0.1s linear;
z-index: 1;
} }
.line-map__bar{ .line-map__bar{
width: 0.1rem; width: 0.1rem;

196
index.html
View File

@ -192,7 +192,7 @@
<svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg> <svg class="icon button__icon--right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 12l-6 6V6z"/></svg>
</button> </button>
</div> </div>
<sm-carousel id="bit_bond_series__container" indicator autoplay></sm-carousel> <sm-carousel id="bit_bond_series__container" indicator></sm-carousel>
</div> </div>
<div id="bob_fund_outlet" class="flex direction-column card outlet-preview carousel-container"> <div id="bob_fund_outlet" class="flex direction-column card outlet-preview carousel-container">
<div class="flex direction-column margin-bottom-1-5r common-padding"> <div class="flex direction-column margin-bottom-1-5r common-padding">
@ -246,49 +246,54 @@
<h2 class="h2 weight-900 margin-bottom-1r">BitCoin Bonds</h2> <h2 class="h2 weight-900 margin-bottom-1r">BitCoin Bonds</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section> </section>
<sm-tab-header target="bit_bonds__rooms" variant="tab" class="margin-bottom-1-5r"> <h4 class="label">Rooms</h4>
<sm-tab>Returns</sm-tab> <div class="tab-header flex direction-column" data-target-group="bit_bond_page_group">
<sm-tab>More</sm-tab> <ul class="grid gap-1 flow-column">
</sm-tab-header> <li>
<sm-tab-panels id="bit_bonds__rooms" class="grid"> <button class="room-button room-button--active" data-button-group="bit_bond_page_group" data-target="bit_bond_returns_table">Returns</button>
<sm-panel class="grid w-100" style="overflow-x: auto;"> </li>
<table> <li>
<thead> <button class="room-button" data-button-group="bit_bond_page_group" data-target="bit_bond_info">More</button>
<tr class="tr"> </li>
<td class="td weight-700 uppercase">Series</td> </ul>
<td class="td weight-700 uppercase">Series date</td> <div class="line-map__track flex w-100">
<td class="td weight-700 uppercase">Time Elapsed</td> <div class="line-map__disc"></div>
<td class="td weight-700 uppercase">Current value</td> <div class="line-map__line"></div>
<td class="td weight-700 uppercase">Rate of return</td> </div>
</tr> </div>
</thead> <table id="bit_bond_returns_table" data-panel-group="bit_bond_page_group">
<tbody> <thead>
<tr class="tr"> <tr class="tr">
<td class="td weight-500">$975</td> <td class="td weight-700 uppercase">Series</td>
</tr> <td class="td weight-700 uppercase">Series date</td>
<tr class="tr"> <td class="td weight-700 uppercase">Time Elapsed</td>
<td class="td weight-500">$1057</td> <td class="td weight-700 uppercase">Current value</td>
</tr> <td class="td weight-700 uppercase">Rate of return</td>
<tr class="tr"> </tr>
<td class="td weight-500">$1064</td> </thead>
</tr> <tbody>
<tr class="tr"> <tr class="tr">
<td class="td weight-500">$1205</td> <td class="td weight-500">$975</td>
</tr> </tr>
<tr class="tr"> <tr class="tr">
<td class="td weight-500">$1285</td> <td class="td weight-500">$1057</td>
</tr> </tr>
<tr class="tr"> <tr class="tr">
<td class="td weight-500">$2513</td> <td class="td weight-500">$1064</td>
</tr> </tr>
</tr> <tr class="tr">
</tbody> <td class="td weight-500">$1205</td>
</table> </tr>
</sm-panel> <tr class="tr">
<sm-panel> <td class="td weight-500">$1285</td>
</tr>
</sm-panel> <tr class="tr">
</sm-tab-panels> <td class="td weight-500">$2513</td>
</tr>
</tr>
</tbody>
</table>
<p id="bit_bond_info" class="hide-completely" data-panel-group="bit_bond_page_group"></p>
</article> </article>
<article id="bob'sfund" class="page flex direction-column hide-completely"> <article id="bob'sfund" class="page flex direction-column hide-completely">
@ -297,19 +302,23 @@
<h2 class="h2 weight-900 margin-bottom-1r">Bob's Fund</h2> <h2 class="h2 weight-900 margin-bottom-1r">Bob's Fund</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section> </section>
<sm-tab-header target="bob_fund_rooms" variant="tab"> <h4 class="label">Rooms</h4>
<sm-tab> <div class="tab-header flex direction-column" data-target-group="bob_fund_page_group">
Investors <ul class="grid gap-1 flow-column">
</sm-tab> <li>
<sm-tab> <button class="room-button room-button--active" data-button-group="bob_fund_page_group" data-target="bob_fund_page__carousel">Investors</button>
more </li>
</sm-tab> <li>
</sm-tab-header> <button class="room-button" data-button-group="bob_fund_page_group" data-target="bob_fund_info">More</button>
<sm-tab-panels id="bob_fund_rooms"> </li>
<sm-panel></sm-panel> </ul>
<sm-panel></sm-panel> <div class="line-map__track flex w-100">
<sm-panel></sm-panel> <div class="line-map__disc"></div>
</sm-tab-panels> <div class="line-map__line"></div>
</div>
</div>
<sm-carousel id="bob_fund_page__carousel" data-panel-group="bob_fund_page_group" indicator autoplay></sm-carousel>
<p id="bob_fund_info" class="hide-completely" data-panel-group="bob_fund_page_group"></p>
</article> </article>
<article id="ico" class="page flex direction-column hide-completely"> <article id="ico" class="page flex direction-column hide-completely">
@ -318,26 +327,23 @@
<h2 class="h2 weight-900 margin-bottom-1r">ICO</h2> <h2 class="h2 weight-900 margin-bottom-1r">ICO</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section> </section>
<sm-tab-header target="ico_rooms" variant="tab" class="margin-bottom-1-5r"> <h4 class="label">Rooms</h4>
<sm-tab> <div class="tab-header flex direction-column" data-target-group="ico_page_group">
Investors <ul class="grid gap-1 flow-column">
</sm-tab> <li>
<sm-tab> <button class="room-button room-button--active" data-button-group="ico_page_group" data-target="ico_page__carousel">Investors</button>
Phases </li>
</sm-tab> <li>
<sm-tab> <button class="room-button" data-button-group="ico_page_group" data-target="ico_phase_list">Phases</button>
more </li>
</sm-tab> </ul>
</sm-tab-header> <div class="line-map__track flex w-100">
<sm-tab-panels id="ico_rooms" class="flex w-100"> <div class="line-map__disc"></div>
<sm-panel class="flex carousel-container"> <div class="line-map__line"></div>
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel> </div>
</sm-panel> </div>
<sm-panel> <sm-carousel id="ico_page__carousel" data-panel-group="ico_page_group" indicator autoplay></sm-carousel>
<ul id="ico_phase_list"></ul> <ul id="ico_phase_list" class="hide-completely" data-panel-group="ico_page_group"></ul>
</sm-panel>
<sm-panel></sm-panel>
</sm-tab-panels>
</article> </article>
<!-- --> <!-- -->
@ -1131,7 +1137,7 @@
entries.forEach(entry => { entries.forEach(entry => {
if(window.innerWidth < 640){ if(window.innerWidth < 640){
if(entry.isIntersecting){ if(entry.isIntersecting){
entry.target.querySelector('sm-carousel').setAttribute('autoplay', '') entry.target.querySelector('sm-carousel').startAutoPlay()
} }
else{ else{
entry.target.querySelector('sm-carousel').stopAutoPlay() entry.target.querySelector('sm-carousel').stopAutoPlay()
@ -1160,22 +1166,48 @@
const target = label.dataset.target const target = label.dataset.target
getRef(target).scrollIntoView({behavior: 'smooth'}) getRef(target).scrollIntoView({behavior: 'smooth'})
} }
else if(e.target.closest('.room-button')){
const button = e.target.closest('.room-button')
const buttonDimensions = button.getBoundingClientRect()
const target = button.dataset.target
const tabHeader = button.closest('.tab-header')
const targetGroup = tabHeader.dataset.targetGroup
const indicator = tabHeader.querySelector('.line-map__disc')
const options = {
duration: 300,
easing: 'ease',
fill: 'forwards'
}
const activePanel = document.querySelector(`:not(.hide-completely)[data-panel-group="${targetGroup}"]`)
activePanel.animate(fadeOut, options).onfinish = () => {
activePanel.classList.add('hide-completely')
getRef(target).classList.remove('hide-completely')
getRef(target).animate(fadeIn, options)
}
document.querySelector(`.room-button--active[data-button-group="${targetGroup}"]`).classList.remove('room-button--active')
button.classList.add('room-button--active')
indicator.setAttribute('style', `transform: translateX(${buttonDimensions.left + (buttonDimensions.width / 2) - tabHeader.getBoundingClientRect().left + tabHeader.scrollLeft}px)`)
}
}) })
let activeOutletIndex = 0 let activeOutletIndex = 0
const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel') const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
function changeOutletFocus(){ function changeOutletFocus(){
allOutletCarousels[activeOutletIndex].stopAutoPlay() allOutletCarousels[activeOutletIndex].nextSlide()
activeOutletIndex = activeOutletIndex + 1 < allOutletCarousels.length ? activeOutletIndex + 1 : 0 activeOutletIndex = activeOutletIndex + 1 < allOutletCarousels.length ? activeOutletIndex + 1 : 0
allOutletCarousels[activeOutletIndex].setAttribute('autoplay', '')
if(window.innerWidth > 640){ if(window.innerWidth > 640){
setTimeout(() => { setTimeout(() => {
changeOutletFocus() changeOutletFocus()
}, 4000); }, 5000);
} }
} }
changeOutletFocus() setTimeout(() => {
changeOutletFocus()
}, 5000);
let currentPage = '' let currentPage = ''