Merge pull request #206 from rsksmart/fix/styles-issues

Fix: fixed some styling and added loading effects on tables
rsksmart · Mar 22, 2024 · 7245d4b · 7245d4b
2 parents 288c2db + 195f076
commit 7245d4b
Show file tree

Hide file tree

Showing 24 changed files with 282 additions and 42 deletions.
diff --git a/src/components/BigField.vue b/src/components/BigField.vue
@@ -64,7 +64,7 @@ export default {
     display flex
 
     .decode
-      align-self flex-end
+      margin-left 10px
 
     textarea
       padding 0

diff --git a/src/components/DataField.vue b/src/components/DataField.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="data-field" :style="cellStyle(field, value)" :class="fieldClass">
+  <div class="data-field" :class="fieldClass">
     <template v-if="field.renderAs">
       <component :is="field.renderAs" v-bind="renderAsProps({ field, value, filteredValue, row })"></component>
     </template>
@@ -78,7 +78,8 @@ export default {
       return getType(this.filteredValue)
     },
     link () {
-      return this.makeLink(this.field, this.row)
+      const value = this.makeLink(this.field, this.row)
+      return value === this.$route.path ? false : value
     },
     trim () {
       return this.computeTrim(this.field, this.value, this.filteredValue)

diff --git a/src/components/DataPage.vue b/src/components/DataPage.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="data-page centered" :class="$route.name">
-    <div class="flex container-title" v-if="!requesting">
+    <div class="flex container-title">
       <icon :class="titleDescription" :name="titleDescription.toLowerCase()"></icon>
       <div class="text-white-100 title capitalize" v-if="titleDescription">{{ titleDescription }}</div>
     </div>
-    <div v-if="(requesting && !error && !delayed.fields) || delayed.registry" class="flex justify-center content-spiner">
-      <spinner :height="300" :width="300" :border="5" />
+    <div v-if="(requesting && !error && !delayed.fields) || delayed.registry" class="content-spiner">
+      <Loader type="table" :fixed="false" />
     </div>
     <error-page v-if="error" :error="error"></error-page>
     <div class="update-error" v-if="updateError">
@@ -75,7 +75,7 @@
           </div>
           <template v-for="(tab, i) in tabs">
             <template v-if="isActiveTab(tab)">
-              <spinner :key="tab.action" v-if="isRequesting()(tab.name)" :height="300" :width="300" :border="5" />
+              <Loader type="table" :key="tab.action" v-if="isRequesting()(tab.name)" :fixed="true" />
               <data-section :key="`${tab.module}-${i}`" class="tab-content" v-else :module="tab.module" :dataType="tab.dataType" :reqKey="tab.name" :action="tab.action" :msgs="tab.msgs"></data-section>
             </template>
           </template>
@@ -92,22 +92,22 @@ import Message from './Message'
 import ItemNavigator from './ItemNavigator'
 import ExportControls from './ExportControls'
 import common from '../mixins/common'
-import Spinner from './Loaders/Spinner.vue'
 import { PAGE_COLORS } from '@/config/pageColors'
 import TitleDetail from './General/TitleDetail.vue'
 import BackContent from './General/BackContent.vue'
+import Loader from './Loaders/Loader.vue'
 
 export default {
   name: 'data-page',
   components: {
-    Spinner,
     DataSection,
     ErrorPage,
     Message,
     ItemNavigator,
     ExportControls,
     TitleDetail,
-    BackContent
+    BackContent,
+    Loader
   },
   mixins: [
     common

diff --git a/src/components/FieldItem.vue b/src/components/FieldItem.vue
@@ -4,7 +4,6 @@
     data-field(
       :field='parsedField'
       :row='data'
-      :style='cellStyle(field,getValue(field,data,true))'
       :delayed='delayed')
 
 </template>

diff --git a/src/components/General/BackContent.vue b/src/components/General/BackContent.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="back-content">
-    <router-link :to="routes[$route.name] || ''" class="flex item-center">
+    <router-link :to="routes[$route.name].route || ''" class="flex item-center">
       <icon name="back" :class="$route.name" />
-      <span :style="{color: PAGE_COLORS[$route.name].cl}">{{ `All ${$route.name}s` }}</span>
+      <span :style="{color: PAGE_COLORS[$route.name].cl}">{{ `All ${routes[$route.name].name}` }}</span>
     </router-link>
   </div>
 </template>
@@ -17,12 +17,34 @@ export default {
     return {
       PAGE_COLORS,
       routes: {
-        Block: '/blocks',
-        Transaction: '/txs',
-        Address: '/addresses',
-        'Internal transaction': '/txs',
-        Event: '/txs',
-        Token: '/tokens'
+        Block: {
+          route: '/blocks',
+          name: 'Blocks'
+        },
+        Transaction: {
+          route: '/txs',
+          name: 'Transactions'
+        },
+        Address: {
+          route: '/addresses',
+          name: 'Addresses'
+        },
+        'Internal transaction': {
+          route: '/txs',
+          name: 'Transactions'
+        },
+        Event: {
+          route: '/txs',
+          name: 'Transactions'
+        },
+        Token: {
+          route: '/tokens',
+          name: 'Tokens'
+        },
+        'Account Balance': {
+          route: '/balance',
+          name: 'Balance'
+        }
       }
     }
   }

diff --git a/src/components/General/TitleDetail.vue b/src/components/General/TitleDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="title-detail flex">
     <icon :class="titleDescription" :name="icon"></icon>
-    <div class="text-white-100">
+    <div class="text-white-100 cursor-text">
       <tool-tip :text="value" :hideCopy="true" :trim="data[routerName].hideTrim" />
       <span class="capitalize"> {{ titleDescription }}</span>
     </div>

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -57,6 +57,3 @@ export default {
 
 }
 </script>
-<style lang="stylus">
-  // @import ('../lib/styl/style.styl')
-</style>
diff --git a/src/components/Loaders/Loader.vue b/src/components/Loaders/Loader.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <spinner v-if="type === 'spinner'" />
+    <table-loader v-if="typeLoader === 'table'" />
+    <section-loader v-if="typeLoader === 'section'" />
+  </div>
+</template>
+<script>
+import Spinner from './Spinner.vue'
+import TableLoader from './TableLoader.vue'
+import SectionLoader from './SectionLoader.vue'
+export default {
+  components: {
+    Spinner,
+    TableLoader,
+    SectionLoader
+  },
+  props: ['type', 'fixed'],
+  data () {
+    return {
+      typeLoader: ''
+    }
+  },
+  created () {
+    if (this.fixed) {
+      this.typeLoader = this.type
+      return
+    }
+    if (Object.values(this.$route.params).length > 0) {
+      this.typeLoader = 'section'
+    } else {
+      this.typeLoader = 'table'
+    }
+  }
+}
+</script>
diff --git a/src/components/Loaders/SectionLoader.vue b/src/components/Loaders/SectionLoader.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="section-loader animate-pulse bg-secondary">
+    <svg width="1300" height="470" viewBox="0 0 1300 470" fill="red" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="1" rx="5" ry="5" width="120px" height="10" />
+      <rect x="0" y="41" rx="5" ry="5" width="270px" height="30" />
+      <rect x="0" y="100" rx="5" ry="5" width="100px" height="30" />
+      <rect x="120" y="100" rx="5" ry="5" width="100px" height="30" />
+      <circle cx="18" cy="190" r="18" />
+      <rect x="67" y="175" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="250" r="18" />
+      <rect x="67" y="235" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="310" r="18" />
+      <rect x="67" y="295" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="370" r="18" />
+      <rect x="67" y="355" rx="5" ry="5" width="87%" height="30" />
+      <circle cx="18" cy="430" r="18" />
+      <rect x="67" y="415" rx="5" ry="5" width="87%" height="30" />
+    </svg>
+    </div>
+</template>
diff --git a/src/components/Loaders/TableLoader.vue b/src/components/Loaders/TableLoader.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="table-loader animate-pulse">
+    <svg width="1400" height="450" viewBox="0 0 1400 450" xmlns="http://www.w3.org/2000/svg">
+      <rect x="0" y="0" rx="4" ry="4" width="100%" height="52" />
+      <rect x="67" y="15" rx="10" ry="10" width="85" height="20" fill="#3A3A3A" />
+      <rect x="188" y="15" rx="10" ry="10" width="169" height="19" fill="#3A3A3A" />
+      <rect x="402" y="15" rx="10" ry="10" width="85" height="19" fill="#3A3A3A" />
+      <rect x="523" y="15" rx="10" ry="10" width="169" height="19" fill="#3A3A3A" />
+      <rect x="731" y="15" rx="10" ry="10" width="85" height="19" fill="#3A3A3A" />
+      <rect x="852" y="15" rx="10" ry="10" width="85" height="19" fill="#3A3A3A" />
+      <rect x="978" y="15" rx="10" ry="10" width="169" height="19" fill="#3A3A3A" />
+      <rect x="1180" y="15" rx="10" ry="10" width="50" height="19" fill="#3A3A3A" />
+
+      <rect x="10" y="72" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="80" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="80" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="80" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="80" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="80" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="120" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="152" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="160" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="160" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="160" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="160" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="160" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="200" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="232" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="240" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="240" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="240" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="240" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="240" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="280" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="312" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="320" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="320" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="320" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="320" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="320" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="360" rx="10" ry="10" width="100%" height="1" />
+
+      <rect x="10" y="392" rx="50" ry="50" width="30" height="30" />
+      <rect x="66" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="187" y="400" rx="10" ry="10" width="169" height="19" />
+      <rect x="401" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="522" y="400" rx="10" ry="10" width="169" height="19" />
+      <rect x="730" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="851" y="400" rx="10" ry="10" width="85" height="19" />
+      <rect x="977" y="400" rx="10" ry="10" width="169" height="19" />
+      <rect x="1180" y="400" rx="10" ry="10" width="50" height="19" />
+      <rect x="0" y="440" rx="10" ry="10" width="100%" height="1" />
+
+    </svg>
+  </div>
+</template>
diff --git a/src/components/Navigations/Sidebar.vue b/src/components/Navigations/Sidebar.vue
@@ -14,23 +14,26 @@
             <img class="home-active" src="@/assets/svg/home-active.svg" alt="home-icon">
             <span>Home</span>
           </router-link>
-          <router-link to="/blocks" class="link-blocks" :class="$route.name === 'Block' ? activeClasses : ''">
+          <router-link to="/blocks" class="link-blocks"
+            :class="PAGE_NAME.BLOCKS.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/block-icon.svg" alt="block-icon">
             <img class="active-icon" src="@/assets/svg/block-active.svg" alt="block-icon">
             <span>Blocks</span>
           </router-link>
           <router-link to="/txs" class="link-txs"
-            :class="$route.name === 'Internal transaction' || $route.name === 'Transaction' || $route.name === 'Event' ? activeClasses : ''">
+            :class="PAGE_NAME.TXS.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/tx-icon.svg" alt="transaction-icon">
             <img class="active-icon" src="@/assets/svg/tx-active.svg" alt="transaction-icon">
             <span>Transactions</span>
           </router-link>
-          <router-link to="/addresses" class="link-address" :class="$route.name === 'Address' ? activeClasses : ''">
+          <router-link to="/addresses" class="link-address"
+            :class="PAGE_NAME.ADDRESSES.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/address-icon.svg" alt="address-icon">
             <img class="active-icon" src="@/assets/svg/address-active.svg" alt="address-icon">
             <span>Addresses</span>
           </router-link>
-          <router-link to="/tokens" class="link-tokens" :class="$route.name === 'Token' || $route.name === 'Token Account' ? activeClasses : ''">
+          <router-link to="/tokens" class="link-tokens"
+            :class="PAGE_NAME.TOKENS.some((v) => $route.name?.includes(v)) ? activeClasses : ''">
             <img class="base-icon" src="@/assets/svg/token-icon.svg" alt="token-icon">
             <img class="active-icon" src="@/assets/svg/token-active.svg" alt="token-icon">
             <span>Tokens</span>
@@ -51,12 +54,12 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import { DOMAIN_STATS_TESTNET, DOMAIN_STATS_MAINNET } from '../../config/network'
+import { PAGE_NAME } from '@/config/types'
 
 export default {
-  components: {
-  },
   data () {
     return {
+      PAGE_NAME,
       DOMAIN_STATS_MAINNET,
       DOMAIN_STATS_TESTNET,
       activeClasses: 'router-link-exact-active router-link-active'

diff --git a/src/components/Search/CtrlSearch.vue b/src/components/Search/CtrlSearch.vue
@@ -10,7 +10,7 @@
         type="text"
         :value="value"
         @input.prevent="input"
-        @change.prevent="changeInput"
+        @keyup.enter="changeInput"
         @keyup.stop="onKey"
         :placeholder="onFocusValue ? placeholder : null"
         :class="cssClass"
@@ -43,6 +43,7 @@
 import { mapActions } from 'vuex'
 import { clamp } from '../../lib/js/utils'
 import Spinner from '../Loaders/Spinner.vue'
+import { ROUTES } from '../../config/types'
 export default {
   name: 'ctrl-search',
   components: {
@@ -64,7 +65,7 @@ export default {
     if (searchValue) this.value = searchValue
   },
   methods: {
-    ...mapActions(['searchExpand']),
+    ...mapActions(['searchExpand', 'clearSearchedResults']),
     setExpand () {
       if (window.innerWidth > 600) return
       this.expandSearch = !this.expandSearch
@@ -73,6 +74,7 @@ export default {
     clear () {
       this.value = ''
       this.selectResult(0)
+      this.clearSearchedResults()
     },
     input (event, type) {
       this.selectResult(0)
@@ -102,7 +104,6 @@ export default {
     onChange (event) {
       const value = this.value
       this.emit(event, 'change', value)
-      this.clear()
     },
     selectResult (result) {
       this.selectedResult = result
@@ -113,7 +114,6 @@ export default {
       if (link) this.$router.push(link)
       this.selectResult(key++)
       this.emitResult(event, result)
-      this.clear()
     },
     emitResult (event, result) {
       this.emit(event, 'result', result)
@@ -148,6 +148,14 @@ export default {
     isLoading () {
       return !!this.loading
     }
+  },
+  watch: {
+    $route () {
+      if (this.$route.name.toLowerCase() !== ROUTES.search.toLowerCase()) {
+        this.clearSearchedResults()
+        this.value = ''
+      }
+    }
   }
 }
 </script>