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

v0.13.13

Browse Source 
Added
-- New theme switcher with representative icons for states

Changed
-- Font for headlines
-- Colour of lines for floor indicator and outlet map to Red

Improved
-- Outlet switcher popup animation
This commit is contained in:
sairaj mote 2021-04-08 17:01:02 +05:30
parent 8718ae1aa5
commit 60effc09f1
5 changed files with 145 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.js
View File

@ -3750,6 +3750,8 @@ scrollTabPanels.innerHTML = `
background: var(--background);
scroll-snap-type: y proximity;
scroll-behavior: smooth;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
slot::slotted(*){
scroll-snap-align: start;

101
css/main.css
View File

@ -3,7 +3,7 @@
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
font-family: "Roboto", serif;
}
body {
@ -14,10 +14,11 @@ body {
--foreground-color: 255, 255, 255;
--background-color: #efefef;
--error-color: red;
--red: #e8505b;
color: rgba(var(--text-color), 1);
height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem);
background: rgba(var(--text-color), 0.06);
background: rgba(var(--text-color), 0.04);
}
body[data-theme=dark] {
@ -36,14 +37,19 @@ body[data-theme=dark] .outlet-preview {
body[data-theme=dark] .outlet-preview sm-carousel {
border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
}
body[data-theme=dark] #theme_switcher {
justify-self: flex-end;
body[data-theme=dark] #outlet_switcher {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(var(--text-color), 0.06)), to(rgba(var(--text-color), 0.06))), rgba(var(--foreground-color), 1);
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
.full-bleed {
grid-column: 1/4;
}
.h1, .h2, .h3, .h4, .h5 {
font-family: "Roboto Slab", serif;
}
.h1 {
font-size: 2.5rem;
}
@ -438,8 +444,31 @@ ul {
width: 1.8rem;
}
#theme_switcher {
.theme-switcher {
position: relative;
justify-self: flex-end;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
}
.theme-switcher .icon {
position: absolute;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.theme-switcher__checkbox {
display: none;
}
.theme-switcher__checkbox:checked ~ .moon-icon {
-webkit-transform: scale(0);
transform: scale(0);
}
.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
-webkit-transform: scale(0);
transform: scale(0);
}
.page {
@ -489,7 +518,7 @@ ul {
height: 1rem;
margin-top: -0.5rem;
background: rgba(var(--foreground-color), 1);
border: solid 0.2rem rgba(var(--text-color), 1);
border: solid 0.2rem var(--red);
-webkit-transition: -webkit-transform 0.1s linear;
transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
@ -500,7 +529,8 @@ ul {
.line-map__bar {
width: 0.1rem;
height: 100%;
background: rgba(var(--text-color), 0.4);
border-radius: 1rem;
background: var(--red);
}
.floor-label {
@ -511,44 +541,40 @@ ul {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
left: 0.7rem;
left: 0.75rem;
margin-top: -0.9rem;
padding-bottom: 1rem;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0.5;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.floor-label--active {
opacity: 1;
}
.floor-label--active .floor-title {
opacity: 1;
-webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}
.floor-circle {
position: absolute;
height: 0.6rem;
width: 0.6rem;
height: 0.5rem;
width: 0.5rem;
background: rgba(var(--text-color), 1);
border-radius: 1rem;
}
.floor-title {
opacity: 0.5;
font-size: 0.9rem;
white-space: nowrap;
padding: 0.4rem 0.6rem;
margin-left: 0.5rem;
margin-left: 1rem;
border-radius: 0.2rem;
background: rgba(var(--foreground-color), 1);
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-webkit-transition: opacity 0.3s, -webkit-box-shadow 0.3s;
transition: opacity 0.3s, -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s, opacity 0.3s;
transition: box-shadow 0.3s, opacity 0.3s, -webkit-box-shadow 0.3s;
}
#floor_container {
@ -574,24 +600,18 @@ ul {
.outlet-preview {
padding-top: 2rem;
background: rgba(var(--foreground-color), 1);
border-radius: 0.3rem;
border-radius: 0.5rem;
-webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
/* &:nth-of-type(1){
background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
background-size: contain;
} */
}
.outlet-preview sm-carousel {
border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
}
.outlet__title {
font-weight: 900;
font-weight: 700;
text-transform: capitalize;
}
@ -663,17 +683,12 @@ sm-carousel {
#outlet_switcher {
position: absolute;
top: 0;
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;
-webkit-box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
z-index: 2;
}
@ -690,7 +705,7 @@ sm-carousel {
width: 4vw;
height: 0.1rem;
margin: 0 0.5rem;
background: rgba(var(--text-color), 0.8);
background: var(--red);
}
.outlet-label {
@ -761,12 +776,12 @@ scroll-tab-panels > [active] {
font-weight: 500;
font-size: 1.1rem;
opacity: 0.6;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transition: opacity 0.3s, background-color 0.3s;
transition: opacity 0.3s, background-color 0.3s;
padding: 0.6rem 0.8rem;
}
.room-button[active] {
background: rgba(var(--text-color), 0.06);
background-color: rgba(var(--text-color), 0.06);
opacity: 1;
border-radius: 0.3rem;
color: var(--accent-color);
@ -914,6 +929,10 @@ table {
grid-template-columns: 8rem 1fr;
}
#floor_line_map {
margin-left: 0.8rem;
}
.outlet-preview {
padding-top: 3rem;
}

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

76
css/main.scss
View File

@ -3,7 +3,7 @@
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto', serif;
}
body {
@ -14,10 +14,11 @@ body {
--foreground-color: 255, 255, 255;
--background-color: #efefef;
--error-color: red;
--red: #e8505b;
color: rgba(var(--text-color), 1);
height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem);
background: rgba(var(--text-color), 0.06);
background: rgba(var(--text-color), 0.04);
}
body[data-theme='dark']{
--accent-color:#2fb3ff;
@ -33,8 +34,8 @@ body[data-theme='dark']{
border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
}
}
#theme_switcher{
justify-self: flex-end;
#outlet_switcher{
background: linear-gradient(rgba(var(--text-color), 0.06), rgba(var(--text-color), 0.06)), rgba(var(--foreground-color), 1);
}
}
@ -42,6 +43,9 @@ body[data-theme='dark']{
grid-column: 1/4;
}
.h1, .h2, .h3, .h4, .h5{
font-family: 'Roboto Slab', serif;
}
.h1{
font-size: 2.5rem;
}
@ -344,8 +348,25 @@ ul{
height: 1.8rem;
width: 1.8rem;
}
#theme_switcher{
.theme-switcher{
position: relative;
justify-self: flex-end;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
.icon{
position: absolute;
transition: transform 0.3s;
}
}
.theme-switcher__checkbox{
display: none;
&:checked ~ .moon-icon{
transform: scale(0);
}
&:not(:checked) ~ .sun-icon{
transform: scale(0);
}
}
.page{
@ -392,48 +413,48 @@ ul{
height: 1rem;
margin-top: -0.5rem;
background: rgba(var(--foreground-color), 1);
border: solid 0.2rem rgba(var(--text-color), 1);
border: solid 0.2rem var(--red);
transition: transform 0.1s linear;
z-index: 5;
}
.line-map__bar{
width: 0.1rem;
height: 100%;
background: rgba(var(--text-color), 0.4);
border-radius: 1rem;
background: var(--red);
}
.floor-label{
position: absolute;
display: flex;
align-items: center;
left: 0.7rem;
left: 0.75rem;
margin-top: -0.9rem;
padding-bottom: 1rem;
transition: opacity 0.3s;
opacity: 0.5;
user-select: none;
&--active{
opacity: 1;
.floor-title{
opacity: 1;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
}
}
}
.floor-circle{
position: absolute;
height: 0.6rem;
width: 0.6rem;
height: 0.5rem;
width: 0.5rem;
background: rgba(var(--text-color), 1);
border-radius: 1rem;
}
.floor-title{
opacity: 0.5;
font-size: 0.9rem;
white-space: nowrap;
padding: 0.4rem 0.6rem;
margin-left: 0.5rem;
margin-left: 1rem;
border-radius: 0.2rem;
background: rgba(var(--foreground-color), 1);
transition: box-shadow 0.3s;
transition: box-shadow 0.3s, opacity 0.3s;
}
#floor_container{
@ -459,21 +480,14 @@ ul{
.outlet-preview{
padding-top: 2rem;
background: rgba(var(--foreground-color), 1);
// border: solid 0.2rem rgba(var(--text-color), 0.2);
border-radius: 0.3rem;
border-radius: 0.5rem;
transition: box-shadow 0.3s;
// box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
sm-carousel{
border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
}
/* &:nth-of-type(1){
background: url(../assets/bg/floor-1-bg.svg) no-repeat top center, linear-gradient(rgba(var(--foreground-color), 1), rgba(var(--foreground-color), 1));
background-size: contain;
} */
}
.outlet__title{
font-weight: 900;
font-weight: 700;
text-transform: capitalize;
}
.outlet__description{
@ -539,12 +553,11 @@ sm-carousel{
}
#outlet_switcher{
position: absolute;
top: 0;
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;
box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
z-index: 2;
}
.outlet_switcher__button{
@ -559,7 +572,7 @@ sm-carousel{
width: 4vw;
height: 0.1rem;
margin: 0 0.5rem;
background: rgba(var(--text-color), 0.8);
background: var(--red);
}
}
.outlet-label{
@ -616,10 +629,10 @@ scroll-tab-panels{
font-weight: 500;
font-size: 1.1rem;
opacity: 0.6;
transition: opacity 0.3s;
transition: opacity 0.3s, background-color 0.3s;
padding: 0.6rem 0.8rem;
&[active]{
background: rgba(var(--text-color), 0.06);
background-color: rgba(var(--text-color), 0.06);
opacity: 1;
border-radius: 0.3rem;
color: var(--accent-color);
@ -743,6 +756,9 @@ table{
#home_page{
grid-template-columns: 8rem 1fr;
}
#floor_line_map{
margin-left: 0.8rem;
}
.outlet-preview{
padding-top: 3rem;
}

58
index.html
View File

@ -9,7 +9,7 @@
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
<link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700;900&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body data-theme="light">
<audio id="notification_sound">
@ -168,7 +168,11 @@
<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>
<sm-switch id="theme_switcher"></sm-switch>
<label class="theme-switcher" title="Change theme">
<input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox">
<svg class="icon moon-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="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z"/></svg>
<svg class="icon sun-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 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
</label>
</header>
<article id="home_page" class="page hide-completely full-bleed">
<aside id="floor_line_map" class="grid">
@ -181,8 +185,8 @@
<main id="floor_container" class="grid">
<section id="floor_1" class="floor">
<span class="flex align-center margin-bottom-1-5r">
<svg class="icon button__icon--left big-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>
<h4 class="h3 weight-500">
<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>
<h4 class="h4 weight-500">
Outlets
</h4>
</span>
@ -229,15 +233,10 @@
</main>
</section>
<section id="floor_2" class="floor">
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1>
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1>
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1>
<h4 class="h1">Under construction</h4>
</section>
<section id="floor_3" class="floor">
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1>
<h4 class="h1">Under construction</h4>
</section>
</main>
</article>
@ -324,9 +323,9 @@
</tbody>
</table>
</div>
<h1 id="bit_bond_info" class="h1">
<p id="bit_bond_info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore error omnis ipsam ut incidunt, doloremque pariatur expedita distinctio itaque.
</h1>
</p>
</scroll-tab-panels>
</div>
</article>
@ -1214,8 +1213,10 @@
if(e.target.closest('.page-link')){
const button = e.target.closest('.page-link')
const targetPage = button.dataset.target
showPage(targetPage)
history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
if(currentPage !== targetPage){
history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
showPage(targetPage)
}
if(getRef('elevator_popup').open){
hidePopup()
}
@ -1227,7 +1228,10 @@
if(e.target.closest('.floor-label')){
const label = e.target.closest('.floor-label')
const target = label.dataset.target
getRef(target).scrollIntoView({behavior: 'smooth'})
getRef('home_page').scrollTo({
top: getRef(target).getBoundingClientRect().top - getRef('home_page').getBoundingClientRect().top + getRef('home_page').scrollTop,
behavior: 'smooth'
})
}
else if(e.target.closest('.outlet-label')){
showOutletSwitcher(e.target.closest('.outlet-label'))
@ -1250,17 +1254,28 @@
})
function showOutletSwitcher(button){
if(isFloorSwitcherOpen) return
isFloorSwitcherOpen = true
const buttonDimensions = button.getBoundingClientRect()
getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`)
getRef('outlet_switcher').classList.remove('hide')
getRef('outlet_switcher').classList.add('no-transformations')
isFloorSwitcherOpen = true
getRef('outlet_switcher').animate(slideInDown, {
duration: 300,
easing: easeOutOvershoot,
fill: 'forwards'
})
}
function hideOutletSwitcher(){
getRef('outlet_switcher').classList.add('hide')
getRef('outlet_switcher').classList.remove('no-transformations')
isFloorSwitcherOpen = false
if(!isFloorSwitcherOpen) return
getRef('outlet_switcher').animate(slideOutUp, {
duration: 200,
easing: easeInOvershoot,
fill: 'forwards'
}).onfinish = () => {
getRef('outlet_switcher').classList.add('hide')
isFloorSwitcherOpen = false
}
}
let activeOutletIndex = 0
@ -1346,7 +1361,6 @@
getRef('home_page').addEventListener('scroll', e => {
throttle(updatePos, 1000 / 30)
// window.requestAnimationFrame(updatePos)
}, {passive: true})
function updatePos(){
window.requestAnimationFrame(() => {