v0.20.39

UI changes -- New elevator layout
2021-04-22 22:23:52 +05:30 · 2021-04-22 22:23:52 +05:30 · 0f013b41e8
commit 0f013b41e8
parent 8d814a6f54
9 changed files with 245 additions and 41 deletions
--- a/assets/RM
+++ b/assets/RM
--- a/bitcoinbonds.html
+++ b/bitcoinbonds.html
@ -72,7 +72,7 @@
                    <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>
-                Outlet
+                <span class="outlet-label__name">Outlet</span>
                <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="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z" />
--- a/bob'sfund.html
+++ b/bob'sfund.html
@ -68,7 +68,7 @@
        <section class="outlet-hero-section margin-bottom-3r">
            <button class="outlet-label">
                <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="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>
-                Outlet
+                <span class="outlet-label__name">Outlet</span>
                <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="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
            </button>
            <h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund</h2>
--- a/css/main.css
+++ b/css/main.css
@ -11,7 +11,7 @@
 }

 body {
-  --accent-color: #e72c45;
+  --accent-color: #E72C37;
  --light-shade: rgba(var(--text-color), 0.06);
  --text-color: 17, 17, 17;
  --text-color-light: 100, 100, 100;
@ -141,6 +141,10 @@ ul {
  list-style: none;
 }

+.accent-color {
+  color: var(--accent-color);
+}
+
 .flex {
  display: flex;
 }
@ -439,15 +443,26 @@ ul {
  padding-bottom: 0.5rem;
  background: rgba(var(--foreground-color), 1);
  z-index: 1;
+  text-transform: capitalize;
 }

 .outlet-list {
  gap: 2rem;
-  padding: 0 0 1rem 2rem;
-  border-left: 0.15rem solid var(--accent-color);
  counter-reset: outlet-counter;
 }

+.floor-list__outlet {
+  display: flex;
+  align-items: center;
+}
+.floor-list__outlet::before {
+  content: "";
+  width: 0.4rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  background-color: var(--accent-color);
+}
+
 .outlet-list__item {
  display: grid;
  user-select: none;
@ -457,6 +472,10 @@ ul {
 .outlet-list__item .outlet-title::before {
  content: counter(outlet-counter) ". ";
 }
+.outlet-list__item .icon {
+  fill: var(--accent-color);
+  flex-shrink: 0;
+}

 .outlet-title {
  font-size: 1.2rem;
@ -681,6 +700,22 @@ ul {
  background: var(--background-color);
 }

+.floor__num {
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--accent-color);
+  margin-bottom: 0.5rem;
+}
+.floor__num::before {
+  content: "";
+  width: 0.2rem;
+  height: 1.2rem;
+  background: var(--accent-color);
+  margin-right: 0.5rem;
+}
+
 .big-icon {
  height: 2rem;
  width: 2rem;
@ -705,13 +740,13 @@ ul {
  aspect-ratio: 1/1;
  font-size: 1.3rem;
  font-weight: 900;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1.5rem;
  border-radius: 0.2rem;
  place-content: center;
  justify-self: flex-start;
-  background: rgba(var(--text-color), 1);
-  color: rgba(var(--foreground-color), 1);
-  box-shadow: 0.2rem 0.2rem 0 var(--accent-color);
+  background: var(--accent-color);
+  color: white;
+  box-shadow: 0.2rem 0.2rem 0 rgba(var(--text-color), 1);
 }

 .outlet-preview__info {
@ -1070,6 +1105,10 @@ scroll-tab-panels > [active] {
  .series-container {
    gap: 1rem;
  }
+
+  .outlet-list__item .icon {
+    margin-left: auto;
+  }
 }
@media only screen and (min-width: 640px) {
  .page {
@ -1097,7 +1136,39 @@ scroll-tab-panels > [active] {
  }

  #floor_list {
-    padding: 0 3rem 4rem 4.6rem;
+    gap: 8vw;
+    padding: 0 8vw 4rem 8vw;
+  }
+
+  .floor_list__item {
+    position: relative;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-content: center;
+  }
+  .floor_list__item .floor_list__header {
+    display: grid;
+  }
+  .floor_list__item:not(:last-of-type) {
+    padding-bottom: 8vw;
+  }
+  .floor_list__item:not(:last-of-type)::after {
+    content: "";
+    position: absolute;
+    width: 24rem;
+    height: 0.2rem;
+    bottom: 0;
+    background-color: var(--accent-color);
+    justify-self: center;
+  }
+  .floor_list__item:nth-of-type(odd) .floor_list__header {
+    text-align: right;
+    grid-column: 2/3;
+    grid-row: 1/2;
+  }
+  .floor_list__item:nth-of-type(odd) .outlet-list {
+    grid-row: 1/2;
+    grid-column: 1/2;
  }

  #home_page {
@ -1223,4 +1294,16 @@ scroll-tab-panels > [active] {
  .floor__button:hover {
    background: var(--background-color);
  }
+
+  .outlet-list__item .icon {
+    fill: var(--accent-color);
+    opacity: 0;
+    transform-origin: left;
+    transform: translateX(-0.5rem);
+    transition: opacity 0.3s, transform 0.3s;
+  }
+  .outlet-list__item:hover .icon {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/css/main.scss
@ -9,7 +9,7 @@
    font-size: clamp(1rem, 1.2vmax, 3rem);
 }
 body {
-    --accent-color: #e72c45;
+    --accent-color: #E72C37;
    --light-shade: rgba(var(--text-color), 0.06);
    --text-color: 17, 17, 17;
    --text-color-light: 100, 100, 100;
@ -125,6 +125,9 @@ sm-tab-header{
 ul{
    list-style: none;
 }
+.accent-color{
+    color: var(--accent-color);
+}
 .flex{
    display: flex;
 }
@ -370,14 +373,24 @@ ul{
    padding-bottom: 0.5rem;
    background: rgba(var(--foreground-color), 1);
    z-index: 1;
+    text-transform: capitalize;
 }

 .outlet-list{
    gap: 2rem;
-    padding: 0 0 1rem 2rem;
-    border-left: 0.15rem solid var(--accent-color);
    counter-reset: outlet-counter;
 }
+.floor-list__outlet{
+    display: flex;
+    align-items: center;
+    &::before{
+        content: '';
+        width: 0.4rem;
+        height: 1.5rem;
+        margin-right: 0.5rem;
+        background-color: var(--accent-color);
+    }
+}
 .outlet-list__item{
    display: grid;
    user-select: none;
@ -386,6 +399,10 @@ ul{
    .outlet-title::before{
        content: counter(outlet-counter)". ";
    }
+    .icon{
+        fill: var(--accent-color);
+        flex-shrink: 0;
+    }
 }
 .outlet-title{
    font-size: 1.2rem;
@ -602,6 +619,22 @@ ul{
    }
 }

+.floor__num{
+    display: flex;
+    align-items: center;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--accent-color);
+    margin-bottom: 0.5rem;
+    &::before{
+        content: '';
+        width: 0.2rem;
+        height: 1.2rem;
+        background: var(--accent-color);
+        margin-right: 0.5rem;
+    }
+}
+
 .big-icon{
    height: 2rem;
    width: 2rem;
@ -625,13 +658,13 @@ ul{
    aspect-ratio: 1/1;
    font-size: 1.3rem;
    font-weight: 900;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
    border-radius: 0.2rem;
    place-content: center;
    justify-self: flex-start;
-    background: rgba(var(--text-color), 1);
-    color: rgba(var(--foreground-color), 1);
-    box-shadow: 0.2rem 0.2rem 0 var(--accent-color);
+    background: var(--accent-color);
+    color: white;
+    box-shadow: 0.2rem 0.2rem 0 rgba(var(--text-color), 1);
 }
 .outlet-preview__info{
    position: relative;
@ -971,6 +1004,11 @@ scroll-tab-panels{
    .series-container{
        gap: 1rem;
    }
+    .outlet-list__item{
+        .icon{
+            margin-left: auto;
+        }
+    }
 }
@media only screen and (min-width: 640px) {
    .page{
@ -992,7 +1030,41 @@ scroll-tab-panels{
        padding: 1.2rem 2rem;
    }
    #floor_list{
-        padding: 0 3rem 4rem 4.6rem;
+        gap: 8vw;
+        padding: 0 8vw 4rem 8vw;
+    }
+    .floor_list__item{
+        position: relative;
+        grid-template-columns: 1fr 1fr;
+        align-items: center;
+        justify-content: center;
+        .floor_list__header{
+            display: grid;
+            // justify-content: center;
+        }
+        &:not(:last-of-type){
+            padding-bottom: 8vw;
+            &::after{
+                content: '';
+                position: absolute;
+                width: 24rem;
+                height: 0.2rem;
+                bottom: 0;
+                background-color: var(--accent-color);
+                justify-self: center;
+            }
+        }
+        &:nth-of-type(odd){
+            .floor_list__header{
+                text-align: right;
+                grid-column: 2/3;
+                grid-row: 1/2;
+            }
+            .outlet-list{
+                grid-row: 1/2;
+                grid-column: 1/2;
+            }
+        }
    }
    #home_page{
        grid-template-columns: 1fr 80vw 1fr;
@ -1106,4 +1178,17 @@ scroll-tab-panels{
    .floor__button:hover{
        background: var(--background-color);
    }
+    .outlet-list__item{
+        .icon{
+            fill: var(--accent-color);
+            opacity: 0;
+            transform-origin: left;
+            transform: translateX(-0.5rem);
+            transition: opacity 0.3s, transform 0.3s;
+        }
+        &:hover .icon{
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
 }
--- a/ico.html
+++ b/ico.html
@ -96,7 +96,7 @@
        <section class="outlet-hero-section grid margin-bottom-3r">
            <button class="outlet-label">
                <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="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>
-                Outlet
+                <span class="outlet-label__name">Outlet</span>
                <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="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
            </button>
            <h2 class="h2 weight-700 margin-bottom-1r">ICO</h2>
--- a/index.html
+++ b/index.html
@ -84,14 +84,15 @@
        <main id="floor_container" class="grid">
            <section id="floor_1" class="floor">
                <header class="floor__header grid align-center">
-                    <h5 class="h5 color-0-7">Floor 1</h5>
-                    <h3 class="h3 weight-700">
+                    <h4 class="floor__num">Floor 1</h5>
+                    <h4 class="h4 weight-700">
                        Current Projects
                    </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">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">1</div>
                            <h3 class="outlet__title">bitcoin bonds</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -108,6 +109,7 @@
                    </div>
                    <div id="bob_fund_outlet" class="outlet-preview carousel-container">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">2</div>
                            <h3 class="outlet__title">Bob's Fund</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -124,6 +126,7 @@
                    </div>
                    <div id="ico_outlet" class="outlet-preview carousel-container">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">3</div>
                            <h3 class="outlet__title">ICO</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -142,14 +145,15 @@
            </section>
            <section id="floor_2" class="floor">
                <header class="floor__header grid align-center">
-                    <h5 class="h5 color-0-7">Floor 2</h5>
-                    <h3 class="h3 weight-700">
+                    <h4 class="floor__num">Floor 2</h5>
+                    <h4 class="h4 weight-700">
                        Blockchain Contracts
                    </h3>
                </header>
                <main id="floor_2__outlets" class="grid outlets-container">
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">1</div>
                            <h3 class="outlet__title">Internship Blockchain Contract</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -163,6 +167,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">2</div>
                            <h3 class="outlet__title">FLO Blockchain Contract</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -176,6 +181,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">3</div>
                            <h3 class="outlet__title">Startup Blockchain Contract</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -189,6 +195,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">4</div>
                            <h3 class="outlet__title">Real Estate Blockchain Contract</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -202,6 +209,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">5</div>
                            <h3 class="outlet__title">Painting Blockchain Contract</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -217,14 +225,15 @@
            </section>
            <section id="floor_3" class="floor">
                <header class="floor__header grid align-center">
-                    <h5 class="h5 color-0-7">Floor 3</h5>
-                    <h3 class="h3 weight-700">
+                    <h4 class="floor__num">Floor 3</h5>
+                    <h4 class="h4 weight-700">
                        Blockchain Apps
                    </h3>
                </header>
                <main id="floor_3__outlets" class="grid outlets-container">
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">1</div>
                            <h3 class="outlet__title">Web Wallet</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -238,6 +247,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">2</div>
                            <h3 class="outlet__title">FLO Messenger</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -251,6 +261,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">3</div>
                            <h3 class="outlet__title">Content Collaboration</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -264,6 +275,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">4</div>
                            <h3 class="outlet__title">RanchiMall Times</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -279,14 +291,15 @@
            </section>
            <section id="floor_4" class="floor">
                <header class="floor__header grid align-center">
-                    <h5 class="h5 color-0-7">Floor 4</h5>
-                    <h3 class="h3 weight-700">
+                    <h4 class="floor__num">Floor 4</h5>
+                    <h4 class="h4 weight-700">
                        Experimental Ideas
                    </h3>
                </header>
                <main id="floor_4__outlets" class="grid outlets-container">
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">1</div>
                            <h3 class="outlet__title">Blockchain Cloud</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -300,6 +313,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">2</div>
                            <h3 class="outlet__title">UPI on Blockchain</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -313,6 +327,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">3</div>
                            <h3 class="outlet__title">E-Commerce on Blockchain</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -328,14 +343,15 @@
            </section>
            <section id="floor_5" class="floor">
                <header class="floor__header grid align-center">
-                    <h5 class="h5 color-0-7">Floor 5</h5>
-                    <h3 class="h3 weight-700">
+                    <h4 class="floor__num">Floor 5</h5>
+                    <h4 class="h4 weight-700">
                        Statistics and Administration
                    </h3>
                </header>
                <main id="floor_5__outlets" class="grid outlets-container">
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">1</div>
                            <h3 class="outlet__title">Incorporation</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -349,6 +365,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">2</div>
                            <h3 class="outlet__title">Team</h3>
                            <p class="outlet__description margin-bottom-1-5r">
@ -362,6 +379,7 @@
                    </div>
                    <div id="" class="outlet-preview">
                        <div class="grid outlet-preview__info">
+                            <h5 class="h5 margin-bottom-0-5r">Outlet no.</h5>
                            <div class="outlet-number">3</div>
                            <h3 class="outlet__title">Operational Statistics</h3>
                            <p class="outlet__description margin-bottom-1-5r">
--- a/js/index.js
+++ b/js/index.js
@ -440,8 +440,8 @@ const floorListitemTemplate = document.createElement('template')
 floorListitemTemplate.innerHTML = `
 <li class="floor_list__item">
  <button class="floor_list__header floor__button">
-      <h5 class="h5 floor-num">Floor</h5>
-      <h4 class="h3"></h4>
+      <h2 class="h2 floor-num">Floor</h2>
+      <h3 class="h3 accent-color"></h3>
  </button>
  <ul class="outlet-list grid"></ul>
 </li>
@ -450,9 +450,12 @@ floorListitemTemplate.innerHTML = `
 const outletListitemTemplate = document.createElement('template')
 outletListitemTemplate.innerHTML = `
  <li class="outlet-list__item interact">
-    <a>
-      <h4 class="outlet-title"></h4>
-      <p class="outlet-brief"></p>
+    <a class="grid align-center flow-column gap-1 justify-start">
+      <div>
+        <h4 class="outlet-title"></h4>
+        <p class="outlet-brief"></p>
+      </div>
+      <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="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"/></svg>
    </a>
  </li>
 `
@ -508,8 +511,6 @@ const render = {
    ).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]
    return floorLabel;
  },
  outletListItem(outletObj) {
@ -525,12 +526,16 @@ const render = {
    const li = floorListitemTemplate.content.cloneNode(true).firstElementChild
    li.firstElementChild.dataset.target = `floor_${index + 1}`;
    li.querySelector('.h3').textContent = floor
-    li.querySelector('.h5').textContent = `floor ${index + 1}`
+    li.querySelector('.floor-num').textContent = `floor ${index + 1}`
+
+    const h3 = document.createElement('h3')
+    h3.classList.add('h3', 'weight-900', 'floor-list__outlet')
+    h3.textContent = 'Outlets'

    const frag = document.createDocumentFragment()
    outlets.forEach(outlet => frag.append(render.outletListItem(outlet)))

-    li.querySelector('.outlet-list').append(frag)
+    li.querySelector('.outlet-list').append(h3, frag)
    return li
  },
  outletSwitcherButton(outletObj, activeOutlet) {
@ -665,13 +670,11 @@ document.addEventListener('click', e => {
 const outletObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
-      // if(window.innerWidth < 640){
      if (entry.isIntersecting) {
        entry.target.querySelector("sm-carousel").startAutoPlay();
      } else {
        entry.target.querySelector("sm-carousel").stopAutoPlay();
      }
-      // }
    });
  },
  {
@ -761,6 +764,21 @@ function renderFloorOutlets(floorObj, activeOutlet) {
  outlets.forEach(outlet => frag.append(render.outletSwitcherButton(outlet, activeOutlet)))
  getRef('outlet_switcher__outlet_container').append(frag)
  getRef('outlet_switcher__floor_num').textContent = floor
+  let floorNum = -1
+  let outletNum = -1
+  for (let i = 0; i < siteMap.length; i++){
+    if (siteMap[i].floor === floor) {
+      floorNum = i      
+      break
+    }
+  }
+  for (let i = 0; i < outlets.length; i++){
+    if (outlets[i].url === activeOutlet) {
+      outletNum = i      
+      break
+    }
+  }
+  document.querySelector('.outlet-label__name').textContent = floorNum > -1 ? `Floor ${floorNum + 1} outlet ${outletNum + 1}` : ''
 }

 let isSiteMapOpen = false;