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); background: var(--background);
scroll-snap-type: y proximity; scroll-snap-type: y 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;

101
css/main.css
View File

@ -3,7 +3,7 @@
margin: 0; margin: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font-family: "Roboto", sans-serif; font-family: "Roboto", serif;
} }
body { body {
@ -14,10 +14,11 @@ body {
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #efefef; --background-color: #efefef;
--error-color: red; --error-color: red;
--red: #e8505b;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem); 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] { body[data-theme=dark] {
@ -36,14 +37,19 @@ body[data-theme=dark] .outlet-preview {
body[data-theme=dark] .outlet-preview sm-carousel { body[data-theme=dark] .outlet-preview sm-carousel {
border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
} }
body[data-theme=dark] #theme_switcher { body[data-theme=dark] #outlet_switcher {
justify-self: flex-end; 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 { .full-bleed {
grid-column: 1/4; grid-column: 1/4;
} }
.h1, .h2, .h3, .h4, .h5 {
font-family: "Roboto Slab", serif;
}
.h1 { .h1 {
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -438,8 +444,31 @@ ul {
width: 1.8rem; width: 1.8rem;
} }
#theme_switcher { .theme-switcher {
position: relative;
justify-self: flex-end; 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 { .page {
@ -489,7 +518,7 @@ ul {
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: -0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border: solid 0.2rem rgba(var(--text-color), 1); border: solid 0.2rem var(--red);
-webkit-transition: -webkit-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear;
transition: -webkit-transform 0.1s linear; transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear; transition: transform 0.1s linear;
@ -500,7 +529,8 @@ ul {
.line-map__bar { .line-map__bar {
width: 0.1rem; width: 0.1rem;
height: 100%; height: 100%;
background: rgba(var(--text-color), 0.4); border-radius: 1rem;
background: var(--red);
} }
.floor-label { .floor-label {
@ -511,44 +541,40 @@ ul {
-webkit-box-align: center; -webkit-box-align: center;
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
left: 0.7rem; left: 0.75rem;
margin-top: -0.9rem; margin-top: -0.9rem;
padding-bottom: 1rem; padding-bottom: 1rem;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0.5;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.floor-label--active {
opacity: 1;
}
.floor-label--active .floor-title { .floor-label--active .floor-title {
opacity: 1;
-webkit-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); -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); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
} }
.floor-circle { .floor-circle {
position: absolute; position: absolute;
height: 0.6rem; height: 0.5rem;
width: 0.6rem; width: 0.5rem;
background: rgba(var(--text-color), 1); background: rgba(var(--text-color), 1);
border-radius: 1rem; border-radius: 1rem;
} }
.floor-title { .floor-title {
opacity: 0.5;
font-size: 0.9rem; font-size: 0.9rem;
white-space: nowrap; white-space: nowrap;
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
margin-left: 0.5rem; margin-left: 1rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
-webkit-transition: -webkit-box-shadow 0.3s; -webkit-transition: opacity 0.3s, -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s; transition: opacity 0.3s, -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s; transition: box-shadow 0.3s, opacity 0.3s;
transition: box-shadow 0.3s, -webkit-box-shadow 0.3s; transition: box-shadow 0.3s, opacity 0.3s, -webkit-box-shadow 0.3s;
} }
#floor_container { #floor_container {
@ -574,24 +600,18 @@ ul {
.outlet-preview { .outlet-preview {
padding-top: 2rem; padding-top: 2rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border-radius: 0.3rem; border-radius: 0.5rem;
-webkit-transition: -webkit-box-shadow 0.3s; -webkit-transition: -webkit-box-shadow 0.3s;
transition: -webkit-box-shadow 0.3s; transition: -webkit-box-shadow 0.3s;
transition: box-shadow 0.3s; transition: box-shadow 0.3s;
transition: box-shadow 0.3s, -webkit-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 { .outlet-preview sm-carousel {
border-top: dashed 0.5rem rgba(var(--foreground-color), 1); border-top: dashed 0.5rem rgba(var(--foreground-color), 1);
} }
.outlet__title { .outlet__title {
font-weight: 900; font-weight: 700;
text-transform: capitalize; text-transform: capitalize;
} }
@ -663,17 +683,12 @@ sm-carousel {
#outlet_switcher { #outlet_switcher {
position: absolute; position: absolute;
top: 0;
padding: 1rem; padding: 1rem;
border-radius: 0.3rem; border-radius: 0.3rem;
background: rgba(var(--foreground-color), 1); 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); -webkit-box-shadow: 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); box-shadow: 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; z-index: 2;
} }
@ -690,7 +705,7 @@ sm-carousel {
width: 4vw; width: 4vw;
height: 0.1rem; height: 0.1rem;
margin: 0 0.5rem; margin: 0 0.5rem;
background: rgba(var(--text-color), 0.8); background: var(--red);
} }
.outlet-label { .outlet-label {
@ -761,12 +776,12 @@ scroll-tab-panels > [active] {
font-weight: 500; font-weight: 500;
font-size: 1.1rem; font-size: 1.1rem;
opacity: 0.6; opacity: 0.6;
-webkit-transition: opacity 0.3s; -webkit-transition: opacity 0.3s, background-color 0.3s;
transition: opacity 0.3s; transition: opacity 0.3s, background-color 0.3s;
padding: 0.6rem 0.8rem; padding: 0.6rem 0.8rem;
} }
.room-button[active] { .room-button[active] {
background: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
opacity: 1; opacity: 1;
border-radius: 0.3rem; border-radius: 0.3rem;
color: var(--accent-color); color: var(--accent-color);
@ -914,6 +929,10 @@ table {
grid-template-columns: 8rem 1fr; grid-template-columns: 8rem 1fr;
} }
#floor_line_map {
margin-left: 0.8rem;
}
.outlet-preview { .outlet-preview {
padding-top: 3rem; 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; margin: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', serif;
} }
body { body {
@ -14,10 +14,11 @@ body {
--foreground-color: 255, 255, 255; --foreground-color: 255, 255, 255;
--background-color: #efefef; --background-color: #efefef;
--error-color: red; --error-color: red;
--red: #e8505b;
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
height: calc(100%); height: calc(100%);
font-size: clamp(1rem, 1.2vmax, 3rem); 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']{ body[data-theme='dark']{
--accent-color:#2fb3ff; --accent-color:#2fb3ff;
@ -33,8 +34,8 @@ body[data-theme='dark']{
border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7);
} }
} }
#theme_switcher{ #outlet_switcher{
justify-self: flex-end; 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; grid-column: 1/4;
} }
.h1, .h2, .h3, .h4, .h5{
font-family: 'Roboto Slab', serif;
}
.h1{ .h1{
font-size: 2.5rem; font-size: 2.5rem;
} }
@ -344,8 +348,25 @@ ul{
height: 1.8rem; height: 1.8rem;
width: 1.8rem; width: 1.8rem;
} }
#theme_switcher{ .theme-switcher{
position: relative;
justify-self: flex-end; 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{ .page{
@ -392,48 +413,48 @@ ul{
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: -0.5rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
border: solid 0.2rem rgba(var(--text-color), 1); border: solid 0.2rem var(--red);
transition: transform 0.1s linear; transition: transform 0.1s linear;
z-index: 5; z-index: 5;
} }
.line-map__bar{ .line-map__bar{
width: 0.1rem; width: 0.1rem;
height: 100%; height: 100%;
background: rgba(var(--text-color), 0.4); border-radius: 1rem;
background: var(--red);
} }
.floor-label{ .floor-label{
position: absolute; position: absolute;
display: flex; display: flex;
align-items: center; align-items: center;
left: 0.7rem; left: 0.75rem;
margin-top: -0.9rem; margin-top: -0.9rem;
padding-bottom: 1rem; padding-bottom: 1rem;
transition: opacity 0.3s;
opacity: 0.5;
user-select: none; user-select: none;
&--active{ &--active{
opacity: 1;
.floor-title{ .floor-title{
opacity: 1;
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{ .floor-circle{
position: absolute; position: absolute;
height: 0.6rem; height: 0.5rem;
width: 0.6rem; width: 0.5rem;
background: rgba(var(--text-color), 1); background: rgba(var(--text-color), 1);
border-radius: 1rem; border-radius: 1rem;
} }
.floor-title{ .floor-title{
opacity: 0.5;
font-size: 0.9rem; font-size: 0.9rem;
white-space: nowrap; white-space: nowrap;
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
margin-left: 0.5rem; margin-left: 1rem;
border-radius: 0.2rem; border-radius: 0.2rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
transition: box-shadow 0.3s; transition: box-shadow 0.3s, opacity 0.3s;
} }
#floor_container{ #floor_container{
@ -459,21 +480,14 @@ ul{
.outlet-preview{ .outlet-preview{
padding-top: 2rem; padding-top: 2rem;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
// border: solid 0.2rem rgba(var(--text-color), 0.2); border-radius: 0.5rem;
border-radius: 0.3rem;
transition: box-shadow 0.3s; 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{ sm-carousel{
border-top: dashed 0.5rem rgba(var(--foreground-color), 1); 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{ .outlet__title{
font-weight: 900; font-weight: 700;
text-transform: capitalize; text-transform: capitalize;
} }
.outlet__description{ .outlet__description{
@ -539,12 +553,11 @@ sm-carousel{
} }
#outlet_switcher{ #outlet_switcher{
position: absolute; position: absolute;
top: 0;
padding: 1rem; padding: 1rem;
border-radius: 0.3rem; border-radius: 0.3rem;
background: rgba(var(--foreground-color), 1); 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); box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2);
transform: translateY(-0.5rem);
transition: transform 0.3s, opacity 0.3s;
z-index: 2; z-index: 2;
} }
.outlet_switcher__button{ .outlet_switcher__button{
@ -559,7 +572,7 @@ sm-carousel{
width: 4vw; width: 4vw;
height: 0.1rem; height: 0.1rem;
margin: 0 0.5rem; margin: 0 0.5rem;
background: rgba(var(--text-color), 0.8); background: var(--red);
} }
} }
.outlet-label{ .outlet-label{
@ -616,10 +629,10 @@ scroll-tab-panels{
font-weight: 500; font-weight: 500;
font-size: 1.1rem; font-size: 1.1rem;
opacity: 0.6; opacity: 0.6;
transition: opacity 0.3s; transition: opacity 0.3s, background-color 0.3s;
padding: 0.6rem 0.8rem; padding: 0.6rem 0.8rem;
&[active]{ &[active]{
background: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
opacity: 1; opacity: 1;
border-radius: 0.3rem; border-radius: 0.3rem;
color: var(--accent-color); color: var(--accent-color);
@ -743,6 +756,9 @@ table{
#home_page{ #home_page{
grid-template-columns: 8rem 1fr; grid-template-columns: 8rem 1fr;
} }
#floor_line_map{
margin-left: 0.8rem;
}
.outlet-preview{ .outlet-preview{
padding-top: 3rem; 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="shortcut icon" href="assets/RM logo.png" type="image/png">
<link rel="stylesheet" href="css/main.min.css"> <link rel="stylesheet" href="css/main.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <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> </head>
<body data-theme="light"> <body data-theme="light">
<audio id="notification_sound"> <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> <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> <h4 class="h4 header__company-name">RanchiMall</h4>
</div> </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> </header>
<article id="home_page" class="page hide-completely full-bleed"> <article id="home_page" class="page hide-completely full-bleed">
<aside id="floor_line_map" class="grid"> <aside id="floor_line_map" class="grid">
@ -181,8 +185,8 @@
<main id="floor_container" class="grid"> <main id="floor_container" class="grid">
<section id="floor_1" class="floor"> <section id="floor_1" class="floor">
<span class="flex align-center margin-bottom-1-5r"> <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> <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="h3 weight-500"> <h4 class="h4 weight-500">
Outlets Outlets
</h4> </h4>
</span> </span>
@ -229,15 +233,10 @@
</main> </main>
</section> </section>
<section id="floor_2" class="floor"> <section id="floor_2" class="floor">
<h1 class="h1">Lorem ipsumnimi rerum e laudantium voluptatem quisquam cum alias.</h1> <h4 class="h1">Under construction</h4>
<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>
</section> </section>
<section id="floor_3" class="floor"> <section id="floor_3" class="floor">
<h1 class="h1">Lorem ipsumusto animi rum. Odit laudantium voluptatem quisquam cum alias.</h1> <h4 class="h1">Under construction</h4>
<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>
</section> </section>
</main> </main>
</article> </article>
@ -324,9 +323,9 @@
</tbody> </tbody>
</table> </table>
</div> </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. 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> </scroll-tab-panels>
</div> </div>
</article> </article>
@ -1214,8 +1213,10 @@
if(e.target.closest('.page-link')){ if(e.target.closest('.page-link')){
const button = e.target.closest('.page-link') const button = e.target.closest('.page-link')
const targetPage = button.dataset.target const targetPage = button.dataset.target
showPage(targetPage) if(currentPage !== targetPage){
history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`) history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
showPage(targetPage)
}
if(getRef('elevator_popup').open){ if(getRef('elevator_popup').open){
hidePopup() hidePopup()
} }
@ -1227,7 +1228,10 @@
if(e.target.closest('.floor-label')){ if(e.target.closest('.floor-label')){
const label = e.target.closest('.floor-label') const label = e.target.closest('.floor-label')
const target = label.dataset.target 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')){ else if(e.target.closest('.outlet-label')){
showOutletSwitcher(e.target.closest('.outlet-label')) showOutletSwitcher(e.target.closest('.outlet-label'))
@ -1250,17 +1254,28 @@
}) })
function showOutletSwitcher(button){ function showOutletSwitcher(button){
if(isFloorSwitcherOpen) return
isFloorSwitcherOpen = true
const buttonDimensions = button.getBoundingClientRect() const buttonDimensions = button.getBoundingClientRect()
getRef('outlet_switcher').setAttribute('style', `top: ${buttonDimensions.top + document.documentElement.scrollTop}px; left: ${buttonDimensions.left}px;`) 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.remove('hide')
getRef('outlet_switcher').classList.add('no-transformations') getRef('outlet_switcher').animate(slideInDown, {
isFloorSwitcherOpen = true duration: 300,
easing: easeOutOvershoot,
fill: 'forwards'
})
} }
function hideOutletSwitcher(){ function hideOutletSwitcher(){
getRef('outlet_switcher').classList.add('hide') if(!isFloorSwitcherOpen) return
getRef('outlet_switcher').classList.remove('no-transformations') getRef('outlet_switcher').animate(slideOutUp, {
isFloorSwitcherOpen = false duration: 200,
easing: easeInOvershoot,
fill: 'forwards'
}).onfinish = () => {
getRef('outlet_switcher').classList.add('hide')
isFloorSwitcherOpen = false
}
} }
let activeOutletIndex = 0 let activeOutletIndex = 0
@ -1346,7 +1361,6 @@
getRef('home_page').addEventListener('scroll', e => { getRef('home_page').addEventListener('scroll', e => {
throttle(updatePos, 1000 / 30) throttle(updatePos, 1000 / 30)
// window.requestAnimationFrame(updatePos)
}, {passive: true}) }, {passive: true})
function updatePos(){ function updatePos(){
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {