update full

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": true
+}

app/router.scrollBehavior.js

@@ -0,0 +1,4 @@
+export default () => ({
+  x: 0,
+  y: 0
+})

assets/_general.scss

@@ -1,15 +1,53 @@
-.container {
-  width: 100%;
-  margin-top: 48px;
-  height: calc(100vh - 48px - 50px);
-  position: relative;
-  overflow: auto;
-}
-
-.container-without-nav {
-  width: 100%;
-  margin-top: 0;
-  height: calc(100vh - 50px);
-  position: relative;
-  overflow: auto;
+:root {
+  --sat: env(safe-area-inset-top);
+  --sar: env(safe-area-inset-right);
+  --sab: env(safe-area-inset-bottom);
+  --sal: env(safe-area-inset-left);
+}
+
+* {
+  box-sizing: border-box;
+  touch-action: manipulation;
+}
+@supports(padding: max(0px)) {
+  body {
+     padding-left: max(12px, var(--sal));
+     padding-right: max(12px, var(--sar));
+  }
+}
+body {
+  padding: var(--sat) var(--sar) var(--sab) var(--sal);
+  .container, .container-without-nav {
+    width: 100%;
+    position: relative;
+    padding-bottom: var(--sab);
+  }
+
+  .container {
+    overflow: auto;
+    margin-top: $--height-header;
+    height: calc(#{$--full-height} - #{$--height-header} - #{$--height-footer} + var(--sab));
+  }
+
+  // @supports (-webkit-touch-callout: none) {
+  //   body {
+  //     /* The hack for Safari */
+  //     height: -webkit-fill-available;
+  //   }
+  // }
+
+  .container-without-nav {
+    margin-top: 0;
+    height: calc(#{$--full-height} - #{$--height-header} - #{$--height-footer} + var(--sab));
+    .van-nav-bar.van-nav-bar--fixed {
+      top: var(--sat);
+    }
+    .content {
+      margin-top: $--height-header;
+    }
+  }
+
+  .spacer {
+    clear: both;
+  }
 }

assets/_mixins.scss

@@ -0,0 +1,66 @@
+// MEDIA QUERY MANAGER
+/*
+0 - 768px:      Phone
+768 - 992px:    Tablet portrait
+992 - 1200px:   Tablet landscape
+[1200 - 1800] is where our normal styles apply
+1800px + :      Big desktop
+$breakpoint arguement choices:
+- phone
+- tab-port
+- tab-land
+- big-desktop
+ORDER: Base + typography > general layout + grid > page layout > components
+1em = 16px
+
+---- THIS IS NOT MOBILE FIRST
+*/
+@mixin respond($breakpoint) {
+  @if $breakpoint == phone {
+      @media only screen and (max-width: $--width-mobile) { @content };    //768px
+  }
+  @if $breakpoint == tab-port {
+      @media only screen and (max-width: $--width-tablet-portrait) { @content };     //992px
+  }
+  @if $breakpoint == tab-land {
+      @media only screen and (max-width: $--width-tablet-landscape) { @content };    //1200px
+  }
+  @if $breakpoint == big-desktop {
+      @media only screen and (min-width: $--width-big-desktop) { @content };    //1800
+  }
+}
+
+
+// Recolor svg
+@mixin recolor($color: white, $opacity: 1) {
+  $r: red($color) / 255;
+  $g: green($color) / 255;
+  $b: blue($color) / 255;
+  $a: $opacity;
+
+  // grayscale fallback if SVG from data url is not supported
+  $lightness: lightness($color);
+  // filter: saturate(0%) brightness(0%) invert($lightness) opacity($opacity);
+  filter: saturate(100%) brightness(100%) invert($lightness) opacity($opacity);
+
+  // color filter
+  // $svg-filter-id: "recolor";
+  // filter: url('data:image/svg+xml;utf8,\
+  //   <svg xmlns="http://www.w3.org/2000/svg">\
+  //     <filter id="#{$svg-filter-id}" color-interpolation-filters="sRGB">\
+  //       <feColorMatrix type="matrix" values="\
+  //         0 0 0 0 #{$r}\
+  //         0 0 0 0 #{$g}\
+  //         0 0 0 0 #{$b}\
+  //         0 0 0 #{$a} 0\
+  //       "/>\
+  //     </filter>\
+  //   </svg>\
+  //   ##{$svg-filter-id}');
+}
+
+// height
+
+@mixin hight($h: 100) {
+  height: calc(var(--vh, 1vh) * $h);
+}

assets/_style.scss

@@ -1,8 +1,10 @@
 @import "general";
 @import "utilities";
+@import "mixins";
+@import "./element/vant";
 
 .van-nav-bar__content {
-  height: 48px;
+  height: $--height-header;
 }
 
 .van-address-list {

assets/_variables.scss

@@ -1,6 +1,9 @@
 $--color-white: #ffffff;
 $--color-black: #000000;
 $--color-primary: #409eff;
+$--color-pattens-blue: #DCE6FF;
+$--color-hawkes-blue: #D7ECFB;
 $--height-header: 48px;
 $--height-footer: 50px;
+$--full-height: calc(var(--vh, 1vh) * 100);
 // $--color-info: ;

assets/components/_m-app-header.scss

@@ -1,22 +1,43 @@
 ::v-deep.m-app-header {
   .vs-navbar-content {
     position: fixed;
-    z-index: 2000;  
+    z-index: 2000;
+    padding-top: var(--sat);
+    height: $--height-header;
+    background: $--color-pattens-blue;
+    background: linear-gradient(79deg, #{$--color-pattens-blue} 0%, #{$--color-hawkes-blue} 100%);
     .vs-navbar {
+      background-color: $--color-white;
     }
   }
-  .vs-sidebar {
-    overflow-x: auto;
-    .vs-sidebar__item {
-      height: 48px;
-      &.hasIcon.active {
-        padding-left: 0;
+  .vs-sidebar-content {
+    margin-top: var(--sat);
+    padding: 0 0 var(--sab) 0;
+    height: calc(100% - var(--sat));
+    .vs-sidebar {
+      overflow-x: auto;
+      .vs-sidebar__item {
+        height: $--height-header;
+        &.hasIcon.active {
+          padding-left: 0;
+        }
       }
     }
   }
-  .van-search {
-    .van-icon-search {
-      font-size: 22px;
+  .van-popup.search {
+    height: calc(100vh - var(--sat));
+    height: calc(#{$--full-height} - var(--sat));
+    .van-search {
+      .van-icon-search {
+        font-size: 22px;
+      }
     }
   }
 }
+
+@supports(padding: max(0px)) {
+  .vs-sidebar-content {
+    padding-left: max(12px, env(--sal));
+    padding-right: max(12px, env(--sar));
+  }
+}

assets/element/_vant.scss

@@ -0,0 +1,4 @@
+// NOTIFY
+.van-notify {
+  top: var(--sat);
+}

components/mobile/MAppFooter.vue

@@ -1,5 +1,9 @@
 <template lang="pug">
-  tabbar.footer(v-model="active")
+  tabbar.footer(
+    route
+    safe-area-inset-bottom
+    v-model="active"
+  )
     tabbar-item(name="index" icon="home-o" :to="{ name: 'index' }")
     tabbar-item(name="categories" icon="apps-o")
     tabbar-item(name="cart" :to="{ name: 'cart' }" icon="shopping-cart-o" :badge="10")

components/mobile/MAppHeader.vue

@@ -133,10 +133,9 @@
           )
             icon(:name="'cross'")
             //- icon(:name="reduce ? 'arrow' : 'arrow-left'")
-    popup(
+    popup.search(
       v-model="popupSearch"
       position="bottom"
-      :style="{ height: '100%' }"
     )
       search(
         v-model="value"
@@ -145,6 +144,7 @@
         input-align="center"
         shape="round"
         placeholder="Placeholder"
+        safe-area-inset-bottom
         @cancel="popupSearch = false"
       )
 </template>

components/mobile/MobileLayout.vue

@@ -23,5 +23,6 @@ export default {
 .mobileLayout {
   background-color: aliceblue;
   overflow: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 </style>

components/mobile/order/OrderType.vue

@@ -19,7 +19,10 @@ export default {
   components: {
   },
   props: {
-    orderTypeDataArray: Array
+    orderTypeDataArray: {
+      type: Array,
+      default: () => ([])
+    }
   },
   data () {
     return {

layouts/default.vue

@@ -3,13 +3,17 @@
     div
       transition(:name="slide")
         Nuxt
+    .spacer
 </template>
 
 <script>
 export default {
+  auth: false,
+
   data: () => ({
     slide: 'slide-left'
   }),
+
   watch: {
     $route (to, from) {
       const toDepth = to.path.split('/').length

main.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-console */
+const http = require('http')
+const path = require('path')
+const { Nuxt, Builder } = require('nuxt')
+const { app, BrowserWindow } = require('electron')
+const config = require('./nuxt.config.js')
+
+config.rootDir = __dirname
+
+const nuxt = new Nuxt(config)
+const builder = new Builder(nuxt)
+const server = http.createServer(nuxt.render)
+
+console.log('config port', config.server)
+
+let _NUXT_URL_ = `file://${__dirname}/dist/index.html`
+if (config.dev) {
+  builder.build().catch((err) => {
+    console.error(err)
+    process.exit(1)
+  })
+  server.listen(process.env.PORT || 3000)
+  _NUXT_URL_ = `http://localhost:${server.address().port}`
+  console.log(`Nuxt working on ${_NUXT_URL_}`)
+}
+
+let win = null
+const createWindow = () => {
+  win = new BrowserWindow({
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      worldSafeExecuteJavaScript: true,
+      webSecurity: true,
+      sandbox: true,
+      preload: path.resolve(path.join(__dirname, 'preload.js')),
+    },
+  })
+
+  win.on('closed', () => (win = null))
+  if (config.dev) {
+    const pollServer = () => {
+      http
+        .get(_NUXT_URL_, async (res) => {
+          if (res.statusCode !== 200) {
+            console.log(
+              `Failed to connect to ${_NUXT_URL_} (response ${res.statusCode})`
+            )
+            setTimeout(pollServer, 1000)
+            return
+          }
+
+          await win.loadURL(_NUXT_URL_)
+          const {
+            default: installExtension,
+            VUEJS_DEVTOOLS,
+          } = require('electron-devtools-installer')
+
+          installExtension(VUEJS_DEVTOOLS.id)
+            .then(() => win.webContents.openDevTools())
+            .catch((err) => console.log('An error occurred: ', err))
+        })
+        .on('error', () => setTimeout(pollServer, 1000))
+    }
+    pollServer()
+  } else {
+    win.loadURL(_NUXT_URL_)
+  }
+}
+app.on('ready', createWindow)
+app.on('window-all-closed', () => app.quit())
+app.on('activate', () => win === null && createWindow())