Merge pull request #561 from kodadot/svg

Fixed logo to svg, added new loader

Author: yangwao

public/img/icons/favicon-32x32.png

@@ -8,7 +8,7 @@
     <template #brand>
       <b-navbar-item tag="router-link" :to="{ path: '/' }" class="logo">
         <img
-          src="/kodadot_lgbt_320px.png"
+          src="/koda300x300.svg"
           alt="First NFT market explorer on Kusama and Polkadot"
           class="logo__img"
         >

public/koda300x300.svg

@@ -166,19 +166,10 @@ export default class Gallery extends Vue {
     sortBy: { blockNumber: -1 }
   };
   private first = 12;
-  private placeholder = require('@/assets/kodadot_logo_v1_transparent_400px.png');
+  private placeholder = require('@/assets/koda300x300.svg');
   private currentValue = 1;
   private total = 0;
 
-  // public mounted() {
-  //   window.onscroll = () => {
-  //     const bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.scrollHeight;
-  //     if (bottomOfWindow) {
-  //       console.log('!!!!!!!!!!!!!!!! [END]')
-  //     }
-  //   }
-  // }
-
   get isLoading() {
     return this.$apollo.queries.nfts.loading
   }

public/kodadot_logo_v1_transparent_400px.jpg

@@ -4,15 +4,15 @@
       <div class="card-image" v-if="image">
         <b-image
           :src="image"
-          :src-fallback="require('@/assets/kodadot_logo_v1_transparent_400px.png')"
+          :src-fallback="placeholder"
           alt="Simple image"
           ratio="1by1"
         ></b-image>
       </div>
 
       <div v-else class="card-image">
         <b-image
-          :src="require('@/assets/kodadot_logo_v1_transparent_400px.png')"
+          :src="placeholder"
           alt="Simple image"
           ratio="1by1"
         ></b-image>
@@ -51,7 +51,7 @@ export default class GalleryCard extends Vue {
   @Prop() public price!: string;
   @Prop() public metadata!: string;
 
-  private placeholder = require('@/assets/kodadot_logo_v1_transparent_400px.png');
+  private placeholder = require('@/assets/koda300x300.svg');
 
   async mounted() {
     if (this.metadata) {

src/assets/infinity.svg

@@ -21,12 +21,12 @@
                 <div class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
                   <b-image
                     v-if="!isLoading && imageVisible && !meta.animation_url"
-                    :src="meta.image || require('@/assets/kodadot_logo_v1_transparent_400px.png')"
-                    :src-fallback="require('@/assets/kodadot_logo_v1_transparent_400px.png')"
+                    :src="meta.image || require('@/assets/koda300x300.svg')"
+                    :src-fallback="require('@/assets/koda300x300.svg')"
                     alt="KodaDot NFT minted multimedia"
                     ratio="1by1"
                   ></b-image>
-                  <img class="fullscreen-image" :src="meta.image || require('@/assets/kodadot_logo_v1_transparent_400px.png')" alt="KodaDot NFT minted multimedia">
+                  <img class="fullscreen-image" :src="meta.image || require('@/assets/koda300x300.svg')" alt="KodaDot NFT minted multimedia">
                   <b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
                   <MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
                 </div>

src/assets/koda300x300.svg

@@ -1,7 +1,10 @@
 <template>
-    <b-loading is-full-page v-model="isLoading" :can-cancel="true">
-      <div class="loading-icon" ><span v-if="status" class="loading-text">{{ $t(status) }}</span></div>
-    </b-loading>
+  <b-loading is-full-page v-model="isLoading" :can-cancel="true">
+    <figure>
+      <img class="loading-icon" :src="placeholder" />
+      <figcaption v-if="status" class="loading-text">{{ $t(status) }}</figcaption>
+    </figure>
+  </b-loading>
 </template>
 
 <script lang="ts" >
@@ -12,19 +15,22 @@ export default class Loader extends Vue {
   @Prop(String) public status!: string;
   @Prop(Boolean) public value!: boolean;
 
+  protected placeholder = require('@/assets/infinity.svg');
+
   get isLoading() {
     return this.value;
   }
 
   set isLoading(value: boolean) {
-    this.$emit('input', value)
+    this.$emit('input', value);
   }
 }
 </script>
 
 <style scoped>
 .loading-text {
-    position: relative;
-    top: 4em;
+  position: relative;
+  max-width: 200px;
+  text-align: center;
 }
 </style>