clean and some bit update

Author: mimosafa

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+*.log

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server",
-    "build": "webpack --mode=production"
+    "build": "webpack --mode production"
   },
   "keywords": [],
   "author": "",

src/components/global/footer/footer.scss

@@ -1,4 +1,6 @@
 #footer {
+  @include global-container;
+  
   background-size: cover;
   background-image: url("./img/footer_bg.jpg");
   background-repeat: no-repeat;

src/components/global/footer/footer.vue

@@ -30,13 +30,19 @@
     </div>
 
     <div class="footer_credit">
-      <p>Copyright &copy; 2010-2020 WorkStore Tokyo Do.<br>All Rights Reserved.</p>
+      <p>Copyright &copy; 2010-{{ current }} WorkStore Tokyo Do.<br>All Rights Reserved.</p>
     </div>
   </footer>
 </template>
 
 <script>
-
+export default {
+  computed: {
+    current() {
+      return (new Date()).getFullYear();
+    }
+  }
+};
 </script>
 
 <style src="./footer.scss" lang="scss" scoped />

src/components/global/header/header.js

@@ -3,14 +3,16 @@ import media from '../../../js/media';
 const cls = 'active';
 const speed = 350;
 
-let header, toggle, brands, menus, others;
+let toggle, brands, menus, others;
 
 const initCollapse = () => {
-  header = document.getElementById('header');
-  toggle = header.querySelector('.header_gnav_btn a');
-  brands = header.querySelector('.header_gnav_brand');
-  menus  = header.querySelector('.header_gnav_menu');
-  others = header.querySelector('.header_gnav_other');
+  if (!toggle && !brands && !menus && !others) {
+    const header = document.getElementById('header');
+    toggle = header.querySelector('.header_gnav_btn a');
+    brands = header.querySelector('.header_gnav_brand');
+    menus  = header.querySelector('.header_gnav_menu');
+    others = header.querySelector('.header_gnav_other');
+  }
 
   media.init();
 
@@ -27,9 +29,6 @@ const initCollapse = () => {
 };
 
 export default {
-  data() {
-    return { speed };
-  },
   mounted() {
     this.initialize();
 
@@ -55,7 +54,7 @@ export default {
         $(others).slideToggle(speed);
       }
 
-      this.$emit('toggle-header-collapse', this.speed);
+      this.$emit('toggle-header-collapse', speed);
     }
   }
 }

src/components/global/header/header.scss

@@ -1,4 +1,6 @@
 #header {
+  @include global-container;
+
   position: fixed;
   top: 0;
   z-index: 20000;
@@ -78,7 +80,6 @@
         z-index: 20000;
 
         @include phone {
-          // min-width: calc(100vw - 30px); // 要らない気がする
           width: calc(100vw - 30px);
           left: 15px;
         }
@@ -452,6 +453,7 @@
             display: block;
             position: relative;
             opacity: 1;
+            cursor: pointer;
 
             @include phone {
               width: 50px;

src/components/global/pagetop/pagetop.vue

@@ -35,6 +35,7 @@ export default {
   display: none;
   position: fixed;
   z-index: 19999;
+  cursor: pointer;
 
   @include phone {
     right: 10px;

src/css/core/mixin/_layout.scss

@@ -0,0 +1,7 @@
+@mixin global-container {
+  width: 100%;
+
+  @include desktop {
+    min-width: 1080px;
+  }
+}

src/css/core/mixin/_media-query.scss

@@ -0,0 +1,11 @@
+@mixin phone {
+  @media (max-width: 896px) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: 897px) {
+    @content;
+  }
+}

src/css/core/mixin/_mixin.scss

@@ -1,16 +1,5 @@
-// Media queries
-// - Phone
-@mixin phone {
-  @media (max-width: 896px) {
-    @content;
-  }
-}
-// - Desktop
-@mixin desktop {
-  @media (min-width: 897px) {
-    @content;
-  }
-}
+@import "media-query";
+@import "layout";
 
 // Kick out text
 @mixin kick-out-text {

src/index.js

@@ -14,6 +14,6 @@ const router = new VueRouter({
 new Vue({
   el: '#app',
   components: { Web },
-  template: '<Web/>',
+  template: '<web/>',
   router
 });

src/layouts/web-frame.vue

@@ -3,13 +3,15 @@
     <global-header @init-header="initOverlay" @toggle-header-collapse="toggleOverlay" />
 
     <div class="header_overlay"></div>
+
     <div id="loader"></div>
 
     <div id="contents">
       <slot></slot>
     </div>
 
     <global-footer />
+
     <global-page-top />
   </div>
 </template>
@@ -47,21 +49,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#header,
-#contents,
-#footer {
-  width: 100%;
-
-  @include desktop {
-    min-width: 1080px;
-  }
-}
 #contents {
-  @include phone {
-    padding: 48px 15px 55px;
-  }
-  @include desktop {
-    padding: 90px 40px 110px;
+  @include global-container;
+
+  > * {
+    @include phone {
+      padding: 48px 15px 55px;
+    }
+    @include desktop {
+      padding: 90px 40px 110px;
+    }
   }
 }
 

src/web.vue

@@ -1,7 +1,7 @@
 <template>
-  <WebFrame>
+  <web-frame>
     <router-view></router-view>
-  </WebFrame>
+  </web-frame>
 </template>
 
 <script>

webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const dist = path.resolve(__dirname, 'dist');
-const mode = process.env.NODE_ENV;
+const mode = (process.env.NODE_ENV === 'production') ? 'production' : 'development';
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');