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

v0.12.6

Browse Source 
Added Outlet switcher for easier floor navigation
This commit is contained in:
sairaj mote 2021-04-07 17:12:14 +05:30
parent c0d180c013
commit d528db9c92
4 changed files with 209 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
css/main.css
View File

@ -646,7 +646,7 @@ sm-carousel {
.investor__image {
grid-area: img;
width: 8rem;
width: 5rem;
border-radius: 0.5rem;
}
@ -659,8 +659,36 @@ sm-carousel {
grid-area: para;
}
.outlet-hero-section {
margin-top: 6rem;
#outlet_switcher {
position: absolute;
padding: 1rem;
border-radius: 0.3rem;
background: rgba(var(--foreground-color), 1);
-webkit-box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, -webkit-transform 0.3s;
transition: transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
z-index: 2;
}
.outlet_switcher__button {
font-size: 1rem;
padding: 0.4rem 0;
}
.outlet_switcher__button--active {
color: var(--accent-color);
}
.outlet_switcher__button:not(:last-of-type)::after {
content: "";
position: relative;
width: 4vw;
height: 0.1rem;
margin: 0 0.5rem;
background: rgba(var(--text-color), 0.8);
}
.outlet-label {
@ -670,6 +698,7 @@ sm-carousel {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-self: flex-start;
color: var(--accent-color);
margin-bottom: 0.5rem;
font-size: 1rem;
@ -685,16 +714,24 @@ scroll-tab-panels {
}
scroll-tab-header {
position: -webkit-sticky;
position: sticky;
top: 0;
--gap: 0.5rem;
--padding: 0.5rem;
margin-right: 1.5rem;
--background: rgba(var(--text-color), 0.04);
--background: linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), rgba(var(--foreground-color), 1);
--grid-auto-flow: column;
justify-self: flex-start;
z-index: 1;
}
scroll-tab-panels {
--height: max(24rem, 50vh);
--gap: 4rem;
--background: transparent;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
.auto-grid-layout {
@ -716,9 +753,6 @@ scroll-tab-panels {
transition: opacity 0.3s;
padding: 0.6rem 0.8rem;
}
.room-button:not(:last-of-type) {
margin-bottom: 0.5rem;
}
.room-button[active] {
background: rgba(var(--text-color), 0.06);
opacity: 1;
@ -749,7 +783,7 @@ table {
}
#ico_page__carousel {
width: min(32rem, 100%);
width: min(36rem, 100%);
}
.phase {
@ -823,6 +857,14 @@ table {
-webkit-transform: none;
transform: none;
}
#outlet_switcher {
width: calc(100% - 2rem);
}
.outlet-hero-section {
margin-top: 2rem;
}
}
@media only screen and (min-width: 640px) {
.page {
@ -866,6 +908,14 @@ table {
grid-template-columns: auto 1fr;
}
#outlet_switcher {
padding: 1rem 1.5rem;
}
.outlet-hero-section {
margin-top: 4rem;
}
scroll-tab-header {
--grid-auto-flow: row;
}
@ -873,6 +923,10 @@ table {
.auto-grid-layout {
grid-template-columns: auto 1fr;
}
.investor__image {
width: 8rem;
}
}
@media only screen and (min-width: 1280px) {
.page {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

59
css/main.scss
View File

@ -525,7 +525,7 @@ sm-carousel{
}
.investor__image{
grid-area: img;
width: 8rem;
width: 5rem;
border-radius: 0.5rem;
}
.investor__bio{
@ -535,14 +535,35 @@ sm-carousel{
.investor__contribution-container{
grid-area: para;
}
.outlet-hero-section{
margin-top: 6rem;
#outlet_switcher{
position: absolute;
padding: 1rem;
border-radius: 0.3rem;
background: rgba(var(--foreground-color), 1);
box-shadow: 1px 0.1rem 0.1rem rgba(0, 0, 0, 0.06), 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
transform: translateY(-0.5rem);
transition: transform 0.3s, opacity 0.3s;
z-index: 2;
}
.outlet_switcher__button{
font-size: 1rem;
padding: 0.4rem 0;
&--active{
color: var(--accent-color);
}
&:not(:last-of-type)::after{
content: '';
position: relative;
width: 4vw;
height: 0.1rem;
margin: 0 0.5rem;
background: rgba(var(--text-color), 0.8);
}
}
.outlet-label{
display: flex;
align-items: center;
justify-self: flex-start;
color: var(--accent-color);
margin-bottom: 0.5rem;
font-size: 1rem;
@ -557,15 +578,21 @@ scroll-tab-panels{
--border-radius: 0.5rem;
}
scroll-tab-header{
position: sticky;
top: 0;
--gap: 0.5rem;
--padding: 0.5rem;
margin-right: 1.5rem;
--background: rgba(var(--text-color), 0.04);
--background: linear-gradient(rgba(var(--text-color), 0.04), rgba(var(--text-color), 0.04)), rgba(var(--foreground-color), 1);
--grid-auto-flow: column;
justify-self: flex-start;
z-index: 1;
}
scroll-tab-panels{
--height: max(24rem, 50vh);
--gap: 4rem;
--background: transparent;
overscroll-behavior: contain;
}
.auto-grid-layout{
justify-content: flex-start;
@ -580,9 +607,6 @@ scroll-tab-panels{
opacity: 0.6;
transition: opacity 0.3s;
padding: 0.6rem 0.8rem;
&:not(:last-of-type){
margin-bottom: 0.5rem;
}
&[active]{
background: rgba(var(--text-color), 0.06);
opacity: 1;
@ -611,7 +635,7 @@ table{
}
#ico_page__carousel{
width: min(32rem ,100%);
width: min(36rem ,100%);
}
@ -675,6 +699,12 @@ table{
}
}
}
#outlet_switcher{
width: calc(100% - 2rem);
}
.outlet-hero-section{
margin-top: 2rem;
}
}
@media only screen and (min-width: 640px) {
.page{
@ -708,12 +738,21 @@ table{
gap: 3rem;
grid-template-columns: auto 1fr;
}
#outlet_switcher{
padding: 1rem 1.5rem;
}
.outlet-hero-section{
margin-top: 4rem;
}
scroll-tab-header{
--grid-auto-flow: row;
}
.auto-grid-layout{
grid-template-columns: auto 1fr;
}
.investor__image{
width: 8rem;
}
}
@media only screen and (min-width: 1280px) {
.page{

133
index.html
View File

@ -164,7 +164,7 @@
<header id="main_header" class="grid align-center full-bleed">
<button id="elevator_button" class="button" onclick="showPopup('elevator_popup')">Elevator</button>
<div id="main_logo" class="flex align-center">
<div id="main_logo" class="flex align-center page-link" data-target="home_page">
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
<h4 class="h4 header__company-name">RanchiMall</h4>
</div>
@ -246,12 +246,30 @@
<!-- Seperate pages -->
<div id="outlet_switcher" class="grid gap-1-5 hide">
<div class="flex align-center">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
<span class="weight-500 color-0-8">
Floor 1 outlets
</span>
<button class="justify-right" onclick="hideOutletSwitcher()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
</button>
</div>
<section class="flex align-center">
<button class="outlet_switcher__button outlet_switcher__button--active page-link" data-target="bitbonds">BitCoin Bonds</button>
<button class="outlet_switcher__button page-link" data-target="bob'sfund">Bob's Fund</button>
<button class="outlet_switcher__button page-link" data-target="ico">ICO</button>
</section>
</div>
<article id="bitbonds" class="page flex direction-column hide-completely">
<section class="outlet-hero-section margin-bottom-3r">
<h4 class="outlet-label">
<button class="outlet-label">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
Outlet
</h4>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
</button>
<h1 class="h1 weight-900 margin-bottom-1r">BitCoin Bonds</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section>
@ -313,58 +331,72 @@
<article id="bob'sfund" class="page flex direction-column hide-completely">
<section class="outlet-hero-section margin-bottom-3r">
<h5 class="outlet-label">
<button class="outlet-label">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
Outlet
</h5>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
</button>
<h1 class="h1 weight-900 margin-bottom-1r">Bob's Fund</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section>
<h3 class="h3 margin-bottom-1r">Rooms</h3>
<sm-tab-header target="bob_fund_page_group" variant="tab" class="margin-bottom-1r">
<sm-tab class="h4">Investors</sm-tab>
<sm-tab class="h4">More</sm-tab>
</sm-tab-header>
<sm-tab-panels id="bob_fund_page_group">
<sm-panel>
<!-- <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>
<h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
</sm-panel>
<sm-panel>
<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>
</sm-panel>
</sm-tab-panels>
<div class="grid auto-grid-layout">
<scroll-tab-header data-target="bob_fund_page_group">
<button class="room-button">
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
<span class="button__label">
Investors
</span>
</button>
<button class="room-button">
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
<span class="button__label">
More
</span>
</button>
</scroll-tab-header>
<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>
<h1 class="h1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, modi.</h1>
</div>
<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>
</scroll-tab-panels>
</div>
</article>
<article id="ico" class="page flex direction-column hide-completely">
<section class="outlet-hero-section grid margin-bottom-3r">
<h5 class="outlet-label">
<button class="outlet-label">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 13.242V20h1v2H2v-2h1v-6.758A4.496 4.496 0 0 1 1 9.5c0-.827.224-1.624.633-2.303L4.345 2.5a1 1 0 0 1 .866-.5H18.79a1 1 0 0 1 .866.5l2.702 4.682A4.496 4.496 0 0 1 21 13.242zm-2 .73a4.496 4.496 0 0 1-3.75-1.36A4.496 4.496 0 0 1 12 14.001a4.496 4.496 0 0 1-3.25-1.387A4.496 4.496 0 0 1 5 13.973V20h14v-6.027zM5.789 4L3.356 8.213a2.5 2.5 0 0 0 4.466 2.216c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 0 0 4.644 0c.335-.837 1.52-.837 1.856 0a2.5 2.5 0 1 0 4.457-2.232L18.21 4H5.79z"/></svg>
Outlet
</h5>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
</button>
<h1 class="h1 weight-900 margin-bottom-1r">ICO</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore nihil quisquam harum quo mollitia sunt!</p>
</section>
<h3 class="h3 margin-bottom-1r">Rooms</h3>
<div class="grid flow-column">
<div class="grid auto-grid-layout">
<scroll-tab-header data-target="ico_page_group">
<button class="room-button" title="Investors">
<svg class="icon icon-only" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H2zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm8.284 3.703A8.002 8.002 0 0 1 23 22h-2a6.001 6.001 0 0 0-3.537-5.473l.82-1.824zm-.688-11.29A5.5 5.5 0 0 1 21 8.5a5.499 5.499 0 0 1-5 5.478v-2.013a3.5 3.5 0 0 0 1.041-6.609l.555-1.943z"/></svg>
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
<span class="button__label">
Investors
</span>
</button>
<button class="room-button" title="Phases">
<svg class="icon icon-only" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="4" y="12" width="4" height="10"/><rect x="10" y="7" width="4" height="15"/><rect x="16" y="2" width="4" height="20"/></svg>
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
<span class="button__label">
Phases
</span>
</button>
</scroll-tab-header>
<scroll-tab-panels id="ico_page_group">
<div class="grid">
<h4 class="h4 margin-bottom-1-5r">Investors</h4>
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
</div>
<div class="grid">
<h4 class="h4 margin-bottom-1-5r">Phases</h4>
<ul id="ico_phase_list"></ul>
</div>
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
<ul id="ico_phase_list"></ul>
</scroll-tab-panels>
</div>
</article>
@ -1174,6 +1206,7 @@
document.querySelectorAll('.carousel-container').forEach(outlet => outletObserver.observe(outlet))
let isFloorSwitcherOpen = false
document.addEventListener('click', e => {
if(e.target.closest('.page-link')){
const button = e.target.closest('.page-link')
@ -1184,13 +1217,35 @@
hidePopup()
}
}
else if(e.target.closest('.floor-label')){
const label = e.target.closest('.floor-label')
const target = label.dataset.target
getRef(target).scrollIntoView({behavior: 'smooth'})
if(isFloorSwitcherOpen){
hideOutletSwitcher()
}
else{
if(e.target.closest('.floor-label')){
const label = e.target.closest('.floor-label')
const target = label.dataset.target
getRef(target).scrollIntoView({behavior: 'smooth'})
}
else if(e.target.closest('.outlet-label')){
showOutletSwitcher(e.target.closest('.outlet-label'))
}
}
})
function showOutletSwitcher(button){
const buttonDimensions = button.getBoundingClientRect()
getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top}px; left: ${buttonDimensions.left}px;`)
getRef('outlet_switcher').classList.remove('hide')
getRef('outlet_switcher').classList.add('no-transformations')
isFloorSwitcherOpen = true
}
function hideOutletSwitcher(){
getRef('outlet_switcher').classList.add('hide')
getRef('outlet_switcher').classList.remove('no-transformations')
isFloorSwitcherOpen = false
}
let activeOutletIndex = 0
const allOutletCarousels = document.querySelectorAll('.outlet-preview sm-carousel')
function changeOutletFocus(){
@ -1238,6 +1293,12 @@
getRef(pageId).classList.remove('hide-completely')
currentPage = pageId
}
if(pageId !== 'home_page'){
const activeOutlet = getRef('outlet_switcher').querySelector('.outlet_switcher__button--active')
activeOutlet.classList.remove('outlet_switcher__button--active')
getRef('outlet_switcher').querySelector(`[data-target="${pageId}"]`).classList.add('outlet_switcher__button--active')
hideOutletSwitcher()
}
}
}