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

v0.15.27

Browse Source 
UI tweaks
This commit is contained in:
sairaj mote 2021-04-14 16:46:54 +05:30
parent d514ad2f09
commit 680488c4b7
4 changed files with 121 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
css/main.css
View File

@ -378,7 +378,7 @@ ul {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 15;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
@ -549,8 +549,8 @@ ul {
#floor_line_map { #floor_line_map {
position: sticky; position: sticky;
top: 1rem; top: 1rem;
height: 60vh; height: 40vh;
z-index: 5; z-index: 10;
grid-template-columns: 2rem 1fr; grid-template-columns: 2rem 1fr;
grid-column: 1/2; grid-column: 1/2;
} }
@ -583,31 +583,30 @@ ul {
display: flex; display: flex;
align-items: center; align-items: center;
left: 0.75rem; left: 0.75rem;
margin-top: -1.4rem; margin-top: -0.4rem;
padding-bottom: 1rem; padding-bottom: 1rem;
user-select: none; user-select: none;
transition: transform 0.3s; transition: transform 0.3s;
} /* .floor-title{
.floor-label .floor-title { opacity: 0;
opacity: 0; transform: translateX(-1rem);
transform: translateX(-1rem); transition: opacity 0.3s, transform 0.3s;
transition: opacity 0.3s, transform 0.3s; }
} &--active{
.floor-label--active { opacity: 1;
opacity: 1; .floor-title{
} opacity: 1;
.floor-label--active .floor-title { box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
opacity: 1; transform: none;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); }
transform: none; } */
} }
.floor-circle { .floor-circle {
position: absolute;
height: 0.5rem; height: 0.5rem;
width: 0.5rem; width: 0.5rem;
background: rgba(var(--text-color), 1);
border-radius: 1rem; border-radius: 1rem;
background: rgba(var(--text-color), 1);
} }
.floor-title { .floor-title {
@ -630,13 +629,22 @@ ul {
width: 100%; 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 { .big-icon {
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
} }
.outlets-container { .outlets-container {
margin: 3rem 0; margin: 1.5rem 0;
gap: 1.5rem; gap: 1.5rem;
} }
@ -984,6 +992,23 @@ table {
grid-template-columns: 1fr 80vw 1fr; 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 { .outlets-container {
gap: 5rem; gap: 5rem;
} }

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

45
css/main.scss
View File

@ -315,7 +315,7 @@ ul{
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 10; z-index: 15;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
@ -477,8 +477,8 @@ ul{
#floor_line_map{ #floor_line_map{
position: sticky; position: sticky;
top: 1rem; top: 1rem;
height: 60vh; height: 40vh;
z-index: 5; z-index: 10;
grid-template-columns: 2rem 1fr; grid-template-columns: 2rem 1fr;
grid-column: 1/2; grid-column: 1/2;
} }
@ -508,11 +508,11 @@ ul{
display: flex; display: flex;
align-items: center; align-items: center;
left: 0.75rem; left: 0.75rem;
margin-top: -1.4rem; margin-top: -0.4rem;
padding-bottom: 1rem; padding-bottom: 1rem;
user-select: none; user-select: none;
transition: transform 0.3s; transition: transform 0.3s;
.floor-title{ /* .floor-title{
opacity: 0; opacity: 0;
transform: translateX(-1rem); transform: translateX(-1rem);
transition: opacity 0.3s, transform 0.3s; transition: opacity 0.3s, transform 0.3s;
@ -524,14 +524,14 @@ ul{
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
transform: none; transform: none;
} }
} } */
} }
.floor-circle{ .floor-circle{
position: absolute; // position: absolute;
height: 0.5rem; height: 0.5rem;
width: 0.5rem; width: 0.5rem;
background: rgba(var(--text-color), 1);
border-radius: 1rem; border-radius: 1rem;
background: rgba(var(--text-color), 1);
} }
.floor-title{ .floor-title{
opacity: 0.5; opacity: 0.5;
@ -553,13 +553,22 @@ ul{
width: 100%; 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{ .big-icon{
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
} }
.outlets-container{ .outlets-container{
margin: 3rem 0; margin: 1.5rem 0;
gap: 1.5rem; gap: 1.5rem;
} }
@ -878,6 +887,24 @@ table{
#home_page{ #home_page{
grid-template-columns: 1fr 80vw 1fr; 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{ .outlets-container{
gap: 5rem; gap: 5rem;
} }

72
index.html
View File

@ -107,10 +107,10 @@
<template id="floor_indicator_template"> <template id="floor_indicator_template">
<div class="floor-label interact"> <div class="floor-label interact">
<span class="floor-circle"></span> <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-num weight-400 color-0-7 h5"></h5>
<h5 class="floor-name weight-400"></h5> <h5 class="floor-name weight-400"></h5>
</span> </span> -->
</div> </div>
</template> </template>
@ -266,12 +266,12 @@
</aside> </aside>
<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="grid align-center margin-bottom-1-5r"> <header class="floor__header grid align-center">
<h5 class="h5">Floor</h5> <h5 class="h5 color-0-7">Floor 1</h5>
<h4 class="h4 weight-700"> <h3 class="h3 weight-700">
Current Projects Current Projects
</h4> </h3>
</span> </header>
<main id="floor_1__outlets" class="grid outlets-container"> <main id="floor_1__outlets" class="grid outlets-container">
<div id="bit_bond_outlet" class="outlet-preview carousel-container"> <div id="bit_bond_outlet" class="outlet-preview carousel-container">
<div class="grid outlet-preview__info"> <div class="grid outlet-preview__info">
@ -324,12 +324,12 @@
</main> </main>
</section> </section>
<section id="floor_2" class="floor"> <section id="floor_2" class="floor">
<span class="grid align-center margin-bottom-1-5r"> <header class="floor__header grid align-center">
<h5 class="h5">Floor 2</h5> <h5 class="h5 color-0-7">Floor 2</h5>
<h4 class="h4 weight-700"> <h3 class="h3 weight-700">
Blockchain Contracts Blockchain Contracts
</h4> </h3>
</span> </header>
<main id="floor_2__outlets" class="grid outlets-container"> <main id="floor_2__outlets" class="grid outlets-container">
<div id="" class="outlet-preview"> <div id="" class="outlet-preview">
<div class="grid outlet-preview__info"> <div class="grid outlet-preview__info">
@ -399,12 +399,12 @@
</main> </main>
</section> </section>
<section id="floor_3" class="floor"> <section id="floor_3" class="floor">
<span class="grid align-center margin-bottom-1-5r"> <header class="floor__header grid align-center">
<h5 class="h5">Floor 3</h5> <h5 class="h5 color-0-7">Floor 3</h5>
<h4 class="h4 weight-700"> <h3 class="h3 weight-700">
Blockchain Apps Blockchain Apps
</h4> </h3>
</span> </header>
<main id="floor_3__outlets" class="grid outlets-container"> <main id="floor_3__outlets" class="grid outlets-container">
<div id="" class="outlet-preview"> <div id="" class="outlet-preview">
<div class="grid outlet-preview__info"> <div class="grid outlet-preview__info">
@ -448,12 +448,12 @@
</main> </main>
</section> </section>
<section id="floor_4" class="floor"> <section id="floor_4" class="floor">
<span class="grid align-center margin-bottom-1-5r"> <header class="floor__header grid align-center">
<h5 class="h5">Floor 4</h5> <h5 class="h5 color-0-7">Floor 4</h5>
<h4 class="h4 weight-700"> <h3 class="h3 weight-700">
Experimental Ideas Experimental Ideas
</h4> </h3>
</span> </header>
<main id="floor_4__outlets" class="grid outlets-container"> <main id="floor_4__outlets" class="grid outlets-container">
<div id="" class="outlet-preview"> <div id="" class="outlet-preview">
<div class="grid outlet-preview__info"> <div class="grid outlet-preview__info">
@ -497,12 +497,12 @@
</main> </main>
</section> </section>
<section id="floor_5" class="floor"> <section id="floor_5" class="floor">
<span class="grid align-center margin-bottom-1-5r"> <header class="floor__header grid align-center">
<h5 class="h5">Floor 5</h5> <h5 class="h5 color-0-7">Floor 5</h5>
<h4 class="h4 weight-700"> <h3 class="h3 weight-700">
Statistics and Administration Statistics and Administration
</h4> </h3>
</span> </header>
<main id="floor_5__outlets" class="grid outlets-container"> <main id="floor_5__outlets" class="grid outlets-container">
<div id="" class="outlet-preview"> <div id="" class="outlet-preview">
<div class="grid outlet-preview__info"> <div class="grid outlet-preview__info">
@ -707,6 +707,7 @@
<!-- --> <!-- -->
<script src="components.js"></script> <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/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"> <script id="standard_UI_functions">
const domRefs = {} const domRefs = {}
@ -1124,7 +1125,7 @@
timerId = setTimeout(function () { timerId = setTimeout(function () {
func() 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 // the next scroll event function execution can be scheduled by the setTimeout
timerId = undefined; timerId = undefined;
}, delay) }, delay)
@ -1132,6 +1133,7 @@
</script> </script>
<script> <script>
gsap.registerPlugin(ScrollTrigger);
const render = { const render = {
bitBondRow(obj){ bitBondRow(obj){
const {series, currentValue, timeElapsed} = obj const {series, currentValue, timeElapsed} = obj
@ -1180,8 +1182,8 @@
const floorLabel = getRef('floor_indicator_template').content.cloneNode(true).firstElementChild const floorLabel = getRef('floor_indicator_template').content.cloneNode(true).firstElementChild
floorLabel.setAttribute('style', `top: ${offsetTop}px`) floorLabel.setAttribute('style', `top: ${offsetTop}px`)
floorLabel.dataset.target = `floor_${floorNumber}` floorLabel.dataset.target = `floor_${floorNumber}`
floorLabel.querySelector('.floor-num').textContent = `Floor ${floorNumber}` // floorLabel.querySelector('.floor-num').textContent = `Floor ${floorNumber}`
floorLabel.querySelector('.floor-name').textContent = floors[floorNumber - 1] // floorLabel.querySelector('.floor-name').textContent = floors[floorNumber - 1]
return floorLabel return floorLabel
} }
} }
@ -1680,6 +1682,7 @@
}) })
} }
function renderAllFloorLabels(){ function renderAllFloorLabels(){
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
document.querySelectorAll('.floor').forEach((floor, index) => { document.querySelectorAll('.floor').forEach((floor, index) => {
@ -1714,11 +1717,14 @@
easing: 'ease' 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}) 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('.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(){ function showSiteMap(){
document.querySelectorAll('.page').forEach(page => { document.querySelectorAll('.page').forEach(page => {