v0.15.27
UI tweaks
This commit is contained in:
sairaj mote
parent
d514ad2f09
commit
680488c4b7
65
css/main.css
65
css/main.css
@ -378,7 +378,7 @@ ul {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
z-index: 15;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -549,8 +549,8 @@ ul {
|
||||
#floor_line_map {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: 60vh;
|
||||
z-index: 5;
|
||||
height: 40vh;
|
||||
z-index: 10;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
grid-column: 1/2;
|
||||
}
|
||||
@ -583,31 +583,30 @@ ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0.75rem;
|
||||
margin-top: -1.4rem;
|
||||
margin-top: -0.4rem;
|
||||
padding-bottom: 1rem;
|
||||
user-select: none;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.floor-label .floor-title {
|
||||
opacity: 0;
|
||||
transform: translateX(-1rem);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
.floor-label--active {
|
||||
opacity: 1;
|
||||
}
|
||||
.floor-label--active .floor-title {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
transform: none;
|
||||
/* .floor-title{
|
||||
opacity: 0;
|
||||
transform: translateX(-1rem);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
}
|
||||
&--active{
|
||||
opacity: 1;
|
||||
.floor-title{
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
transform: none;
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
.floor-circle {
|
||||
position: absolute;
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.floor-title {
|
||||
@ -630,13 +629,22 @@ ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.floor__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
transform: translateY(-0.1rem);
|
||||
z-index: 8;
|
||||
padding: 0.5rem 0;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.big-icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.outlets-container {
|
||||
margin: 3rem 0;
|
||||
margin: 1.5rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -984,6 +992,23 @@ table {
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
|
||||
.floor__header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
background: var(--background-color);
|
||||
}
|
||||
.floor__header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -10%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.outlets-container {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -315,7 +315,7 @@ ul{
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
z-index: 15;
|
||||
grid-template-rows: auto 1fr;
|
||||
background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -477,8 +477,8 @@ ul{
|
||||
#floor_line_map{
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
height: 60vh;
|
||||
z-index: 5;
|
||||
height: 40vh;
|
||||
z-index: 10;
|
||||
grid-template-columns: 2rem 1fr;
|
||||
grid-column: 1/2;
|
||||
}
|
||||
@ -508,11 +508,11 @@ ul{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 0.75rem;
|
||||
margin-top: -1.4rem;
|
||||
margin-top: -0.4rem;
|
||||
padding-bottom: 1rem;
|
||||
user-select: none;
|
||||
transition: transform 0.3s;
|
||||
.floor-title{
|
||||
/* .floor-title{
|
||||
opacity: 0;
|
||||
transform: translateX(-1rem);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
@ -524,14 +524,14 @@ ul{
|
||||
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
} */
|
||||
}
|
||||
.floor-circle{
|
||||
position: absolute;
|
||||
// position: absolute;
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
border-radius: 1rem;
|
||||
background: rgba(var(--text-color), 1);
|
||||
}
|
||||
.floor-title{
|
||||
opacity: 0.5;
|
||||
@ -553,13 +553,22 @@ ul{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.floor__header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
transform: translateY(-0.1rem);
|
||||
z-index: 8;
|
||||
padding: 0.5rem 0;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
.big-icon{
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.outlets-container{
|
||||
margin: 3rem 0;
|
||||
margin: 1.5rem 0;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -878,6 +887,24 @@ table{
|
||||
#home_page{
|
||||
grid-template-columns: 1fr 80vw 1fr;
|
||||
}
|
||||
.floor__header{
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
background: var(--background-color);
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -10%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
background: var(--background-color);
|
||||
}
|
||||
}
|
||||
.outlets-container{
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
72
index.html
72
index.html
@ -107,10 +107,10 @@
|
||||
<template id="floor_indicator_template">
|
||||
<div class="floor-label interact">
|
||||
<span class="floor-circle"></span>
|
||||
<span class="grid floor-title">
|
||||
<!-- <span class="grid floor-title">
|
||||
<h5 class="floor-num weight-400 color-0-7 h5"></h5>
|
||||
<h5 class="floor-name weight-400"></h5>
|
||||
</span>
|
||||
</span> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -266,12 +266,12 @@
|
||||
</aside>
|
||||
<main id="floor_container" class="grid">
|
||||
<section id="floor_1" class="floor">
|
||||
<span class="grid align-center margin-bottom-1-5r">
|
||||
<h5 class="h5">Floor</h5>
|
||||
<h4 class="h4 weight-700">
|
||||
<header class="floor__header grid align-center">
|
||||
<h5 class="h5 color-0-7">Floor 1</h5>
|
||||
<h3 class="h3 weight-700">
|
||||
Current Projects
|
||||
</h4>
|
||||
</span>
|
||||
</h3>
|
||||
</header>
|
||||
<main id="floor_1__outlets" class="grid outlets-container">
|
||||
<div id="bit_bond_outlet" class="outlet-preview carousel-container">
|
||||
<div class="grid outlet-preview__info">
|
||||
@ -324,12 +324,12 @@
|
||||
</main>
|
||||
</section>
|
||||
<section id="floor_2" class="floor">
|
||||
<span class="grid align-center margin-bottom-1-5r">
|
||||
<h5 class="h5">Floor 2</h5>
|
||||
<h4 class="h4 weight-700">
|
||||
<header class="floor__header grid align-center">
|
||||
<h5 class="h5 color-0-7">Floor 2</h5>
|
||||
<h3 class="h3 weight-700">
|
||||
Blockchain Contracts
|
||||
</h4>
|
||||
</span>
|
||||
</h3>
|
||||
</header>
|
||||
<main id="floor_2__outlets" class="grid outlets-container">
|
||||
<div id="" class="outlet-preview">
|
||||
<div class="grid outlet-preview__info">
|
||||
@ -399,12 +399,12 @@
|
||||
</main>
|
||||
</section>
|
||||
<section id="floor_3" class="floor">
|
||||
<span class="grid align-center margin-bottom-1-5r">
|
||||
<h5 class="h5">Floor 3</h5>
|
||||
<h4 class="h4 weight-700">
|
||||
<header class="floor__header grid align-center">
|
||||
<h5 class="h5 color-0-7">Floor 3</h5>
|
||||
<h3 class="h3 weight-700">
|
||||
Blockchain Apps
|
||||
</h4>
|
||||
</span>
|
||||
</h3>
|
||||
</header>
|
||||
<main id="floor_3__outlets" class="grid outlets-container">
|
||||
<div id="" class="outlet-preview">
|
||||
<div class="grid outlet-preview__info">
|
||||
@ -448,12 +448,12 @@
|
||||
</main>
|
||||
</section>
|
||||
<section id="floor_4" class="floor">
|
||||
<span class="grid align-center margin-bottom-1-5r">
|
||||
<h5 class="h5">Floor 4</h5>
|
||||
<h4 class="h4 weight-700">
|
||||
<header class="floor__header grid align-center">
|
||||
<h5 class="h5 color-0-7">Floor 4</h5>
|
||||
<h3 class="h3 weight-700">
|
||||
Experimental Ideas
|
||||
</h4>
|
||||
</span>
|
||||
</h3>
|
||||
</header>
|
||||
<main id="floor_4__outlets" class="grid outlets-container">
|
||||
<div id="" class="outlet-preview">
|
||||
<div class="grid outlet-preview__info">
|
||||
@ -497,12 +497,12 @@
|
||||
</main>
|
||||
</section>
|
||||
<section id="floor_5" class="floor">
|
||||
<span class="grid align-center margin-bottom-1-5r">
|
||||
<h5 class="h5">Floor 5</h5>
|
||||
<h4 class="h4 weight-700">
|
||||
<header class="floor__header grid align-center">
|
||||
<h5 class="h5 color-0-7">Floor 5</h5>
|
||||
<h3 class="h3 weight-700">
|
||||
Statistics and Administration
|
||||
</h4>
|
||||
</span>
|
||||
</h3>
|
||||
</header>
|
||||
<main id="floor_5__outlets" class="grid outlets-container">
|
||||
<div id="" class="outlet-preview">
|
||||
<div class="grid outlet-preview__info">
|
||||
@ -707,6 +707,7 @@
|
||||
<!-- -->
|
||||
<script src="components.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
|
||||
<script id="standard_UI_functions">
|
||||
|
||||
const domRefs = {}
|
||||
@ -1124,7 +1125,7 @@
|
||||
timerId = setTimeout(function () {
|
||||
func()
|
||||
|
||||
// Once setTimeout function execution is finished, timerId = undefined so that in <br>
|
||||
// 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)
|
||||
@ -1132,6 +1133,7 @@
|
||||
</script>
|
||||
|
||||
<script>
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
const render = {
|
||||
bitBondRow(obj){
|
||||
const {series, currentValue, timeElapsed} = obj
|
||||
@ -1180,8 +1182,8 @@
|
||||
const floorLabel = getRef('floor_indicator_template').content.cloneNode(true).firstElementChild
|
||||
floorLabel.setAttribute('style', `top: ${offsetTop}px`)
|
||||
floorLabel.dataset.target = `floor_${floorNumber}`
|
||||
floorLabel.querySelector('.floor-num').textContent = `Floor ${floorNumber}`
|
||||
floorLabel.querySelector('.floor-name').textContent = floors[floorNumber - 1]
|
||||
// floorLabel.querySelector('.floor-num').textContent = `Floor ${floorNumber}`
|
||||
// floorLabel.querySelector('.floor-name').textContent = floors[floorNumber - 1]
|
||||
return floorLabel
|
||||
}
|
||||
}
|
||||
@ -1680,6 +1682,7 @@
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function renderAllFloorLabels(){
|
||||
const frag = document.createDocumentFragment()
|
||||
document.querySelectorAll('.floor').forEach((floor, index) => {
|
||||
@ -1714,11 +1717,14 @@
|
||||
easing: 'ease'
|
||||
}
|
||||
|
||||
const siteMapTimeline = gsap.timeline({defaults: {ease: 'power3'}, onReverseComplete: resumeScrolling, paused: true})
|
||||
const siteMapTimeline = gsap.timeline({
|
||||
defaults: {ease: 'power3'},
|
||||
onReverseComplete: resumeScrolling,
|
||||
paused: true
|
||||
})
|
||||
siteMapTimeline.from('#elevator_popup', {duration: 0.3, opacity: 0})
|
||||
.from('.close-button', {scale: 0}, '-= 0.2')
|
||||
.from('.floor_list__item', {opacity: 0, y: 16, stagger: 0.1})
|
||||
.from('.outlet-section', {opacity: 0, y: 16, stagger: 0.1}, '-=0.7')
|
||||
.from('.outlet-section', {opacity: 0, y: 16, stagger: 0.1}, '-=0.8')
|
||||
|
||||
function showSiteMap(){
|
||||
document.querySelectorAll('.page').forEach(page => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user