change transfers layout

baking-bad · Jan 18, 2021 · a80cc91 · a80cc91
1 parent d8c2cfa
commit a80cc91
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 20 deletions.
diff --git a/src/views/contract/TransferList.vue b/src/views/contract/TransferList.vue
@@ -72,12 +72,12 @@
         <template v-for="(item, id) in items">
           <v-list-item class="item__list-item" :class="statusHeaderClass(item.status)" :key="id">
             <v-row>
-              <v-col cols="2" class="d-flex align-center">
+              <v-col cols="2" class="d-flex align-center justify-center">
                 <span class="body-2 text--secondary">{{
                   helpers.formatDatetime(item.timestamp)
                 }}</span>
               </v-col>
-              <v-col cols="2" class="d-flex align-center justify-end pr-6">
+              <v-col cols="4" class="d-flex align-center justify-center pr-6">
                 <span class="body-2">
                   {{
                     token
@@ -101,7 +101,7 @@
                   >
                 </span>
               </v-col>
-              <v-col cols="5" class="d-flex align-center">
+              <v-col cols="4" class="d-flex align-center">
                 <div>
                   <span
                     class="caption text-uppercase font-weight-regular text--secondary"
@@ -147,7 +147,7 @@
                   />
                 </div>
               </v-col>
-              <v-col cols="2">
+              <v-col cols="2" class="d-flex align-center justify-end">
                 <v-btn
                   class="text--secondary hash hash-link"
                   text
@@ -158,7 +158,7 @@
                   }"
                   target="_blank"
                 >
-                  <span v-html="helpers.shortcut(item.hash)"></span>
+                  <v-icon :color="getStatusColor(item.status)">mdi-open-in-new</v-icon>
                 </v-btn>
               </v-col>
             </v-row>

diff --git a/src/views/contract/TransfersTab/TransfersCard.vue b/src/views/contract/TransfersTab/TransfersCard.vue
@@ -7,10 +7,10 @@
               <v-list-item-content>
                 <v-list-item-title>
                   <v-row>
-                    <v-col class="pt-0 pb-0" cols="6">
+                    <v-col class="pt-0 pb-0" cols="5">
                       <span v-html="helpers.shortcut(item.contract)"></span>
                     </v-col>
-                    <v-col class="text-right pt-0 pb-0 item-amount" cols="6">
+                    <v-col class="text-right pt-0 pb-0 item-amount" cols="7">
                       <span class="item-amount__value" :title="getItemValue(item)">
                         {{getItemValue(item)}}
                       </span>&nbsp;
@@ -87,16 +87,5 @@ export default {
 <style lang="scss" scoped>
 .item-amount {
   padding-left: 2rem;
-  &__value {
-    display: inline-block;
-    width: 1.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    &:hover {
-      width: auto;
-      text-overflow: unset;
-    }
-  }
 }
 </style>
diff --git a/src/views/contract/TransfersTab/TransfersTab.vue b/src/views/contract/TransfersTab/TransfersTab.vue
@@ -1,15 +1,15 @@
 <template>
   <v-container class="canvas fill-canvas pa-8 ma-0" fluid>
     <v-row v-if="balances" no-gutters>
-      <v-col cols="9" class="pa-2">
+      <v-col cols="8" class="pa-2">
         <TransferList
           :address="address"
           :network="network"
           :token="token"
           :contract="token.contract"
         />
       </v-col>
-      <v-col cols="3" class="pa-2">
+      <v-col cols="4" class="pa-2">
         <TransfersCard
           @selectedToken="updateSelectedToken"
           :default-selected-token="selectedToken"