Merge branch 'develop' into #555/ux-issue-on-microcart

App.vue

@@ -30,6 +30,7 @@ export default {
 body {
   --overlay-z-index: 1;
   --sidebar-aside-z-index: 2;
+  --sidebar-z-index: 2;
   --bottom-navigation-height: 3.75rem;
   --bar-height: 3.125rem;
   --notification-font-size: var(--font-sm);

CHANGELOG.md

@@ -5,17 +5,29 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [1.0.4] - UNRELEASED
+## [1.0.4] - 04.01.2020
 
 ### Added
 
 ### Changed / Improved
-
-- Fixed Broken tiles of mega menu on mobile (#465)
-
+- Improved spacing around product carousal on home page(#471)
+- Improved navbar layout (#467)
+- Improved heading in search panel (#478)
+- Fixed broken tiles of mega menu on mobile (#465)
+- Improved: Consistency of profile icon (#553)
+- Improved: Z-index for dropdowns(#536)
+- Improved Error page spacings (#537)
+- Improved styling around notification (#540)
+- Added active state for the profile in bottom navigation (#541)
+- Z-index for sidebar (#501)
+- Added safe are in bottom elements (#499)
+- Added safe are in bottom elements (#499)
+- Used spacer variable for footer icons (#484)
+- Improved spacing of elements of product page (#481)
 - Removed: Overridden logo height (#490)
 - Fixed: duplicate image issue in offine mode (#498)
 - Improved: code to add the overflow-wrap property on the SfProperty value (#555)
+- Fixed: Blank prices field on checkout in offline mode (#513)
 
 ## [1.0.3] - 20.09.2020
 
@@ -41,7 +53,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replaced deprecated action product/list call with findProducts (#417)
 - Fix hydration errors with fresh installation (#462)
 - Fixed console warning related to  value of key 'Sort by' is not a string (#476)
-- Added phone number validation in shipping and payment (#4767)
 - Update pwacompat to avoid loading multiple favicons (https://github.com/DivanteLtd/vue-storefront/issues/4559)
 - Fixed changing and deleting shipping details on MyAccount (#4499)
 - Corrected displayed price when choosing configurable product second time (#493)

components/molecules/m-error.vue

@@ -47,32 +47,25 @@ export default {
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .error {
-  margin: auto;
-  padding: 0 1.25rem;
-  &__image,
-  &__message {
-    margin: calc(var(--spacer-xl) * 2) 0;
-    text-align: center;
-    --heading-border: none;
-  }
-  &__image {
-    display: flex;
-    justify-content: center;
-  }
+  display: flex;
+  flex-direction: column;
+  height: 70vh;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+
   &__action {
-    max-width: 24rem;
-    margin: var(--spacer-2xl) auto;
+    margin-top: var(--spacer-2xl);
     @include for-desktop {
       display: flex;
     }
   }
   &__action-button {
     flex: 1;
     &--secondary {
-      margin: var(--spacer-xl) 0;
+      margin-top: var(--spacer-xl);
       @include for-desktop {
-        margin: 0;
-        text-align: right;
+        margin: auto var(--spacer-2xl);
       }
     }
   }

components/molecules/m-price-summary.vue

@@ -7,18 +7,28 @@
       :class="{'sf-property--large': isLarge}"
     />
     <SfProperty
+      v-if="prices.subtotal"
       :name="$t('Subtotal')"
       :value="prices.subtotal | price"
       class="sf-property--full-width property"
       :class="{'sf-property--large': isLarge}"
     />
     <SfProperty
+      v-if="prices.subtotal_incl_tax"
+      :name="$t('Subtotal Incl Tax')"
+      :value="prices.subtotal_incl_tax | price"
+      class="sf-property--full-width property"
+      :class="{'sf-property--large': isLarge}"
+    />
+    <SfProperty
+      v-if="prices.tax || prices.tax === 0"
       :name="$t('Tax')"
       :value="prices.tax | price"
       class="sf-property--full-width property"
       :class="{'sf-property--large': isLarge}"
     />
     <SfProperty
+      v-if="prices.shipping || prices.shipping === 0"
       :name="$t('Shipping')"
       :value="prices.shipping | price"
       class="sf-property--full-width property"

components/molecules/m-product-additional-info.vue

@@ -109,7 +109,7 @@ export default {
     margin: var(--spacer-lg) auto var(--spacer-2xl);
     @include for-desktop {
       margin-top: var(--spacer-2xl);
-      --tabs-content-tab-padding: 3.5rem 0 0 0;
+      --tabs-content-tab-padding: var(--spacer-xl) 0 0 0;
     }
   }
   &__property {

components/molecules/m-product-options-configurable.vue

@@ -133,7 +133,6 @@ export default {
 .product {
   &__select-size {
     flex: 100%;
-    margin: 0 var(--spacer-sm);
     @include for-desktop {
       margin: 0;
     }
@@ -143,13 +142,13 @@ export default {
     flex: 100%;
     order: 1;
     align-items: center;
-    margin: var(--spacer-xl) var(--spacer-sm) 0;
+    margin: var(--spacer-xl) 0 0;
     @include for-desktop {
       margin: var(--spacer-xl) 0 0;
     }
   }
   &__color-label {
-    margin: 0 var(--spacer-lg) 0 0;
+    margin: 0 var(--spacer-base) 0 0;
   }
   &__color {
     margin: 0 var(--spacer-2xs);

components/molecules/m-product-short-info.vue

@@ -84,7 +84,6 @@ export default {
 
 .product {
   &__header {
-    margin: 0 var(--spacer-sm);
     display: flex;
     justify-content: space-between;
     @include for-desktop {
@@ -95,7 +94,7 @@ export default {
     animation: moveicon 1s ease-in-out infinite;
   }
   &__price-and-rating {
-    margin: var(--spacer-xs) var(--spacer-sm) var(--spacer-base);
+    margin: var(--spacer-xs) 0 var(--spacer-base);
     align-items: center;
     @include for-desktop {
       display: flex;

components/molecules/m-review-list.vue

@@ -95,4 +95,7 @@ export default {
     margin: var(--spacer-lg) 0 0;
   }
 }
+.m-review-list {
+  margin-top: var(--spacer-base);
+}
 </style>

components/organisms/o-bottom-navigation.vue

@@ -34,7 +34,7 @@ export default {
         { icon: 'home', label: this.$t('Home'), onClick: this.goToHome },
         { icon: 'menu', label: this.$t('Menu'), onClick: this.goToMenu },
         { icon: 'search', label: this.$t('Search'), onClick: this.goToSearch },
-        { icon: 'profile', label: this.$t('Profile'), onClick: this.goToAccount },
+        { icon: 'account', label: this.$t('Profile'), onClick: this.goToAccount },
         { icon: 'add_to_cart', label: this.$t('Cart'), onClick: this.goToCart, isFloating: true }
       ]
     }
@@ -58,6 +58,10 @@ export default {
           case 'search': {
             return this.isSearchPanelVisible
           }
+          case 'profile': {
+            const isProfile = this.$route.name === this.localizedRoute({ name: 'my-account', path: 'my-account' }).name
+            return isProfile && !this.isMobileMenu
+          }
           default: {
             // we don't need to show active icon for profile and cart, because bottom navigation is below
             return false

components/organisms/o-footer.vue

@@ -167,14 +167,14 @@ export default {
   flex-basis: auto;
 }
 .social-icon {
-  padding: 20px 40px;
+  padding: var(--spacer-sm) var(--spacer-xl);
   @include for-desktop {
-    padding: 6px 0;
+    padding: var(--spacer-xs) 0;
   }
   &__img {
     height: 1.75rem;
     &:not(:last-child) {
-      margin-right: 1.25rem;
+      margin-right: var(--spacer-base);
     }
   }
 }

components/organisms/o-header.vue

@@ -165,7 +165,6 @@ export default {
     }
     @include for-mobile {
       width: 100%;
-      padding: 0 var(--spacer-sm);
       .sf-button {
         margin: 0 0 0 var(--spacer-sm);
       }

components/organisms/o-notification.vue

@@ -62,6 +62,7 @@ export default {
 @import "~@storefront-ui/shared/styles/helpers/breakpoints";
 
 .o-notification {
+  --notification-max-width: 100%;
   position: fixed;
   top: 100px;
   right: 5%;

components/organisms/o-payment.vue

@@ -116,10 +116,6 @@
         class="form__element"
         name="phone"
         :label="$t('Phone Number')"
-        required
-        :valid="!$v.payment.phoneNumber.$error"
-        :error-message="$t('Please provide valid phone number')"
-        @blur="$v.payment.phoneNumber.$touch()"
       />
       <SfCheckbox
         v-model="generateInvoice"
@@ -198,7 +194,7 @@
 </template>
 <script>
 import { required, minLength } from 'vuelidate/lib/validators';
-import { unicodeAlpha, unicodeAlphaNum, phoneNum } from '@vue-storefront/core/helpers/validators';
+import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators';
 import { Payment } from '@vue-storefront/core/modules/checkout/components/Payment';
 import {
   SfInput,
@@ -254,10 +250,6 @@ export default {
       },
       paymentMethod: {
         required
-      },
-      phoneNumber: {
-        required,
-        phoneNum
       }
     };
 

components/organisms/o-product-details.vue

@@ -155,15 +155,15 @@ export default {
   }
   &__info {
     margin: var(--spacer-sm) auto var(--spacer-xs);
+    padding: 0 var(--spacer-sm);
     @include for-desktop {
       max-width: 32.625rem;
       margin: 0 0 0 7.5rem;
+      padding: 0;
     }
   }
   &__add-to-cart {
-    @include for-mobile {
-      margin: var(--spacer-sm) var(--spacer-sm) 0;
-    }
+    margin: var(--spacer-base) 0 0;
     @include for-desktop {
       margin-top: var(--spacer-sm);
     }

components/organisms/o-search-panel.vue

@@ -8,9 +8,7 @@
     </div>
     <div v-else class="container">
       <div class="categories">
-        <h1 class="categories__title">
-          {{ $t("Categories") }}
-        </h1>
+        <SfHeading :level="3" :title="$t('Categories')" class="categories__title sf-heading--left" />
         <SfList v-if="visibleProducts.length && categories.length > 1" class="categories__listing">
           <SfListItem
             v-for="category in categories"
@@ -26,9 +24,7 @@
         </SfList>
       </div>
       <div class="products">
-        <h1 class="products__title">
-          {{ $t("Product suggestions") }}
-        </h1>
+        <SfHeading :level="3" :title="$t('Product suggestions')" class="products__title sf-heading--left" />
         <div class="products__listing">
           <SfProductCard
             v-for="product in visibleProducts"
@@ -67,7 +63,7 @@ import { htmlDecode } from '@vue-storefront/core/filters';
 import { formatProductLink } from '@vue-storefront/core/modules/url/helpers';
 import { prepareCategoryProduct } from 'theme/helpers';
 import VueOfflineMixin from 'vue-offline/mixin';
-import { SfButton, SfList, SfMenuItem, SfProductCard } from '@storefront-ui/vue';
+import { SfHeading, SfButton, SfList, SfMenuItem, SfProductCard } from '@storefront-ui/vue';
 import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
 
 export default {
@@ -76,7 +72,8 @@ export default {
     SfButton,
     SfList,
     SfMenuItem,
-    SfProductCard
+    SfProductCard,
+    SfHeading
   },
   mixins: [VueOfflineMixin],
   data () {
@@ -179,15 +176,15 @@ export default {
 
   .container {
     display: flex;
-    padding-left: 40px;
-    padding-right: 40px;
+    padding: 0 var(--spacer-sm);
     max-width: 1272px;
     margin: auto;
     @include for-desktop {
       border-top: 1px solid var(--c-light);
     }
     @include for-mobile {
       flex-direction: column;
+      padding: 0 var(--spacer-xl);
     }
   }
 
@@ -200,9 +197,8 @@ export default {
 
     &__title {
       padding: 0;
-      font-size: var(--font-lg);
-      font-weight: 500;
-      line-height: 3;
+      margin-top: var(--spacer-base);
+      justify-content: start;
     }
     &__listing {
       @include for-desktop {
@@ -223,15 +219,13 @@ export default {
     width: 100%;
     &__title {
       padding: 0;
-      font-size: var(--font-lg);
-      font-weight: 500;
-      line-height: 3;
+      justify-content: start;
+      margin-top: var(--spacer-base);
     }
     &__listing {
       display: flex;
       flex: 0 1 auto;
       flex-wrap: wrap;
-      margin: -1rem -1rem 0;
     }
     &__product-card {
       --product-card-max-width: 200px;