Feature/gallery image offline

CHANGELOG.md

@@ -11,7 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Unit tests of cart module written in jest - @lukeromanowicz (#2305)
 
 ### Fixed
-- 
+- Gallery low quality image in offline mode when high quality already cached - @patzick (#2557)
 
 ### Changed / Improved
 - The `core/helpers` parsing URL methods exchanged to `query-string` package - @pkarw (#2446)

package.json

@@ -32,7 +32,7 @@
     "all": "cross-env NODE_ENV=development node ./core/scripts/all",
     "cache": "node ./core/scripts/cache",
     "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" ts-node ./core/scripts/entry.ts",
-    "dev:sw": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && ts-node ./core/scripts/entry",
+    "dev:sw": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && yarn dev",
     "dev:inspect": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" node --inspect -r ts-node/register ./core/scripts/entry",
     "build:sw": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.sw.config.ts --mode production --progress --hide-modules",
     "build:client": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.client.config.ts --mode production --progress --hide-modules",

src/themes/default/components/core/ProductGallery.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="media-gallery" :class="{'media-gallery--loaded': carouselLoaded}">
-    <div v-show="OfflineOnly">
-      <img class="offline-image" v-lazy="offline" :src="offline.src" ref="offline" alt="">
-    </div>
-    <div v-show="OnlineOnly" class="relative">
+    <div class="relative">
       <product-gallery-overlay
         v-if="isZoomOpen"
         :current-slide="currentSlide"
@@ -30,7 +27,6 @@ import { ProductGallery } from '@vue-storefront/core/modules/catalog/components/
 import ProductGalleryOverlay from './ProductGalleryOverlay'
 import onEscapePress from '@vue-storefront/core/mixins/onEscapePress'
 import NoSSR from 'vue-no-ssr'
-import VueOfflineMixin from 'vue-offline/mixin'
 const ProductGalleryCarousel = () => import(/* webpackChunkName: "vsf-product-gallery-carousel" */ './ProductGalleryCarousel.vue')
 
 export default {
@@ -41,7 +37,6 @@ export default {
   },
   mixins: [
     ProductGallery,
-    VueOfflineMixin,
     onEscapePress
   ],
   watch: {
@@ -97,7 +92,4 @@ export default {
     background-image: none;
   }
 }
-.offline-image {
-  width: 100%;
-}
 </style>

src/themes/default/pages/Product.vue

@@ -6,7 +6,6 @@
           <div class="col-xs-12 col-md-6 center-xs middle-xs image">
             <product-gallery
               :gallery="gallery"
-              :offline="offlineImage"
               :configuration="configuration"
               :product="product"
             />