feat: hamlet icon and transition in the new banner

payw-org · Feb 17, 2020 · e0bacab · e0bacab
1 parent 586f002
commit e0bacab
Show file tree

Hide file tree

Showing 2 changed files with 180 additions and 70 deletions.
diff --git a/docs/Changelog.md b/docs/Changelog.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## v2.1.0 Beta 22
+
+### Chore
+
+- Add hamlet icons and transition to the New Banner
+
+---
+
 ## v2.1.0 Beta 21
 
 ### Chore

diff --git a/src/components/global/NewBanner.vue b/src/components/global/NewBanner.vue
@@ -1,11 +1,15 @@
 <template>
   <div id="eodiro-banner" :class="{ 'nav-mode': isNavMode }">
     <HomeBgTile v-if="!isNavMode && isHome" />
-    <!-- <div class="hamlet-icon" :class="hamletName" /> -->
     <transition v-if="!isNavMode" name="global-soft-fade">
-      <h1 class="header" :class="hamletName">
-        {{ header }}
-      </h1>
+      <div class="header-container" :class="{ animate: isLoaded }">
+        <h1 class="header" :class="hamletName">
+          {{ header }}
+        </h1>
+        <div class="hamlet-icon-wrapper">
+          <div class="hamlet-icon" :class="hamletName" />
+        </div>
+      </div>
     </transition>
     <transition name="global-soft-fade">
       <nav v-if="isNavMode" class="nav">
@@ -29,12 +33,15 @@ export default {
       hamletName: 'home',
       isHome: true,
       header: 'eodiro',
+      isLoaded: false,
     }
   },
   watch: {
     '$route.meta.hamletName'(value) {
+      this.isLoaded = false
       this.setHamletName(value)
       this.convertHamletToTitle(value)
+      this.animate()
     },
   },
   created() {
@@ -43,6 +50,7 @@ export default {
     this.convertHamletToTitle(this.hamletName)
   },
   mounted() {
+    this.animate()
     const sentinel = this.$el.querySelector('.sentinel')
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
@@ -107,10 +115,16 @@ export default {
       } else {
         this.isHome = true
       }
+
       setTimeout(() => {
         this.hamletName = hamletName
       }, 200)
     },
+    animate() {
+      setTimeout(() => {
+        this.isLoaded = true
+      }, 1000)
+    },
   },
 }
 </script>
@@ -145,88 +159,176 @@ export default {
   top: calc(-45vh + #{$nav-height});
   overflow-x: hidden;
 
-  .header {
-    font-size: h(12);
-    @include text-color;
-    letter-spacing: -0.03em;
-    transition: color 300ms ease;
-    padding: 0 s(5);
-    text-align: center;
-    line-height: lh(1);
+  .header-container {
+    position: relative;
 
-    &.pepero-square {
-      color: #ff3e78;
-      @include dark-mode {
-        color: #ff79b9;
+    &.animate {
+      .header {
+        // transform: translateY(-1rem);
+        transform: scale(0.93);
+        opacity: 0;
+        transition: color 300ms ease, transform 200ms ease, opacity 300ms ease;
       }
-    }
-    &.me,
-    &.sign-in,
-    &.sign-up,
-    &.forgot {
-      color: #5f14be;
-      @include dark-mode {
-        color: #7b5aff;
+
+      .hamlet-icon {
+        // transform: translateY(0rem) !important;
+        transform: scale(1) !important;
+        opacity: 1 !important;
+        transition: transform 300ms ease, opacity 300ms ease;
+        transition-delay: 150ms;
       }
     }
-    &.lectures {
-      color: #02ba41;
-      @include dark-mode {
-        color: #6ccf2f;
+
+    .header {
+      // transform: translateY(0%);
+      transform: scale(1);
+      opacity: 1;
+      font-size: h(12);
+      @include text-color;
+      letter-spacing: -0.03em;
+      padding: 0 s(5);
+      text-align: center;
+      line-height: lh(1);
+
+      &.pepero-square {
+        color: #ff3e78;
+        @include dark-mode {
+          color: #ff79b9;
+        }
       }
-    }
-    &.opensource {
-      color: #b221f6;
-      @include dark-mode {
-        color: #e751ff;
+      &.me,
+      &.sign-in,
+      &.sign-up,
+      &.forgot {
+        color: #5f14be;
+        @include dark-mode {
+          color: #7b5aff;
+        }
       }
-    }
-    &.inquiry {
-      color: #ff9922;
-      @include dark-mode {
-        color: #ffcf26;
+      &.lectures {
+        color: #02ba41;
+        @include dark-mode {
+          color: #6ccf2f;
+        }
       }
-    }
-    &.cafeteria {
-      color: #305dff;
-      @include dark-mode {
-        color: #31a8ff;
+      &.opensource {
+        color: #b221f6;
+        @include dark-mode {
+          color: #e751ff;
+        }
       }
-    }
-    &.preferences {
-      color: #636363;
-      @include dark-mode {
-        color: #939393;
+      &.inquiry {
+        color: #ff9922;
+        @include dark-mode {
+          color: #ffcf26;
+        }
       }
-    }
-    &.privacy {
-      color: #04ab65;
-      @include dark-mode {
-        color: #33d9a7;
+      &.cafeteria {
+        color: #305dff;
+        @include dark-mode {
+          color: #31a8ff;
+        }
+      }
+      &.preferences {
+        color: #636363;
+        @include dark-mode {
+          color: #939393;
+        }
+      }
+      &.privacy {
+        color: #04ab65;
+        @include dark-mode {
+          color: #33d9a7;
+        }
       }
     }
-  }
 
-  .hamlet-icon {
-    $icon-size: 5rem;
-    width: $icon-size;
-    height: $icon-size;
+    .hamlet-icon-wrapper {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateY(-50%) translateX(-50%);
 
-    &.home {
-      @include bgImg('~assets/images/icons/eodiro-arrow.svg');
+      .hamlet-icon {
+        $icon-size: 5rem;
+        width: $icon-size;
+        height: $icon-size;
+        // transform: translateY(1rem);
+        transform: scale(0.9);
+        opacity: 0;
 
-      @include dark-mode {
-        @include bgImg('~assets/images/icons/eodiro-arrow-white.svg');
-      }
-    }
+        &.home {
+          @include bgImg('~assets/images/icons/eodiro-arrow.svg');
 
-    &.sign-in,
-    &.sign-up,
-    &.forgot {
-      @include bgImg('~assets/images/key.svg');
+          @include dark-mode {
+            @include bgImg('~assets/images/icons/eodiro-arrow-white.svg');
+          }
+        }
+        &.sign-in,
+        &.sign-up,
+        &.forgot {
+          @include bgImg('~assets/images/key.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/key-white.svg');
+          }
+        }
+        &.me {
+          @include bgImg('~assets/images/man.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/man-white.svg');
+          }
+        }
+        &.preferences {
+          @include bgImg('~assets/images/gear_black.svg');
 
-      @include dark-mode {
-        @include bgImg('~assets/images/key-white.svg');
+          @include dark-mode {
+            @include bgImg('~assets/images/gear_white.svg');
+          }
+        }
+        &.inquiry {
+          @include bgImg('~assets/images/inquiry_black.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/inquiry_white.svg');
+          }
+        }
+        &.opensource {
+          @include bgImg('~assets/images/heart_black.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/heart_white.svg');
+          }
+        }
+        &.lectures {
+          @include bgImg('~assets/images/magnifier-black.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/magnifier-white.svg');
+          }
+        }
+        &.pepero-square {
+          @include bgImg('~assets/images/community.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/community-white.svg');
+          }
+        }
+        &.cafeteria {
+          @include bgImg('~assets/images/fork_knife_black.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/fork_knife_white.svg');
+          }
+        }
+        &.privacy {
+          @include bgImg('~assets/images/shield.svg');
+
+          @include dark-mode {
+            @include bgImg('~assets/images/shield-white.svg');
+          }
+        }
       }
     }
   }