diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a65b5e2 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "nuxt.isNuxtApp": true +} \ No newline at end of file diff --git a/app/router.scrollBehavior.js b/app/router.scrollBehavior.js new file mode 100644 index 0000000..7e26aae --- /dev/null +++ b/app/router.scrollBehavior.js @@ -0,0 +1,4 @@ +export default () => ({ + x: 0, + y: 0 +}) diff --git a/assets/_general.scss b/assets/_general.scss index 362984b..31e82cf 100644 --- a/assets/_general.scss +++ b/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; + } } diff --git a/assets/_mixins.scss b/assets/_mixins.scss new file mode 100644 index 0000000..30a030c --- /dev/null +++ b/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-filter-id}'); +} + +// height + +@mixin hight($h: 100) { + height: calc(var(--vh, 1vh) * $h); +} diff --git a/assets/_style.scss b/assets/_style.scss index acc9917..156c5b7 100644 --- a/assets/_style.scss +++ b/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 { diff --git a/assets/_variables.scss b/assets/_variables.scss index d7d4320..8afa5b2 100644 --- a/assets/_variables.scss +++ b/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: ; diff --git a/assets/components/_m-app-header.scss b/assets/components/_m-app-header.scss index 39def4a..b468817 100644 --- a/assets/components/_m-app-header.scss +++ b/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)); + } +} diff --git a/assets/element/_vant.scss b/assets/element/_vant.scss new file mode 100644 index 0000000..a1c3caf --- /dev/null +++ b/assets/element/_vant.scss @@ -0,0 +1,4 @@ +// NOTIFY +.van-notify { + top: var(--sat); +} diff --git a/components/mobile/MAppFooter.vue b/components/mobile/MAppFooter.vue index 66e7bca..fd7f853 100644 --- a/components/mobile/MAppFooter.vue +++ b/components/mobile/MAppFooter.vue @@ -1,5 +1,9 @@ diff --git a/components/mobile/MobileLayout.vue b/components/mobile/MobileLayout.vue index 261ec6f..85d1b32 100644 --- a/components/mobile/MobileLayout.vue +++ b/components/mobile/MobileLayout.vue @@ -23,5 +23,6 @@ export default { .mobileLayout { background-color: aliceblue; overflow: hidden; + -webkit-overflow-scrolling: touch; } diff --git a/components/mobile/order/OrderType.vue b/components/mobile/order/OrderType.vue index 8469ba1..7d8aa45 100644 --- a/components/mobile/order/OrderType.vue +++ b/components/mobile/order/OrderType.vue @@ -19,7 +19,10 @@ export default { components: { }, props: { - orderTypeDataArray: Array + orderTypeDataArray: { + type: Array, + default: () => ([]) + } }, data () { return { diff --git a/layouts/default.vue b/layouts/default.vue index 0abbe0c..03ff38d 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -3,13 +3,17 @@ div transition(:name="slide") Nuxt + .spacer diff --git a/pages/account/my-order.vue b/pages/account/my-order.vue index 13c7ae9..0bf8436 100644 --- a/pages/account/my-order.vue +++ b/pages/account/my-order.vue @@ -1,5 +1,5 @@