fix: cr fixes

vuestorefront · Dec 11, 2020 · 014c92a · 014c92a
1 parent d58acc7
commit 014c92a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 33 deletions.
diff --git a/packages/core/nuxt-theme-module/theme/components/InstagramFeed.vue b/packages/core/nuxt-theme-module/theme/components/InstagramFeed.vue
@@ -3,28 +3,29 @@
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <SfImage class="smartphone-only" src="/homepage/imageAm.webp" :width="160" :height="160">katherina_trn</SfImage>
-          <SfImage class="desktop-only" src="/homepage/imageAd.webp" :width="470" :height="470">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" src="/homepage/imageAm.webp" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else src="/homepage/imageAd.webp" :width="470" :height="470">katherina_trn</SfImage>
         </div>
         <div class="grid__col small">
-          <SfImage class="smartphone-only" src="/homepage/imageBm.webp" :width="160" :height="160">katherina_trn</SfImage>
-          <SfImage class="desktop-only" src="/homepage/imageCd.webp" :width="470" :height="160">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" src="/homepage/imageBm.webp" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else src="/homepage/imageCd.webp" :width="470" :height="160">katherina_trn</SfImage>
         </div>
       </div>
       <div class="grid__row">
         <div class="grid__col small">
-          <SfImage class="smartphone-only" src="/homepage/imageCm.webp" :width="160" :height="160">katherina_trn</SfImage>
-           <SfImage class="desktop-only" src="/homepage/imageBd.webp" :width="470" :height="160">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" src="/homepage/imageCm.webp" :width="160" :height="160">katherina_trn</SfImage>
+           <SfImage v-else src="/homepage/imageBd.webp" :width="470" :height="160">katherina_trn</SfImage>
         </div>
         <div class="grid__col">
-          <SfImage class="smartphone-only" src="/homepage/imageDm.webp" :width="160" :height="160">katherina_trn</SfImage>
-          <SfImage class="desktop-only" src="/homepage/imageDd.webp" :width="470" :height="470">katherina_trn</SfImage>
+          <SfImage v-if="isMobile" src="/homepage/imageDm.webp" :width="160" :height="160">katherina_trn</SfImage>
+          <SfImage v-else src="/homepage/imageDd.webp" :width="470" :height="470">katherina_trn</SfImage>
         </div>
       </div>
     </div>
   </SfSection>
 </template>
 <script>
+import { ref, onMounted, onBeforeUnmount} from '@vue/composition-api';
 import {
   SfSection,
   SfImage
@@ -34,6 +35,30 @@ export default {
   components: {
     SfSection,
     SfImage
+  },
+  setup() {
+    const isMobile = ref(false);
+
+    const mobileHandler = (event) => {
+      isMobile.value = event.matches;
+    };
+
+    onMounted(() => {
+      isMobile.value =
+      Math.max(document.documentElement.clientWidth, window.innerWidth) <=
+      1023;
+      window.matchMedia('(max-width: 1023px)').addListener(mobileHandler);
+    });
+
+    onBeforeUnmount(() => {
+      window
+        .matchMedia('(max-width: 1023px)')
+        .removeListener(mobileHandler);
+    });
+
+    return {
+      isMobile
+    };
   }
 };
 </script>

diff --git a/packages/core/nuxt-theme-module/theme/pages/Home.vue b/packages/core/nuxt-theme-module/theme/pages/Home.vue
@@ -29,14 +29,14 @@
     </SfBannerGrid>
     <div class="similar-products">
       <SfHeading title="Match with it" :level="3"/>
-      <SfLink :link="localePath('/c/women')" class="smartphone-only">See all</SfLink>
+      <nuxt-link :to="localePath('/c/women')" class="smartphone-only">See all</nuxt-link>
     </div>
     <SfCarousel class="carousel" :settings="{ peek: 16, breakpoints: { 1023: { peek: 0, perView: 2 } } }">
       <template #prev="{go}">
         <SfArrow
-          aria-label="next"
+          aria-label="prev"
           class="sf-arrow--left sf-arrow--long"
-          @click="go('next')"
+          @click="go('prev')"
         />
       </template>
       <template #next="{go}">
@@ -83,7 +83,6 @@ import {
   SfProductCard,
   SfImage,
   SfBannerGrid,
-  SfLink,
   SfHeading,
   SfArrow,
   SfButton
@@ -103,7 +102,6 @@ export default {
     SfProductCard,
     SfImage,
     SfBannerGrid,
-    SfLink,
     SfHeading,
     SfArrow,
     SfButton,
@@ -270,17 +268,16 @@ export default {
   @include for-desktop {
     margin: var(--spacer-xl) auto var(--spacer-2xl);
   }
-}
-
-.sf-hero-item {
-  &:nth-child(even) {
-    --hero-item-background-position: left;
-    @include for-mobile {
-      --hero-item-background-position: 30%;
-      --hero-item-wrapper-text-align: right;
-      --hero-item-subtitle-width: 100%;
-      --hero-item-title-width: 100%;
-      --hero-item-wrapper-padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-sm) var(--spacer-2xl);
+  .sf-hero-item {
+    &:nth-child(even) {
+      --hero-item-background-position: left;
+      @include for-mobile {
+        --hero-item-background-position: 30%;
+        --hero-item-wrapper-text-align: right;
+        --hero-item-subtitle-width: 100%;
+        --hero-item-title-width: 100%;
+        --hero-item-wrapper-padding: var(--spacer-sm) var(--spacer-sm) var(--spacer-sm) var(--spacer-2xl);
+      }
     }
   }
 }

diff --git a/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/nuxt-theme-module/theme/pages/MyAccount/OrderHistory.vue
@@ -32,7 +32,11 @@
             <SfTableHeader>Price</SfTableHeader>
           </SfTableHeading>
           <SfTableRow v-for="(item, i) in orderGetters.getItems(currentOrder)" :key="i">
-            <SfTableData class="products__name"><SfLink :link="'/p/'+orderGetters.getItemSku(item)+'/'+orderGetters.getItemSku(item)">{{orderGetters.getItemName(item)}}</SfLink></SfTableData>
+            <SfTableData class="products__name">
+              <nuxt-link :to="'/p/'+orderGetters.getItemSku(item)+'/'+orderGetters.getItemSku(item)">
+                {{orderGetters.getItemName(item)}}
+              </nuxt-link>
+            </SfTableData>
             <SfTableData>{{orderGetters.getItemQty(item)}}</SfTableData>
             <SfTableData>{{formatPrice(orderGetters.getItemPrice(item))}}</SfTableData>
           </SfTableRow>
@@ -82,7 +86,7 @@
     <SfTab data-cy="order-history-tab_returns" title="Returns">
       <p class="message">
         This feature is not implemented yet! Please take a look at<br />
-        <SfLink class="message__link" href="#">https://github.com/DivanteLtd/vue-storefront/issues</SfLink>
+        <nuxt-link class="message__link" to="#">https://github.com/DivanteLtd/vue-storefront/issues</nuxt-link>
          for our Roadmap!
       </p>
     </SfTab>
@@ -94,8 +98,7 @@ import {
   SfTabs,
   SfTable,
   SfButton,
-  SfProperty,
-  SfLink
+  SfProperty
 } from '@storefront-ui/vue';
 import { computed, ref } from '@vue/composition-api';
 import { useUserOrders, orderGetters } from '<%= options.generate.replace.composables %>';
@@ -109,8 +112,7 @@ export default {
     SfTabs,
     SfTable,
     SfButton,
-    SfProperty,
-    SfLink
+    SfProperty
   },
   setup() {
     const { orders, searchOrders } = useUserOrders();
@@ -205,9 +207,9 @@ export default {
   font: var(--font-weight--light) var(--font-size--base) / 1.6 var(--font-family--primary);
   &__link {
     color: var(--c-primary);
-    --link-weight: var(--font-weight--medium);
-    --link-font-family: var(--font-family--primary);
-    --link-font-size: var(--font-size--base);
+    font-weight: var(--font-weight--medium);
+    font-family: var(--font-family--primary);
+    font-size: var(--font-size--base);
     text-decoration: none;
     &:hover {
       color: var(--c-text);