v0.14.18
Changing elevator layout
This commit is contained in:
sairaj mote
parent
9f64482f3f
commit
8fd379dc82
70
css/main.css
70
css/main.css
@ -393,9 +393,62 @@ ul {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#elevator_popup {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
background: rgba(var(--foreground-color), 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#elevator_sections {
|
||||||
|
-ms-flex-line-pack: start;
|
||||||
|
align-content: flex-start;
|
||||||
|
padding: 1.5rem;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.elevator__header {
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 0.5rem;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#elevator_button_panel {
|
#elevator_button_panel {
|
||||||
gap: 1rem;
|
gap: 2rem;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
overflow: auto;
|
||||||
|
-ms-scroll-snap-type: x proximity;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
grid-template-columns: repeat(3, min(20rem, 80%));
|
||||||
|
}
|
||||||
|
#elevator_button_panel li {
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.outlet-section {
|
||||||
|
display: grid;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup__header__close {
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.floor__button {
|
.floor__button {
|
||||||
@ -631,7 +684,7 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.value {
|
.value {
|
||||||
font-size: 1.5rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
sm-carousel {
|
sm-carousel {
|
||||||
@ -972,17 +1025,12 @@ table {
|
|||||||
width: 66%;
|
width: 66%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#elevator_sections {
|
|
||||||
gap: 3rem;
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outlet-preview__info {
|
.outlet-preview__info {
|
||||||
padding: 2rem 3rem;
|
padding: 2rem 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.outlet-preview__carousel {
|
.outlet-preview__carousel {
|
||||||
padding: 2rem 3rem 5rem 3rem;
|
padding: 2rem 2rem 5rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#outlet_switcher {
|
#outlet_switcher {
|
||||||
@ -1010,10 +1058,6 @@ table {
|
|||||||
grid-template-columns: 1fr 80vw 1fr;
|
grid-template-columns: 1fr 80vw 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
#elevator_popup {
|
|
||||||
--width: min(100%, 54rem) ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-3 {
|
.grid-3 {
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-ms-flex-pack: center;
|
-ms-flex-pack: center;
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -307,11 +307,53 @@ ul{
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#elevator_popup{
|
||||||
#elevator_button_panel{
|
position: absolute;
|
||||||
gap: 1rem;
|
width: 100%;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
background: rgba(var(--foreground-color), 1);
|
||||||
}
|
}
|
||||||
|
#elevator_sections{
|
||||||
|
align-content: flex-start;
|
||||||
|
padding: 1.5rem;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
.elevator__header{
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
#elevator_button_panel{
|
||||||
|
gap: 2rem;
|
||||||
|
overflow: auto;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
grid-template-columns: repeat(3, min(20rem, 80%));
|
||||||
|
li{
|
||||||
|
display: grid;
|
||||||
|
gap: 2rem;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.outlet-section{
|
||||||
|
display: grid;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup__header__close{
|
||||||
|
padding: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.floor__button{
|
.floor__button{
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
@ -510,7 +552,7 @@ ul{
|
|||||||
margin-bottom: 0.3rem;
|
margin-bottom: 0.3rem;
|
||||||
}
|
}
|
||||||
.value{
|
.value{
|
||||||
font-size: 1.5rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
sm-carousel{
|
sm-carousel{
|
||||||
@ -794,15 +836,11 @@ table{
|
|||||||
.outlet-preview__border{
|
.outlet-preview__border{
|
||||||
width: 66%;
|
width: 66%;
|
||||||
}
|
}
|
||||||
#elevator_sections{
|
|
||||||
gap: 3rem;
|
|
||||||
grid-template-columns: auto 1fr;
|
|
||||||
}
|
|
||||||
.outlet-preview__info{
|
.outlet-preview__info{
|
||||||
padding: 2rem 3rem;
|
padding: 2rem 3rem;
|
||||||
}
|
}
|
||||||
.outlet-preview__carousel{
|
.outlet-preview__carousel{
|
||||||
padding: 2rem 3rem 5rem 3rem;
|
padding: 2rem 2rem 5rem 2rem;
|
||||||
}
|
}
|
||||||
#outlet_switcher{
|
#outlet_switcher{
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
@ -824,9 +862,6 @@ table{
|
|||||||
.page{
|
.page{
|
||||||
grid-template-columns: 1fr 80vw 1fr;
|
grid-template-columns: 1fr 80vw 1fr;
|
||||||
}
|
}
|
||||||
#elevator_popup{
|
|
||||||
--width: min(100%, 54rem)
|
|
||||||
}
|
|
||||||
.grid-3{
|
.grid-3{
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
& > .grid{
|
& > .grid{
|
||||||
|
|||||||
114
index.html
114
index.html
@ -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=Lora:wght@400;500;700&family=Roboto+Slab:wght@400..900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400..900&display=swap" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body data-theme="light">
|
<body data-theme="light">
|
||||||
<audio id="notification_sound">
|
<audio id="notification_sound">
|
||||||
@ -54,7 +54,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template id="bob_fund_row">
|
<template id="bob_fund_row">
|
||||||
<div class="bob-fund__row grid gap-1-5">
|
<div class="bob-fund__row grid gap-2">
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<h5 class="label color-0-8 weight-500">Investor</h5>
|
<h5 class="label color-0-8 weight-500">Investor</h5>
|
||||||
<h3 class="value investor__name"></h3>
|
<h3 class="value investor__name"></h3>
|
||||||
@ -116,54 +116,60 @@
|
|||||||
|
|
||||||
<!-- Popup -->
|
<!-- Popup -->
|
||||||
|
|
||||||
<sm-popup id="elevator_popup">
|
<section id="elevator_popup" class="grid hide-completely">
|
||||||
<header class="popup__header" slot="header">
|
<header class="elevator__header">
|
||||||
<button class="close-button" onclick="hidePopup()">
|
<button class="close-button" onclick="hideSiteMap()">
|
||||||
<svg class="icon icon-only close-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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
<svg class="icon icon-only close-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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||||
</button>
|
</button>
|
||||||
<h4>Elevator</h4>
|
<h4>Elevator</h4>
|
||||||
</header>
|
</header>
|
||||||
<div id="elevator_sections" class="grid">
|
<div id="elevator_sections" class="grid hide-completely">
|
||||||
<section id="elevator__panel">
|
<h4 class="h4 margin-bottom-2r">Floors</h4>
|
||||||
<h5 class="h5 margin-bottom-2r">Floors</h5>
|
<ul id="elevator_button_panel" class="grid">
|
||||||
<ul id="elevator_button_panel" class="grid">
|
<li>
|
||||||
<li>
|
<button class="button floor__button" data-target="floor_1">
|
||||||
<button class="button floor__button" data-target="floor_1">1</button>
|
<span>
|
||||||
</li>
|
1<sup>st</sup>
|
||||||
<li>
|
</span>
|
||||||
<button class="button floor__button" data-target="floor_2">2</button>
|
</button>
|
||||||
</li>
|
<div class="outlet-section page-link interact" data-target="bitbonds">
|
||||||
<li>
|
<h3 class="h3 margin-bottom-0-5r">BitCoin Bonds</h3>
|
||||||
<button class="button floor__button" data-target="floor_3">3</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
<section id="elevator__floor_plan" class="hide-on-mobile">
|
|
||||||
<h5 class="h5 margin-bottom-2r">Outlets</h5>
|
|
||||||
<section class="grid gap-3" id="first_floor">
|
|
||||||
<div class="outlet-section">
|
|
||||||
<h4 class="h4 margin-bottom-0-5r page-link" data-target="bitbonds">BitCoin Bonds</h4>
|
|
||||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||||
|
<svg class="icon justify-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="outlet-section">
|
<div class="outlet-section page-link interact" data-target="bob'sfund">
|
||||||
<h4 class="h4 margin-bottom-0-5r page-link" data-target="bob'sfund">Bob's Fund</h4>
|
<h3 class="h3 margin-bottom-0-5r">Bob's Fund</h3>
|
||||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||||
|
<svg class="icon justify-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="outlet-section">
|
<div class="outlet-section page-link interact" data-target="ico">
|
||||||
<h4 class="h4 margin-bottom-0-5r page-link" data-target="ico">ICO</h4>
|
<h3 class="h3 margin-bottom-0-5r">ICO</h3>
|
||||||
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
<p class="color-0-8">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quae!</p>
|
||||||
|
<svg class="icon justify-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</li>
|
||||||
<section id="second_floor"></section>
|
<li>
|
||||||
<section id="third_floor"></section>
|
<button class="button floor__button" data-target="floor_2">
|
||||||
</section>
|
<span>
|
||||||
|
2<sup>nd</sup>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button class="button floor__button" data-target="floor_3">
|
||||||
|
<span>
|
||||||
|
3<sup>rd</sup>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</sm-popup>
|
</section>
|
||||||
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<header id="main_header" class="grid align-center full-bleed">
|
<header id="main_header" class="grid align-center full-bleed">
|
||||||
<button id="elevator_button" class="button" onclick="showPopup('elevator_popup')">
|
<button id="elevator_button" class="button" onclick="showSiteMap()">
|
||||||
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
|
<svg class="icon button__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3L16.3301 10.5H7.66987L12 3Z"/><path d="M12 21L7.66987 13.5L16.3301 13.5L12 21Z"/></svg>
|
||||||
<span class="button__label">
|
<span class="button__label">
|
||||||
Elevator
|
Elevator
|
||||||
@ -1231,8 +1237,8 @@
|
|||||||
history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
|
history.pushState({type: 'page', id: targetPage}, null, `#${targetPage}`)
|
||||||
showPage(targetPage)
|
showPage(targetPage)
|
||||||
}
|
}
|
||||||
if(getRef('elevator_popup').open){
|
if(isSiteMapOpen){
|
||||||
hidePopup()
|
hideSiteMap()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if(isFloorSwitcherOpen){
|
if(isFloorSwitcherOpen){
|
||||||
@ -1246,8 +1252,8 @@
|
|||||||
history.pushState({type: 'page', id: 'home_page'}, null, `#${'home_page'}`)
|
history.pushState({type: 'page', id: 'home_page'}, null, `#${'home_page'}`)
|
||||||
showPage('home_page')
|
showPage('home_page')
|
||||||
}
|
}
|
||||||
if(getRef('elevator_popup').open){
|
if(isSiteMapOpen){
|
||||||
hidePopup()
|
hideSiteMap()
|
||||||
}
|
}
|
||||||
getRef('home_page').scrollTo({
|
getRef('home_page').scrollTo({
|
||||||
top: getRef(target).getBoundingClientRect().top - getRef('home_page').getBoundingClientRect().top + getRef('home_page').scrollTop,
|
top: getRef(target).getBoundingClientRect().top - getRef('home_page').getBoundingClientRect().top + getRef('home_page').scrollTop,
|
||||||
@ -1416,6 +1422,36 @@
|
|||||||
})
|
})
|
||||||
document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
|
document.querySelectorAll('.floor').forEach(floor => floorObserver.observe(floor))
|
||||||
|
|
||||||
|
let isSiteMapOpen = false
|
||||||
|
|
||||||
|
const animeOptions = {
|
||||||
|
duration: 300,
|
||||||
|
fill: 'forwards',
|
||||||
|
easing: 'ease'
|
||||||
|
}
|
||||||
|
function showSiteMap(){
|
||||||
|
isSiteMapOpen = true
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
document.body.style.top= `-${window.scrollY}px`
|
||||||
|
getRef('elevator_popup').classList.remove('hide-completely')
|
||||||
|
getRef('elevator_popup').animate(slideInDown, animeOptions).onfinish = () => {
|
||||||
|
getRef('elevator_sections').classList.remove('hide-completely')
|
||||||
|
getRef('elevator_sections').animate(slideInUp, animeOptions)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideSiteMap(){
|
||||||
|
const scrollY = document.body.style.top;
|
||||||
|
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
||||||
|
getRef('elevator_popup').animate(slideOutUp, animeOptions).onfinish = () => {
|
||||||
|
getRef('elevator_popup').classList.add('hide-completely')
|
||||||
|
getRef('elevator_sections').classList.add('hide-completely')
|
||||||
|
document.body.style.overflow = 'auto';
|
||||||
|
document.body.style.top = 'initial'
|
||||||
|
isSiteMapOpen = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user