Merge pull request #855 from kodadot/basic-image

basic image

Author: vikiival

src/components/rmrk/Gallery/CollectionItem.vue

@@ -68,7 +68,7 @@ const components = {
   CollectionActivity: () => import('@/components/rmrk/Gallery/CollectionActivity.vue'),
   Sharing: () => import('@/components/rmrk/Gallery/Item/Sharing.vue'),
   ProfileLink: () => import('@/components/rmrk/Profile/ProfileLink.vue'),
-  VueMarkdown: () => import('vue-markdown-render')
+  VueMarkdown: () => import('vue-markdown-render'),
 }
 @Component<CollectionItem>({
   metaInfo() {

src/components/rmrk/Gallery/Gallery.vue

@@ -25,17 +25,7 @@
                     nft.emoteCount
                   }}</span>
                 </span>
-                <figure class="gallery__image-wrapper">
-                  <img
-                    :src="placeholder"
-                    :data-src="nft.image"
-                    :data-type="nft.type"
-                    :alt="nft.name"
-                    class="lazyload gallery__image"
-                    :class="{ 'card-image__burned': nft.burned }"
-                    @error="onError"
-                  />
-                </figure>
+                <BasicImage :src="nft.image" :alt="nft.name" customClass="gallery__image-wrapper" />
                 <span v-if="nft.price > 0" class="card-image__price">
                   <Money :value="nft.price" inline />
                 </span>
@@ -121,6 +111,7 @@ const components = {
   Money: () => import('@/components/shared/format/Money.vue'),
   Pagination: () => import('./Pagination.vue'),
   Loader: () => import('@/components/shared/Loader.vue'),
+  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
 }
 
 @Component<Gallery>({
@@ -349,18 +340,14 @@ export default class Gallery extends Vue {
     cursor: pointer;
   }
 
-  &__image {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
+  .card-image img {
     border-radius: 8px;
     top: 50%;
     transition: all 0.3s;
     display: block;
     width: 100%;
     height: auto;
-    transform: scale(1) translateY(-50%);
+    transform: scale(1);
   }
 
   .ff-container {
@@ -470,11 +457,12 @@ export default class Gallery extends Vue {
         }
 
         &:hover .gallery__image-wrapper img {
-          transform: scale(1.1) translateY(-50%);
+          transform: scale(1.1);
+          transition: transform 0.3s linear;
         }
 
         &:hover .ff-canvas {
-          transform: scale(1.1) translateY(-50%);
+          transform: scale(1.1);
         }
 
         &:hover .card-image__emotes {

src/components/rmrk/Gallery/GalleryCard.vue

@@ -1,46 +1,44 @@
 <template>
-  <div class="card nft-card" :class="{'is-current-owner': accountIsCurrentOwner()}">
-    <LinkResolver class="nft-card__skeleton" :route="type" :param="id" :link="link" tag="a" >
+  <div
+    class="card nft-card"
+    :class="{ 'is-current-owner': accountIsCurrentOwner() }"
+  >
+    <LinkResolver
+      class="nft-card__skeleton"
+      :route="type"
+      :param="id"
+      :link="link"
+      tag="a"
+    >
       <div class="card-image" v-if="image">
         <span v-if="emoteCount" class="card-image__emotes">
           <b-icon icon="heart" />
-          <span class="card-image__emotes__count">{{
-            emoteCount
-          }}</span>
+          <span class="card-image__emotes__count">{{ emoteCount }}</span>
+        </span>
+        <BasicImage :src="image" :alt="title" customClass="gallery__image-wrapper" />
+        <span v-if="price > 0" class="card-image__price">
+          <Money :value="price" inline />
         </span>
-
-        <b-image
-          :src="image"
-          :src-fallback="placeholder"
-          :alt="title || 'Simple image'"
-          ratio="1by1"
-        ></b-image>
-          <span v-if="price > 0" class="card-image__price">
-            <Money :value="price" inline />
-          </span>
       </div>
 
       <div v-else class="card-image">
         <span v-if="emoteCount" class="card-image__emotes">
           <b-icon icon="heart" />
-          <span class="card-image__emotes__count">{{
-            emoteCount
-          }}</span>
+          <span class="card-image__emotes__count">{{ emoteCount }}</span>
         </span>
 
-        <b-image
-          :src="placeholder"
-          alt="Simple image"
-          ratio="1by1"
-        ></b-image>
+        <b-image :src="placeholder" alt="Simple image" ratio="1by1"></b-image>
 
         <span v-if="price > 0" class="card-image__price">
           <Money :value="price" inline />
         </span>
       </div>
 
       <div class="card-content">
-        <span class="title mb-0 is-4 has-text-centered has-text-primary" :title="name">
+        <span
+          class="title mb-0 is-4 has-text-centered has-text-primary"
+          :title="name"
+        >
           <div class="has-text-overflow-ellipsis">
             {{ name }}
           </div>
@@ -60,7 +58,7 @@ import { NFT } from '../service/scheme'
 const components = {
   LinkResolver: () => import('@/components/shared/LinkResolver.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
-
+  BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
 }
 
 @Component({ components })
@@ -80,14 +78,16 @@ export default class GalleryCard extends Vue {
   private placeholder = '/koda300x300.svg';
 
   async mounted() {
-
     if (this.metadata) {
       const meta = await get(this.metadata)
       if (meta) {
         this.image = getSanitizer(meta.image || '')(meta.image || '')
         this.title = meta.name
       } else {
-        const m = await fetchNFTMetadata({ metadata: this.metadata } as NFT, getSanitizer(this.metadata, undefined, 'permafrost'))
+        const m = await fetchNFTMetadata(
+          { metadata: this.metadata } as NFT,
+          getSanitizer(this.metadata, undefined, 'permafrost')
+        )
         this.image = getSanitizer(m.image || '')(m.image || '')
         this.title = m.name
         update(this.metadata, () => m)
@@ -113,7 +113,6 @@ export default class GalleryCard extends Vue {
 </script>
 
 <style lang="scss">
-
 .nft-card {
   border-radius: 8px;
   position: relative;
@@ -137,7 +136,7 @@ export default class GalleryCard extends Vue {
     }
     transition: all 0.3s;
 
-    .card-image{
+    .card-image {
       &__emotes {
         position: absolute;
         background-color: #d32e79;
@@ -209,5 +208,4 @@ export default class GalleryCard extends Vue {
     }
   }
 }
-
 </style>

src/components/rmrk/Gallery/GalleryCardList.vue

@@ -5,14 +5,15 @@
       v-for="nft in items"
       :key="nft.id"
     >
-      <GalleryCard :id="nft.id"
-                   :name="nft.name"
-                   :type="type"
-                   :link="link"
-                   :metadata="nft.metadata"
-                   :price="nft.price"
-                   :emoteCount="nft.emoteCount"
-                   :currentOwner="nft.currentOwner"
+      <GalleryCard
+        :id="nft.id"
+        :name="nft.name"
+        :type="type"
+        :link="link"
+        :metadata="nft.metadata"
+        :price="nft.price"
+        :emoteCount="nft.emoteCount"
+        :currentOwner="nft.currentOwner"
       />
     </div>
   </div>

src/components/shared/view/BasicImage.vue

@@ -0,0 +1,40 @@
+<template>
+  <b-image
+    :src="src"
+    src-fallback="/placeholder.svg"
+    :alt="alt"
+    ratio="1by1"
+    @error="onImageError"
+    :class="customClass"
+    :rounded="rounded"
+  >
+    <template #placeholder>
+      <b-skeleton class="skeleton-placeholder" height="100%"></b-skeleton>
+    </template>
+  </b-image>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class BasicImage extends Vue {
+  @Prop({ type: String }) public src!: string;
+  @Prop(String) public customClass!: string;
+  @Prop({ type: String, default: 'KodaDot NFT minted multimedia' }) public alt!: string;
+  @Prop(Boolean) public rounded!: boolean;
+
+  public onImageError(event: unknown, src: string): void {
+    console.log('Unable to load ', src)
+  }
+
+}
+</script>
+
+<style scoped>
+ .b-skeleton {
+    height: 100%;
+    position: absolute;
+    top: 0;
+}
+</style>