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
|
||||
nihil quisquam harum quo mollitia sunt!</p>
|
||||
</section>
|
||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
||||
<scroll-tab-header data-target="bit_bond_page_group" class="margin-bottom-1r">
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<div class="rooms__header">
|
||||
<h4 class="room__label">Rooms</h4>
|
||||
<scroll-tab-header data-target="bit_bond_page_group">
|
||||
<button class="room-button">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<path
|
||||
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" />
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="button__label">
|
||||
Returns
|
||||
</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>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
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>
|
||||
</svg>
|
||||
<span class="button__label">
|
||||
Returns
|
||||
</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>
|
||||
</div>
|
||||
<scroll-tab-panels id="bit_bond_page_group">
|
||||
<div class="flex w-100" style="overflow-x: auto;">
|
||||
<table>
|
||||
|
||||
@ -72,21 +72,23 @@
|
||||
<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>
|
||||
</section>
|
||||
<h3 class="h3 margin-bottom-1r">Rooms</h3>
|
||||
<scroll-tab-header data-target="bob_fund_page_group" class="margin-bottom-1r">
|
||||
<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>
|
||||
<div class="rooms__header">
|
||||
<h4 class="room__label">Rooms</h4>
|
||||
<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>
|
||||
</div>
|
||||
<scroll-tab-panels id="bob_fund_page_group">
|
||||
<div>
|
||||
<!-- <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 {
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.5rem 0;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
justify-self: flex-start;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.floor__button--active {
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
@ -872,13 +870,10 @@ sm-carousel {
|
||||
}
|
||||
|
||||
scroll-tab-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: var(--background-color);
|
||||
--background: transparent;
|
||||
--grid-auto-flow: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
scroll-tab-panels {
|
||||
@ -886,8 +881,8 @@ scroll-tab-panels {
|
||||
}
|
||||
scroll-tab-panels > * {
|
||||
opacity: 0.4;
|
||||
padding-top: 4rem;
|
||||
min-height: 100vh;
|
||||
flex-shrink: 0;
|
||||
min-width: 100%;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
scroll-tab-panels > [active] {
|
||||
@ -903,15 +898,52 @@ scroll-tab-panels > [active] {
|
||||
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 {
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
transition: opacity 0.3s, background-color 0.3s;
|
||||
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] {
|
||||
opacity: 1;
|
||||
color: var(--accent-color);
|
||||
@ -919,16 +951,6 @@ scroll-tab-panels > [active] {
|
||||
.room-button[active] .icon {
|
||||
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 {
|
||||
border-collapse: collapse;
|
||||
@ -1162,6 +1184,6 @@ table {
|
||||
}
|
||||
|
||||
.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{
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 0.5rem 0;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
justify-self: flex-start;
|
||||
border-radius: 0.2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 900;
|
||||
background: rgba(var(--text-color), 0.06);
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
&--active{
|
||||
background: rgba(var(--text-color), 0.2);
|
||||
box-shadow: 0 0 0 0.4rem rgba(var(--text-color), 1) inset;
|
||||
@ -780,20 +778,17 @@ sm-carousel{
|
||||
}
|
||||
|
||||
scroll-tab-header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
--padding: 0.5rem 0;
|
||||
--border-radius: 0.3rem;
|
||||
--background: var(--background-color);
|
||||
--background: transparent;
|
||||
--grid-auto-flow: column;
|
||||
z-index: 1;
|
||||
}
|
||||
scroll-tab-panels{
|
||||
--background: transparent;
|
||||
& > *{
|
||||
opacity: 0.4;
|
||||
padding-top: 4rem;
|
||||
min-height: 100vh;
|
||||
flex-shrink: 0;
|
||||
min-width: 100%;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
& > [active]{
|
||||
@ -807,30 +802,56 @@ scroll-tab-panels{
|
||||
.grid-2{
|
||||
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{
|
||||
position: relative;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
border-radius: 0;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
transition: opacity 0.3s, background-color 0.3s;
|
||||
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]{
|
||||
opacity: 1;
|
||||
color: var(--accent-color);
|
||||
.icon{
|
||||
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{
|
||||
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>
|
||||
<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>
|
||||
<scroll-tab-header data-target="ico_page_group" class="margin-bottom-1r">
|
||||
<button class="room-button" title="Investors">
|
||||
<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 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>
|
||||
<div class="rooms__header">
|
||||
<h4 class="room__label">Rooms</h4>
|
||||
<scroll-tab-header data-target="ico_page_group">
|
||||
<button class="room-button" title="Investors">
|
||||
<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 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>
|
||||
</div>
|
||||
<scroll-tab-panels id="ico_page_group">
|
||||
<div class="grid carousel-container">
|
||||
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
||||
|
||||
@ -3743,15 +3743,13 @@ scrollTabPanels.innerHTML = `
|
||||
}
|
||||
.tab-panels{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
gap: var(--gap);
|
||||
// height: var(--height);
|
||||
overflow-y: auto;
|
||||
border-radius: var(--border-radius);
|
||||
background: var(--background);
|
||||
scroll-snap-type: y proximity;
|
||||
scroll-snap-type: x proximity;
|
||||
scroll-behavior: smooth;
|
||||
-ms-scroll-chaining: none;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
slot::slotted(*){
|
||||
scroll-snap-align: start;
|
||||
@ -3765,6 +3763,10 @@ scrollTabPanels.innerHTML = `
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tab-panels{
|
||||
scrollbar-height: none;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
@ -3779,6 +3781,9 @@ scrollTabPanels.innerHTML = `
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
.tab-panels{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div part="tab-panels" class="tab-panels">
|
||||
@ -3797,6 +3802,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
this._assignedElements
|
||||
this.activePanel
|
||||
this.debounceTimeout
|
||||
this.timerId;
|
||||
}
|
||||
|
||||
fireEvent = (tabIndex) => {
|
||||
@ -3811,13 +3817,41 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
|
||||
handlePanelChange = (e) => {
|
||||
if (e.detail.targetPanelGroup === this.id) {
|
||||
/* this.tabPanels.scrollTo({
|
||||
top: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().top - this.tabPanels.getBoundingClientRect().top + this.tabPanels.scrollTop),
|
||||
this.tabPanels.scrollTo({
|
||||
left: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().left - this.tabPanels.getBoundingClientRect().left + this.tabPanels.scrollLeft),
|
||||
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() {
|
||||
const panelObserver = new IntersectionObserver(entries => {
|
||||
@ -3837,8 +3871,8 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
})
|
||||
},
|
||||
{
|
||||
threshold: 0.2,
|
||||
// root: this.tabPanels
|
||||
threshold: 0.8,
|
||||
root: this.tabPanels
|
||||
})
|
||||
this.tabPanels.addEventListener('slotchange', e => {
|
||||
this._assignedElements = this.tabPanelsSlot.assignedElements()
|
||||
@ -3851,6 +3885,7 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
|
||||
panelObserver.observe(elem)
|
||||
})
|
||||
})
|
||||
this.tabPanels.addEventListener('wheel', this.scrollHorizontally)
|
||||
document.addEventListener('changePanel', this.handlePanelChange)
|
||||
}
|
||||
|
||||
|
||||
@ -691,9 +691,7 @@ function showSiteMap() {
|
||||
document.body.style.overflow = "hidden";
|
||||
document.body.style.top = `-${window.scrollY}px`;
|
||||
getRef("elevator_popup").classList.remove("hide-completely");
|
||||
setTimeout(() => {
|
||||
siteMapTimeline.duration(0.9).play();
|
||||
}, 0);
|
||||
siteMapTimeline.duration(0.9).play();
|
||||
}
|
||||
|
||||
function hideSiteMap() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user