UI update

-- Added functionality for new room layout
2021-05-30 16:50:45 +05:30 · 2021-05-30 16:50:45 +05:30 · 1abf994229
commit 1abf994229
parent 32bc0b94d9
6 changed files with 154 additions and 78 deletions
--- a/bitcoinbonds.html
+++ b/bitcoinbonds.html
@ -100,49 +100,6 @@
        </section>
        <div class="rooms__header">
            <h4 class="room__label">Rooms</h4>
-            <scroll-tab-header data-target="bit_bond_page_group" class="hide-completely">
-                <button class="room-button">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
-                        height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-                        <g>
-                            <rect fill="none" height="24" width="24" />
-                        </g>
-                        <g>
-                            <g>
-                                <path
-                                    d="M21,8c-1.45,0-2.26,1.44-1.93,2.51l-3.55,3.56c-0.3-0.09-0.74-0.09-1.04,0l-2.55-2.55C12.27,10.45,11.46,9,10,9 c-1.45,0-2.27,1.44-1.93,2.52l-4.56,4.55C2.44,15.74,1,16.55,1,18c0,1.1,0.9,2,2,2c1.45,0,2.26-1.44,1.93-2.51l4.55-4.56 c0.3,0.09,0.74,0.09,1.04,0l2.55,2.55C12.73,16.55,13.54,18,15,18c1.45,0,2.27-1.44,1.93-2.52l3.56-3.55 C21.56,12.26,23,11.45,23,10C23,8.9,22.1,8,21,8z" />
-                                <polygon points="15,9 15.94,6.93 18,6 15.94,5.07 15,3 14.08,5.07 12,6 14.08,6.93" />
-                                <polygon points="3.5,11 4,9 6,8.5 4,8 3.5,6 3,8 1,8.5 3,9" />
-                            </g>
-                        </g>
-                    </svg>
-                    <span class="button__label">
-                        Performance
-                    </span>
-                </button>
-                <button class="room-button">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                        width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-                    </svg>
-                    <span class="button__label">
-                        Product
-                    </span>
-                </button>
-                <button class="room-button">
-                    <svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-                        width="24px" fill="#000000">
-                        <path d="M0 0h24v24H0V0z" fill="none" />
-                        <path
-                            d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" />
-                    </svg>
-                    <span class="button__label">
-                        Purchase
-                    </span>
-                </button>
-            </scroll-tab-header>
        </div>
        <section class="rooms-layout">
            <div id="expanding_tile" class="hide-completely"></div>
@ -162,13 +119,17 @@
                </div>
            </div>
        </section>
-        <scroll-tab-panels id="bit_bond_page_group" class="hide-completely">
-            <section class="grid">
-                <h3 class="h3 margin-bottom-1-5r">Performance</h3>
+        <section class="room-container hide-completely page-layout">
+            <header class="room-container__header">
+                <button class="grid flow-column gap-1 align-center" onclick="hideRoom()">
+                    <svg class="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="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
+                    <h3 class="room-title"></h3>
+                </button>
+            </header>
+            <section class="grid room">
                <div id="bit_bond_series__container" class="grid series-container"></div>
            </section>
-            <section class="grid">
-                <h3 class="h3 margin-bottom-1-5r">Product</h3>
+            <section class="grid room">
                <h4 class="h4 margin-bottom-1r">Description of different bonds</h4>
                <ol type="1" class="margin-bottom-3r">
                    <li>
@ -272,8 +233,7 @@
                    </li>
                </ol>
            </section>
-            <section class="grid">
-                <h3 class="h3 margin-bottom-1-5r">Purchase</h3>
+            <section class="grid room">
                <p>
                    The purchase of this product is open only during specified time when we are confident we can
                    give guarantees. It was last open from February 2017 to June 2017.Currently we are doing blockchain
@ -282,7 +242,7 @@
                    directly on that FLO ID. Please drop your name and phone number along with FLO ID.
                </p>
            </section>
-        </scroll-tab-panels>
+        </section>
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
    <script src="js/components.js"></script>
@ -298,12 +258,25 @@
        }
        renderAllSeries()

+        let tile, tileParent, tileDimensions, tileParentDimensions
+        const animeInOptions = {
+            duration: 300,
+            fill: 'forwards',
+            easing: 'ease'
+        }
+        const animeOutOption = {
+            duration: 300,
+            fill: 'forwards',
+            easing: 'ease'
+        }
+
        document.addEventListener('click', e => {
            if(e.target.closest('.room-tile')){
-                const tile = e.target.closest('.room-tile')
-                const tileParent = tile.parentNode
-                const tileDimensions = tile.getBoundingClientRect()
-                const tileParentDimensions = tileParent.getBoundingClientRect()
+                pauseScrolling()
+                tile = e.target.closest('.room-tile')
+                tileParent = tile.parentNode
+                tileDimensions = tile.getBoundingClientRect()
+                tileParentDimensions = tileParent.getBoundingClientRect()
                getRef('expanding_tile').classList.remove('hide-completely')
                getRef('expanding_tile').animate([
                    {
@ -317,19 +290,46 @@
                        transform: `translate(${- tileParentDimensions.left}px, ${- tileParentDimensions.top - window.pageYOffset}px)`
                    },
                ],
-                {
-                    duration: 300,
-                    fill: 'forwards',
-                    easing: 'ease'
-                })
+                animeInOptions)
                .onfinish = () => {
-                    setTimeout(() => {
+                    const index = [...tileParent.querySelectorAll('.room-tile')].findIndex(elem => elem === tile)
+                    const roomContainer = document.querySelector('.room-container')
+                    roomContainer.querySelectorAll('.room').forEach(child => child.classList.add('hide-completely'))
+                    roomContainer.children[index + 1].classList.remove('hide-completely')
+                    document.querySelector('.room-title').textContent = tile.querySelector('.room-tile__title').textContent
+                    roomContainer.classList.remove('hide-completely')
+                    roomContainer.animate(slideInDown, animeInOptions)
+                    .onfinish = () => {
                        getRef('expanding_tile').classList.add('hide-completely')
-        
-                    }, 500);
+                    }
                }
            }
        })
+
+        function hideRoom(){
+            const roomContainer = document.querySelector('.room-container')
+            roomContainer.animate(fadeOut, animeOutOption)
+            .onfinish = () => {
+                roomContainer.classList.add('hide-completely')
+            }
+            getRef('expanding_tile').classList.remove('hide-completely')
+            getRef('expanding_tile').animate([
+                {
+                    height: `${window.innerHeight}px`,
+                    width: `${document.querySelector('main').getBoundingClientRect().width}px`,
+                    transform: `translate(${- tileParentDimensions.left}px, ${- tileParentDimensions.top - window.pageYOffset}px)`
+                },
+                {
+                    height: `${tileDimensions.height}px`,
+                    width: `${tileDimensions.width}px`,
+                    transform: `translate(${tileDimensions.left - tileParentDimensions.left}px, ${tileDimensions.top - tileParentDimensions.top - window.pageYOffset}px)`
+                },
+            ], animeOutOption)
+            .onfinish = () => {
+                getRef('expanding_tile').classList.add('hide-completely')
+                resumeScrolling()
+            }
+        }
    </script>
 </body>
 </html>
--- a/css/main.css
+++ b/css/main.css
@ -606,12 +606,14 @@ ol[type="1"] {
  transform: scale(0) rotate(-90deg);
 }

-.page {
+.page,
+.page-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1rem 1fr 1rem;
 }
-.page > * {
+.page > *,
+.page-layout > * {
  grid-column: 2/3;
 }

@ -1196,6 +1198,7 @@ scroll-tab-panels > [active] {
  border-radius: 0.5rem;
  transition: transform 0.3s;
  background-color: rgba(var(--foreground-color), 1);
+  box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.1);
 }
 .room-tile--main {
  padding-top: 100%;
@ -1209,7 +1212,7 @@ scroll-tab-panels > [active] {
  padding: 1rem;
 }
 .room-tile:active {
-  transform: scale(0.9);
+  transform: scale(0.95);
 }

 #expanding_tile {
@ -1219,6 +1222,30 @@ scroll-tab-panels > [active] {
  z-index: 5;
 }

+.room-container {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 6;
+  overflow-y: auto;
+  background-color: var(--background-color);
+  align-content: flex-start;
+}
+
+.room {
+  padding-bottom: 4rem;
+}
+
+.room-container__header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: inherit;
+  padding: 1rem 0;
+}
+
@media only screen and (max-width: 640px) {
  .hide-on-mobile {
    display: none;
@ -1274,7 +1301,8 @@ scroll-tab-panels > [active] {
  }
 }
@media only screen and (min-width: 640px) {
-  #home_page, .page {
+  #home_page, .page,
+.page-layout {
    grid-template-columns: 1fr 90vw 1fr;
  }

@ -1417,9 +1445,14 @@ scroll-tab-panels > [active] {
  .rooms-layout {
    grid-template-rows: 1fr 1fr;
  }
+
+  .room-container__header {
+    padding: 1.5rem 0;
+  }
 }
@media only screen and (min-width: 1280px) {
-  #home_page, .page {
+  #home_page, .page,
+.page-layout {
    grid-template-columns: 1fr 85vw 1fr;
  }

@ -1433,6 +1466,11 @@ scroll-tab-panels > [active] {
  .masonry-layout {
    columns: 4;
  }
+
+  .rooms-layout {
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: column;
+  }
 }
@media (any-hover: hover) {
  ::-webkit-scrollbar {
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/css/main.scss
@ -526,7 +526,8 @@ ol[type="1"]{
    }
 }

-.page{
+.page,
+.page-layout{
    position: relative;
    display: grid;
    grid-template-columns: 1rem 1fr 1rem;
@ -1092,6 +1093,7 @@ scroll-tab-panels{
    border-radius: 0.5rem;
    transition: transform 0.3s;
    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0 1rem 3rem -1rem rgba(0, 0, 0, 0.1);
    &--main{
        padding-top: 100%;
        grid-row: span 2;
@ -1104,7 +1106,7 @@ scroll-tab-panels{
        padding: 1rem;
    }
    &:active{
-        transform: scale(0.9);
+        transform: scale(0.95);
    }
 }
 #expanding_tile{
@ -1114,6 +1116,29 @@ scroll-tab-panels{
    z-index: 5;
 }

+.room-container{
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 6;
+    overflow-y: auto;
+    background-color: var(--background-color);
+    align-content: flex-start;
+}
+.room{
+    padding-bottom: 4rem;
+}
+
+.room-container__header{
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: inherit;
+    padding: 1rem 0;
+}
+
@media only screen and (max-width: 640px) {
    .hide-on-mobile{
        display: none;
@ -1162,7 +1187,8 @@ scroll-tab-panels{
    }
 }
@media only screen and (min-width: 640px) {
-    #home_page,.page{
+    #home_page,.page,
+    .page-layout{
        grid-template-columns: 1fr 90vw 1fr;
    }
    .h1{
@ -1295,9 +1321,13 @@ scroll-tab-panels{
    .rooms-layout{
        grid-template-rows: 1fr 1fr;
    }
+    .room-container__header{
+        padding: 1.5rem 0;
+    }
 }
@media only screen and (min-width: 1280px) {
-    #home_page, .page{
+    #home_page, .page,
+    .page-layout{
        grid-template-columns: 1fr 85vw 1fr;
    }
    .grid-3{
@ -1309,6 +1339,10 @@ scroll-tab-panels{
    .masonry-layout{
        columns: 4;
    }
+    .rooms-layout{
+        grid-template-columns: repeat(3, 1fr);
+        grid-auto-flow: column;
+    }
 }
@media (any-hover: hover){
    ::-webkit-scrollbar{
--- a/index.html
+++ b/index.html
@ -323,7 +323,7 @@
            }
            composed += `
                        <a href="${url}" class="button outlet-preview__button">
-                            <span class="button__label">Learn more</span>
+                            <span class="button__label">Explore</span>
                        </a>
                    </div>
                </div>
--- a/js/index.js
+++ b/js/index.js
@ -277,7 +277,7 @@ const siteMap = [
      }
    ],
  },
-/*   {
+  {
    floor: 'Blockchain Apps',
    brief: ``,
    outlets: [
@ -337,7 +337,7 @@ const siteMap = [
        url: "operationalstatistic",
      }
    ],
-  }, */
+  },
 ];

 const bitBondSerieses = [
@ -825,8 +825,7 @@ function showSiteMap() {
    page.setAttribute("aria-hidden", "true");
  });
  isSiteMapOpen = true;
-  document.body.style.overflow = "hidden";
-  document.body.style.top = `-${window.scrollY}px`;
+  pauseScrolling()
  getRef("elevator_popup").classList.remove("hide-completely");
  siteMapTimeline.duration(0.9).play();
 }
@ -840,6 +839,11 @@ function hideSiteMap() {
  });
 }

+function pauseScrolling() {
+  document.body.style.overflow = "hidden";
+  document.body.style.top = `-${window.scrollY}px`;
+}
+
 function resumeScrolling() {
  document.body.style.overflow = "auto";
  document.body.style.top = "initial";