From bf47f2d19ff1d96d2dfda0eae03746fdb87834ba Mon Sep 17 00:00:00 2001
From: erwin261996 <erwinmayorga26@gmail.com>
Date: Thu, 19 May 2022 16:43:38 -0600
Subject: [PATCH] simple store card

---
 nuxt/components/StoreCard.vue  | 89 ++++++++++++++++++++++------------
 nuxt/components/VoteButton.vue |  4 +-
 2 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/nuxt/components/StoreCard.vue b/nuxt/components/StoreCard.vue
index 8b5faa53..5df5d27e 100644
--- a/nuxt/components/StoreCard.vue
+++ b/nuxt/components/StoreCard.vue
@@ -40,14 +40,8 @@
             >
           </v-img>
         </div>
-        <div class="score">
-          <vote-button :isUpvoting="true" :store="store" />
-          <span>
-            {{ Number(store.upvotes - store.downvotes).toLocaleString() }}</span
-          >
-          <vote-button :isUpvoting="false" :store="store" />
-        </div>
-        <div class="content pa-2 pl-5">
+
+        <div class="detail-bottom">
           <div @click="gotoStore(store)">
             <div class="title">
               <a :href="getStoreLink(store.href)" class="font-weight-regular">
@@ -59,6 +53,15 @@
             </div>
             <div class="description">{{ store.description }}</div>
           </div>
+        </div>
+        <div class="score">
+          <vote-button :isUpvoting="true" :store="store" />
+          <span>
+            {{ formatNumberVotes(Number(store.upvotes - store.downvotes)) }}</span
+          >
+          <!-- <vote-button :isUpvoting="false" :store="store" /> -->
+        </div>
+        <div class="content pa-2 pl-5">
           <div>
             <div class="tag-container">
               <v-chip
@@ -138,6 +141,19 @@ export default {
         return state.baseURL
       },
     }),
+    formatNumberVotes() {
+      return (value) => {
+        if (Math.abs(value) > 999999) {
+          return (Math.sign(value)*((Math.abs(value)/1000000).toFixed(1)) + 'M')
+        
+        } else if((Math.abs(value) > 999)) {
+          return (Math.sign(value)*((Math.abs(value)/1000).toFixed(1)) + 'K')
+        
+        } else {
+          return Math.sign(value)*Math.abs(value)
+        }
+      }
+    },
   },
   methods: {
     getStoreLink(link) {
@@ -171,22 +187,50 @@ export default {
 .detail {
   color: #000000de;
   display: grid;
-  grid-template-rows: 200px 150px;
+  grid-template-rows: 200px 120px;
   grid-template-columns: 80px 1fr;
   row-gap: 4px;
 
   .screenshot {
     grid-column: 1 / 3;
   }
+
+  .detail-bottom {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    grid-column: 1 / 3;
+    padding: 5px 50px 5px 20px;
+
+    .title {
+      font-size: 1.7rem !important;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      a {
+        text-decoration: none;
+      
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+    .description {
+      font-size: 14px !important;
+      margin-top: 5px;
+    }
+  }
   .score {
-    display: grid;
-    grid: 1fr;
-    justify-items: center;
-    padding: 5px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 10px;
     font-size: 15px !important;
 
     span {
       display: block;
+      padding-left: 5px;
     }
     .arrow {
       border: 1px solid;
@@ -205,24 +249,7 @@ export default {
     position: relative;
     overflow: hidden;
     text-overflow: ellipsis;
-    .title {
-      font-size: 1.7rem !important;
-
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      a {
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-    .description {
-      font-size: 14px !important;
-      margin-top: 5px;
-    }
+    
     .tag-container {
       position: absolute;
       bottom: 8px;
diff --git a/nuxt/components/VoteButton.vue b/nuxt/components/VoteButton.vue
index 697f2906..d4a154b2 100644
--- a/nuxt/components/VoteButton.vue
+++ b/nuxt/components/VoteButton.vue
@@ -14,12 +14,12 @@
     </template>
     <template v-else>
       <span v-if="isUpvoting" @click="showDialog = true">
-        <v-icon width="100%" class="arrow up" color="green"
+        <v-icon width="100%" size="16" class="arrow up" color="green"
           >mdi-arrow-up</v-icon
         ></span
       >
       <span v-else @click="showDialog = true">
-        <v-icon width="100%" class="arrow down" color="red"
+        <v-icon width="100%" size="16" class="arrow down" color="red"
           >mdi-arrow-down</v-icon
         >
       </span>