v0.20.35
Changed room navigation and design
This commit is contained in:
sairaj mote
parent
d837b344b8
commit
dd871e62dd
@ -80,39 +80,41 @@
|
|||||||
<p>lorem40 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore
|
<p>lorem40 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum cumque aut illum soluta. Inventore
|
||||||
nihil quisquam harum quo mollitia sunt!</p>
|
nihil quisquam harum quo mollitia sunt!</p>
|
||||||
</section>
|
</section>
|
||||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
<div class="rooms__header">
|
||||||
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
|
<h4 class="room__label">Rooms</h4>
|
||||||
<button class="room-button">
|
<scroll-tab-header data-target="bit_bond_page_group">
|
||||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
<button class="room-button">
|
||||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||||
<g>
|
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||||
<rect fill="none" height="24" width="24" />
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<path
|
<rect fill="none" height="24" width="24" />
|
||||||
d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" />
|
|
||||||
<polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" />
|
|
||||||
<polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" />
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<g>
|
||||||
</svg>
|
<g>
|
||||||
<span class="button__label">
|
<path
|
||||||
Returns
|
d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" />
|
||||||
</span>
|
<polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" />
|
||||||
</button>
|
<polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" />
|
||||||
<button class="room-button">
|
</g>
|
||||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
</g>
|
||||||
width="24px" fill="#000000">
|
</svg>
|
||||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
<span class="button__label">
|
||||||
<path
|
Returns
|
||||||
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" />
|
</span>
|
||||||
</svg>
|
</button>
|
||||||
<span class="button__label">
|
<button class="room-button">
|
||||||
More
|
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||||
</span>
|
width="24px" fill="#000000">
|
||||||
</button>
|
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||||
</scroll-tab-header>
|
<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>
|
||||||
|
</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 class="flex w-100" style="overflow-x: auto;">
|
||||||
<table>
|
<table>
|
||||||
|
|||||||
@ -72,21 +72,23 @@
|
|||||||
<h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2>
|
<h2 class="h2 weight-700 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>
|
||||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
<div class="rooms__header">
|
||||||
<scroll-tab-header data-target="bob_fund_page_group" class="margin-bottom-1r">
|
<h4 class="room__label">Rooms</h4>
|
||||||
<button class="room-button">
|
<scroll-tab-header data-target="bob_fund_page_group">
|
||||||
<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>
|
<button class="room-button">
|
||||||
<span class="button__label">
|
<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>
|
||||||
Investors
|
<span class="button__label">
|
||||||
</span>
|
Investors
|
||||||
</button>
|
</span>
|
||||||
<button class="room-button">
|
</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>
|
<button class="room-button">
|
||||||
<span class="button__label">
|
<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>
|
||||||
More
|
<span class="button__label">
|
||||||
</span>
|
More
|
||||||
</button>
|
</span>
|
||||||
</scroll-tab-header>
|
</button>
|
||||||
|
</scroll-tab-header>
|
||||||
|
</div>
|
||||||
<scroll-tab-panels id="bob_fund_page_group">
|
<scroll-tab-panels id="bob_fund_page_group">
|
||||||
<div>
|
<div>
|
||||||
<!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
|
<!-- <sm-carousel id="bob_fund_page__carousel" indicator autoplay></sm-carousel> -->
|
||||||
|
|||||||
64
css/main.css
64
css/main.css
@ -465,16 +465,14 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.floor__button {
|
.floor__button {
|
||||||
position: relative;
|
padding: 0.5rem 0;
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-self: flex-start;
|
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
background: rgba(var(--text-color), 0.06);
|
background: rgba(var(--foreground-color), 1);
|
||||||
}
|
}
|
||||||
.floor__button--active {
|
.floor__button--active {
|
||||||
background: rgba(var(--text-color), 0.2);
|
background: rgba(var(--text-color), 0.2);
|
||||||
@ -872,13 +870,10 @@ sm-carousel {
|
|||||||
}
|
}
|
||||||
|
|
||||||
scroll-tab-header {
|
scroll-tab-header {
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
--padding: 0.5rem 0;
|
--padding: 0.5rem 0;
|
||||||
--border-radius: 0.3rem;
|
--border-radius: 0.3rem;
|
||||||
--background: var(--background-color);
|
--background: transparent;
|
||||||
--grid-auto-flow: column;
|
--grid-auto-flow: column;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
scroll-tab-panels {
|
scroll-tab-panels {
|
||||||
@ -886,8 +881,8 @@ scroll-tab-panels {
|
|||||||
}
|
}
|
||||||
scroll-tab-panels > * {
|
scroll-tab-panels > * {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
padding-top: 4rem;
|
flex-shrink: 0;
|
||||||
min-height: 100vh;
|
min-width: 100%;
|
||||||
transition: opacity 0.6s;
|
transition: opacity 0.6s;
|
||||||
}
|
}
|
||||||
scroll-tab-panels > [active] {
|
scroll-tab-panels > [active] {
|
||||||
@ -903,15 +898,52 @@ scroll-tab-panels > [active] {
|
|||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rooms__header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: var(--background-color);
|
||||||
|
box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.room__label {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
.room__label::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
height: 150%;
|
||||||
|
width: 0.1rem;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(var(--text-color), 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
.room-button {
|
.room-button {
|
||||||
position: relative;
|
position: relative;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
flex-shrink: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
transition: opacity 0.3s, background-color 0.3s;
|
transition: opacity 0.3s, background-color 0.3s;
|
||||||
padding: 0.6rem 0.8rem;
|
padding: 0.6rem 0.8rem;
|
||||||
}
|
}
|
||||||
|
.room-button:not(:last-of-type)::after {
|
||||||
|
content: "";
|
||||||
|
height: 0.1rem;
|
||||||
|
width: 4rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
align-self: center;
|
||||||
|
background: var(--accent-color);
|
||||||
|
}
|
||||||
.room-button[active] {
|
.room-button[active] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
@ -919,16 +951,6 @@ scroll-tab-panels > [active] {
|
|||||||
.room-button[active] .icon {
|
.room-button[active] .icon {
|
||||||
fill: var(--accent-color);
|
fill: var(--accent-color);
|
||||||
}
|
}
|
||||||
.room-button[active]::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
height: 0.1rem;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 0.2rem 0.2rem 0 0;
|
|
||||||
background: var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
@ -1162,6 +1184,6 @@ table {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.floor__button:hover {
|
.floor__button:hover {
|
||||||
background: rgba(var(--text-color), 0.2);
|
background: var(--background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -396,16 +396,14 @@ ul{
|
|||||||
|
|
||||||
|
|
||||||
.floor__button{
|
.floor__button{
|
||||||
position: relative;
|
padding: 0.5rem 0;
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-self: flex-start;
|
|
||||||
border-radius: 0.2rem;
|
border-radius: 0.2rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
background: rgba(var(--text-color), 0.06);
|
background: rgba(var(--foreground-color), 1);
|
||||||
&--active{
|
&--active{
|
||||||
background: rgba(var(--text-color), 0.2);
|
background: rgba(var(--text-color), 0.2);
|
||||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||||
@ -780,20 +778,17 @@ sm-carousel{
|
|||||||
}
|
}
|
||||||
|
|
||||||
scroll-tab-header{
|
scroll-tab-header{
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
--padding: 0.5rem 0;
|
--padding: 0.5rem 0;
|
||||||
--border-radius: 0.3rem;
|
--border-radius: 0.3rem;
|
||||||
--background: var(--background-color);
|
--background: transparent;
|
||||||
--grid-auto-flow: column;
|
--grid-auto-flow: column;
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
scroll-tab-panels{
|
scroll-tab-panels{
|
||||||
--background: transparent;
|
--background: transparent;
|
||||||
& > *{
|
& > *{
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
padding-top: 4rem;
|
flex-shrink: 0;
|
||||||
min-height: 100vh;
|
min-width: 100%;
|
||||||
transition: opacity 0.6s;
|
transition: opacity 0.6s;
|
||||||
}
|
}
|
||||||
& > [active]{
|
& > [active]{
|
||||||
@ -807,30 +802,56 @@ scroll-tab-panels{
|
|||||||
.grid-2{
|
.grid-2{
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rooms__header{
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
background: var(--background-color);
|
||||||
|
box-shadow: 0 1rem 1rem -1rem rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.room__label{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
&::after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 150%;
|
||||||
|
width: 0.1rem;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(var(--text-color), 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
.room-button{
|
.room-button{
|
||||||
position: relative;
|
position: relative;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
flex-shrink: 0;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
transition: opacity 0.3s, background-color 0.3s;
|
transition: opacity 0.3s, background-color 0.3s;
|
||||||
padding: 0.6rem 0.8rem;
|
padding: 0.6rem 0.8rem;
|
||||||
|
&:not(:last-of-type)::after{
|
||||||
|
content: '';
|
||||||
|
height: 0.1rem;
|
||||||
|
width: 4rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
align-self: center;
|
||||||
|
background: var(--accent-color);
|
||||||
|
}
|
||||||
&[active]{
|
&[active]{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
.icon{
|
.icon{
|
||||||
fill: var(--accent-color);
|
fill: var(--accent-color);
|
||||||
}
|
}
|
||||||
&::after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
height: 0.1rem;
|
|
||||||
width: 100%;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 0.2rem 0.2rem 0 0;
|
|
||||||
background: var(--accent-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1047,6 +1068,6 @@ table{
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.floor__button:hover{
|
.floor__button:hover{
|
||||||
background: rgba(var(--text-color), 0.2);
|
background: var(--background-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
32
ico.html
32
ico.html
@ -101,21 +101,23 @@
|
|||||||
<h2 class="h2 weight-700 margin-bottom-1r">ICO</h2>
|
<h2 class="h2 weight-700 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>
|
||||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
<div class="rooms__header">
|
||||||
<scroll-tab-header data-target="ico_page_group" class="margin-bottom-1r">
|
<h4 class="room__label">Rooms</h4>
|
||||||
<button class="room-button" title="Investors">
|
<scroll-tab-header data-target="ico_page_group">
|
||||||
<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>
|
<button class="room-button" title="Investors">
|
||||||
<span class="button__label">
|
<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>
|
||||||
Investors
|
<span class="button__label">
|
||||||
</span>
|
Investors
|
||||||
</button>
|
</span>
|
||||||
<button class="room-button" title="Phases">
|
</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="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>
|
<button class="room-button" title="Phases">
|
||||||
<span class="button__label">
|
<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>
|
||||||
Phases
|
<span class="button__label">
|
||||||
</span>
|
Phases
|
||||||
</button>
|
</span>
|
||||||
</scroll-tab-header>
|
</button>
|
||||||
|
</scroll-tab-header>
|
||||||
|
</div>
|
||||||
<scroll-tab-panels id="ico_page_group">
|
<scroll-tab-panels id="ico_page_group">
|
||||||
<div class="grid carousel-container">
|
<div class="grid carousel-container">
|
||||||
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
||||||
|
|||||||
@ -3743,15 +3743,13 @@ scrollTabPanels.innerHTML = `
|
|||||||
}
|
}
|
||||||
.tab-panels{
|
.tab-panels{
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: 100%;
|
||||||
gap: var(--gap);
|
gap: var(--gap);
|
||||||
// height: var(--height);
|
|
||||||
overflow-y: auto;
|
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
scroll-snap-type: y proximity;
|
scroll-snap-type: x proximity;
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
-ms-scroll-chaining: none;
|
|
||||||
overscroll-behavior: contain;
|
|
||||||
}
|
}
|
||||||
slot::slotted(*){
|
slot::slotted(*){
|
||||||
scroll-snap-align: start;
|
scroll-snap-align: start;
|
||||||
@ -3765,6 +3763,10 @@ scrollTabPanels.innerHTML = `
|
|||||||
height: 0;
|
height: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
.tab-panels{
|
||||||
|
scrollbar-height: none;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (any-hover: hover){
|
@media (any-hover: hover){
|
||||||
::-webkit-scrollbar{
|
::-webkit-scrollbar{
|
||||||
@ -3779,6 +3781,9 @@ scrollTabPanels.innerHTML = `
|
|||||||
background: rgba(var(--text-color), 0.5);
|
background: rgba(var(--text-color), 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.tab-panels{
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div part="tab-panels" class="tab-panels">
|
<div part="tab-panels" class="tab-panels">
|
||||||
@ -3797,6 +3802,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
|||||||
this._assignedElements
|
this._assignedElements
|
||||||
this.activePanel
|
this.activePanel
|
||||||
this.debounceTimeout
|
this.debounceTimeout
|
||||||
|
this.timerId;
|
||||||
}
|
}
|
||||||
|
|
||||||
fireEvent = (tabIndex) => {
|
fireEvent = (tabIndex) => {
|
||||||
@ -3811,13 +3817,41 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
|||||||
|
|
||||||
handlePanelChange = (e) => {
|
handlePanelChange = (e) => {
|
||||||
if (e.detail.targetPanelGroup === this.id) {
|
if (e.detail.targetPanelGroup === this.id) {
|
||||||
/* this.tabPanels.scrollTo({
|
this.tabPanels.scrollTo({
|
||||||
top: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().top - this.tabPanels.getBoundingClientRect().top + this.tabPanels.scrollTop),
|
left: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().left - this.tabPanels.getBoundingClientRect().left + this.tabPanels.scrollLeft),
|
||||||
behavior: 'smooth'
|
behavior: 'smooth'
|
||||||
}) */
|
})
|
||||||
this._assignedElements[e.detail.panelIndex].scrollIntoView({block: "nearest", inline: 'start', behavior: 'smooth'})
|
// this._assignedElements[e.detail.panelIndex].scrollIntoView({block: "nearest", inline: 'start', behavior: 'smooth'})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollHorizontally = e => {
|
||||||
|
e.preventDefault()
|
||||||
|
this.throttle(() => {
|
||||||
|
const width = this.tabPanels.getBoundingClientRect().width
|
||||||
|
const scrollBy = e.deltaY > 0 ? width : -width
|
||||||
|
this.tabPanels.scrollBy({
|
||||||
|
left: scrollBy,
|
||||||
|
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 => {
|
||||||
@ -3837,8 +3871,8 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
threshold: 0.2,
|
threshold: 0.8,
|
||||||
// root: this.tabPanels
|
root: this.tabPanels
|
||||||
})
|
})
|
||||||
this.tabPanels.addEventListener('slotchange', e => {
|
this.tabPanels.addEventListener('slotchange', e => {
|
||||||
this._assignedElements = this.tabPanelsSlot.assignedElements()
|
this._assignedElements = this.tabPanelsSlot.assignedElements()
|
||||||
@ -3851,6 +3885,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
|||||||
panelObserver.observe(elem)
|
panelObserver.observe(elem)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
this.tabPanels.addEventListener('wheel', this.scrollHorizontally)
|
||||||
document.addEventListener('changePanel', this.handlePanelChange)
|
document.addEventListener('changePanel', this.handlePanelChange)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -691,9 +691,7 @@ function showSiteMap() {
|
|||||||
document.body.style.overflow = "hidden";
|
document.body.style.overflow = "hidden";
|
||||||
document.body.style.top = `-${window.scrollY}px`;
|
document.body.style.top = `-${window.scrollY}px`;
|
||||||
getRef("elevator_popup").classList.remove("hide-completely");
|
getRef("elevator_popup").classList.remove("hide-completely");
|
||||||
setTimeout(() => {
|
siteMapTimeline.duration(0.9).play();
|
||||||
siteMapTimeline.duration(0.9).play();
|
|
||||||
}, 0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideSiteMap() {
|
function hideSiteMap() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user