Merge pull request #191 from paywteam/dev

Merge tested dev

nuxt.config.js

@@ -92,7 +92,6 @@ export default {
 
   css: [
     '~/assets/styles/css/fonts.css',
-    '~/plugins/eodiro-dialog/style.scss',
     '~/assets/styles/scss/global/globalstyle.scss',
     '~/assets/styles/stylus/spring.styl'
   ],
@@ -102,7 +101,7 @@ export default {
   buildModules: [
     '@nuxtjs/eslint-module',
     '@nuxt/typescript-build',
-    '~/modules/extend-route'
+    '~/modules/nuxt/extend-route'
   ],
 
   // Nuxt.js modules

src/components/global/Banner.vue

@@ -33,7 +33,6 @@
         </div>
 
         <nav class="eodiro-navigation">
-          <div class="dummy" />
           <transition name="icon-change">
             <div class="nav-icon-wrapper">
               <transition
@@ -43,15 +42,14 @@
               >
                 <div
                   v-if="hamletName === $route.meta.hamletName"
-                  class="nav-icon hamlet-icon hamlet--home"
+                  class="nav-icon hamlet-icon"
                   :class="[`hamlet--${hamletName}`]"
                 >
                   <span class="icon" />
                 </div>
               </transition>
             </div>
           </transition>
-          <div class="dummy" />
         </nav>
       </div>
     </div>
@@ -60,7 +58,7 @@
 
 <script>
 import disableScroll from 'disable-scroll'
-import { CEM } from '~/plugins/custom-event-manager'
+import { CEM } from '~/modules/custom-event-manager'
 import HomeBgTile from '~/components/home/HomeBgTile.vue'
 
 export default {
@@ -163,15 +161,14 @@ export default {
 
 $banner-transition-time: 350ms;
 $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
-// $banner-bezier: ease;
 
 #eodiro-banner-wrapper {
   position: absolute;
-  z-index: 6666;
+  z-index: 8888;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
   user-select: none;
   touch-action: none;
   pointer-events: none;
@@ -180,7 +177,7 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
 #eodiro-banner {
   pointer-events: all;
   touch-action: auto;
-  z-index: 6665;
+  z-index: 9999;
   position: sticky;
   top: 0;
   top: calc(#{$nav-height} - #{$banner-height});
@@ -190,7 +187,6 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
   align-items: flex-end;
   justify-content: center;
   transform: translateY(0px);
-  // transition: transform $banner-transition-time $banner-bezier;
   @include bg; // Fill rounded corner with the same background color
 
   &.transitioning {
@@ -199,15 +195,9 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
 
   &.mini {
     transform: translateY(calc(#{$nav-height} - #{$banner-height}));
-    // position: fixed;
     top: 0;
-    // top: -$banner-height;
-    // transform: translateY($nav-height);
-    // transition: transform $banner-transition-time $banner-bezier;
 
     .banner {
-      // height: calc(#{$nav-height} + 1px);
-      // height: $nav-height;
       transition: height $banner-transition-time $banner-bezier;
       transition-delay: 100ms;
 
@@ -219,21 +209,11 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
 
   &.nav-mode {
     .banner {
-      box-shadow: 0 0.2rem 0.5rem rgba(#000, 0);
+      // box-shadow: 0 0.2rem 0.5rem rgba(#000, 0);
     }
 
     .logo-wrapper {
-      opacity: 0;
-      // transform: translateY(calc(#{$banner-height / 2} - #{$nav-height / 2}))
-      //   scale(0.5);
-
-      // @include larger-than($width-step--1) {
-      //   transform: translateY(
-      //       calc(#{$banner-height / 2} - #{space(4) / 2} - #{$nav-height / 2})
-      //     )
-      //     scale(0.5);
-      // }
-      // transform: translateY(-50%);
+      opacity: 0 !important;
     }
 
     .nav-icon-wrapper {
@@ -249,8 +229,8 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
     height: 100%;
     position: relative;
     overflow: hidden;
-    box-shadow: 0 0.2rem 0.5rem rgba(#000, 0.2);
-    transition: height 0ms ease, box-shadow 500ms ease;
+    // box-shadow: 0 0.2rem 0.5rem rgba(#000, 0.2);
+    transition: box-shadow 500ms ease;
     transform: translate3d(0, 0, 0);
 
     @include larger-than($width-step--1) {
@@ -329,6 +309,7 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
     }
 
     .logo-wrapper {
+      opacity: 1;
       position: relative;
       z-index: 10;
       $logo-size: 7rem;
@@ -341,12 +322,13 @@ $banner-bezier: cubic-bezier(0.34, 0.23, 0, 1);
   .eodiro-navigation {
     position: absolute;
     left: 0;
-    right: 0;
     bottom: 0;
+    width: 100%;
     height: $nav-height;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    z-index: 10;
 
     .prev-wrapper {
       display: flex;

src/components/global/GoBack.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { CEM } from '~/plugins/custom-event-manager'
+import { CEM } from '~/modules/custom-event-manager'
 export default {
   data() {
     return {

src/layouts/default.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { CEM } from '../plugins/custom-event-manager'
+import { CEM } from '~/modules/custom-event-manager'
 import Banner from '~/components/global/Banner'
 import GoBack from '~/components/global/GoBack'
 

src/mixins/page-base.js

@@ -1,5 +1,5 @@
 import disableScroll from 'disable-scroll'
-import { CEM } from '~/plugins/custom-event-manager'
+import { CEM } from '~/modules/custom-event-manager'
 
 /**
  * Add this mixin from every page component.

src/modules/extend-route.js → src/modules/nuxt/extend-route.js

@@ -1,4 +1,5 @@
-/* 'extend-route' module for Nuxt.js
+/**
+ * 'extend-route' module for Nuxt.js
  *
  * It automatically assigns page depth, hamlet name
  * and previous page's route for each route.

src/pages/community/_postId/index.vue

@@ -55,7 +55,7 @@ import dayjs from 'dayjs'
 // import axios from 'axios'
 import pageBase from '~/mixins/page-base'
 import NewComment from '~/components/community/NewComment'
-// import { CEM } from '~/plugins/custom-event-manager'
+// import { CEM } from '~/modules/custom-event-manager'
 
 const lorem = new LoremIpsum()
 

src/pages/community/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import { CEM } from '~/plugins/custom-event-manager'
+import { CEM } from '~/modules/custom-event-manager'
 import pageBase from '~/mixins/page-base'
 import PostItem from '~/components/community/PostItem'
 

src/pages/donation.vue

@@ -86,7 +86,7 @@
 
 <script>
 import pageBase from '~/mixins/page-base'
-import Dialog from '~/plugins/eodiro-dialog'
+import Dialog from '~/modules/eodiro-dialog'
 
 export default {
   name: 'donation',

src/pages/index.vue

@@ -130,7 +130,7 @@
 
 <script>
 import pageBase from '~/mixins/page-base'
-import EodiroDialog from '~/plugins/eodiro-dialog'
+import EodiroDialog from '~/modules/eodiro-dialog'
 import { Grid, ArrowBlock } from '~/components/ui'
 
 export default {

src/pages/inquiry.vue

@@ -35,7 +35,7 @@
 import axios from 'axios'
 import pageBase from '~/mixins/page-base'
 import { Button } from '~/components/ui'
-// import Dialog from '~/plugins/eodiro-dialog'
+// import Dialog from '~/modules/eodiro-dialog'
 
 export default {
   name: 'inquiry',

src/pages/vacant/_buildingId/_floorId/index.vue

@@ -151,7 +151,7 @@ import axios from 'axios'
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
 import pageBase from '~/mixins/page-base'
 import modalScroll from '~/mixins/modal-scroll'
-import ExpireCounter from '~/plugins/ExpireCounter'
+import ExpireCounter from '~/modules/expire-counter'
 import { Grid, ArrowBlock } from '~/components/ui'
 
 export default {

src/plugins/init.ts

@@ -57,7 +57,7 @@ export default (context: Context) => {
     })
 
     // Assign topbar to window
-    const topbar = require('./topbar').default
+    const topbar = require('~/modules/topbar').default
     window.topbar = topbar
   }
 }