From a478949bddd0bbb1bbdcf30571f7acb3f64b596b Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 15 May 2023 22:53:38 +0800
Subject: [PATCH] feat: proposal item

---
 src/components/ProposalListItem.vue    | 134 ++++++++++++++-----------
 src/components/ProposalProcess.vue     |  35 +++++--
 src/layouts/components/Breadcrumbs.vue |  31 ------
 3 files changed, 104 insertions(+), 96 deletions(-)
 delete mode 100644 src/layouts/components/Breadcrumbs.vue

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 9681016d..a4a45946 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -26,64 +26,82 @@ const statusMap: Record<string, string> = {
 </script>
 <template>
   <div class="bg-white dark:bg-[#28334e] rounded text-sm">
-    <RouterLink
-      :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
-      v-for="(item, index) in proposals?.proposals"
-      :key="index"
-      class="py-4 px-4 hover:bg-gray-100 dark:hover:bg-[#353f5a] block rounded cursor-pointer"
-    >
-      <div class="grid grid-cols-6 md:grid-cols-11 flex-1">
-        <div class="text-main dark:text-white mb-3">
-          #{{ item?.proposal_id }}
-        </div>
+    <table class="table w-full">
+      <tbody>
+        <tr v-for="(item, index) in proposals?.proposals" :key="index">
+          <td class="px-4 w-10">
+            <RouterLink
+              class="text-main text-base hover:text-indigo-400"
+              :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+            >
+              #{{ item?.proposal_id }}
+            </RouterLink>
+          </td>
+          <td class="w-[40%]">
+            <div>
+              <RouterLink
+                :to="`/${chain.chainName}/gov/${item?.proposal_id}`"
+                class="text-main text-base mb-1 block hover:text-indigo-400"
+              >
+                {{ item?.content?.title }}
+              </RouterLink>
+              <div
+                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
+              >
+                {{ showType(item.content['@type']) }}
+              </div>
+            </div>
+          </td>
+          <td class="w-[30%]">
+            <ProposalProcess
+              :pool="staking.pool"
+              :tally="item.final_tally_result"
+            ></ProposalProcess>
+          </td>
+          <td>
+            <div>
+              <div
+                class="flex items-center"
+                :class="
+                  statusMap?.[item?.status] === 'PASSED'
+                    ? 'text-yes'
+                    : statusMap?.[item?.status] === 'REJECTED'
+                    ? 'text-no'
+                    : 'text-info'
+                "
+              >
+                <div
+                  class="w-1 h-1 rounded-full mr-2"
+                  :class="
+                    statusMap?.[item?.status] === 'PASSED'
+                      ? 'bg-yes'
+                      : statusMap?.[item?.status] === 'REJECTED'
+                      ? 'bg-no'
+                      : 'bg-info'
+                  "
+                ></div>
+                <div class="text-xs">
+                  {{ statusMap?.[item?.status] || item?.status }}
+                </div>
+              </div>
+              <div
+                class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
+              >
+                {{ format.toDay(item.voting_end_time, 'from') }}
+              </div>
+            </div>
+          </td>
 
-        <div class="col-span-5 md:pr-10 text-main dark:text-white truncate">
-          {{ item?.content?.title }}
-        </div>
-
-        <div class="col-span-3 mb-3 truncate">
-          <div
-            class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs"
-          >
-            {{ showType(item.content['@type']) }}
-          </div>
-        </div>
-
-        <div
-          class="flex items-center mb-3"
-          :class="
-            statusMap?.[item?.status] === 'PASSED'
-              ? 'text-yes'
-              : statusMap?.[item?.status] === 'REJECTED'
-              ? 'text-no'
-              : 'text-info'
-          "
-        >
-          <div
-            class="w-1 h-1 rounded-full mr-2"
-            :class="
-              statusMap?.[item?.status] === 'PASSED'
-                ? 'bg-yes'
-                : statusMap?.[item?.status] === 'REJECTED'
-                ? 'bg-no'
-                : 'bg-info'
-            "
-          ></div>
-          <div class="text-xs">
-            {{ statusMap?.[item?.status] || item?.status }}
-          </div>
-        </div>
-
-        <div
-          class="truncate mb-3 col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
-        >
-          {{ format.toDay(item.voting_end_time, 'from') }}
-        </div>
-      </div>
-      <ProposalProcess
-        :pool="staking.pool"
-        :tally="item.final_tally_result"
-      ></ProposalProcess>
-    </RouterLink>
+          <td>
+            <div>
+              <button class="btn btn-xs btn-primary rounded-sm mr-3">
+                Detail
+              </button>
+              <button class="btn btn-xs btn-primary rounded-sm">Vote</button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
diff --git a/src/components/ProposalProcess.vue b/src/components/ProposalProcess.vue
index 87e71cd9..201038bd 100644
--- a/src/components/ProposalProcess.vue
+++ b/src/components/ProposalProcess.vue
@@ -30,14 +30,35 @@ const veto = computed(() =>
 </script>
 
 <template>
-  <div class="progress rounded-full h-1 text-xs flex items-center">
-    <div class="h-1 bg-yes" :style="`width: ${yes}`"></div>
-    <div class="h-1 bg-no" :style="`width: ${no}`"></div>
+  <div class="progress rounded-[3px] h-7 text-xs flex items-center">
     <div
-      class="h-1"
-      :style="`width: ${veto}; background-color: #B71C1C;`"
-    ></div>
-    <div class="h-1 bg-secondary" :style="`width: ${abstain}`"></div>
+      class="h-7 bg-yes flex items-center pl-2 text-white overflow-hidden"
+      :style="`width: ${yes}`"
+      :title="yes"
+    >
+      {{ yes }}
+    </div>
+    <div
+      class="h-7 bg-no flex items-center overflow-hidden"
+      :style="`width: ${no}`"
+      :title="no"
+    >
+      {{ no }}
+    </div>
+    <div
+      class="h-7 bg-[#B71C1C] flex items-center overflow-hidden"
+      :style="`width: ${veto};`"
+      :title="veto"
+    >
+      {{ veto }}
+    </div>
+    <div
+      class="h-7 bg-secondary flex items-center overflow-hidden"
+      :style="`width: ${abstain}`"
+      :title="abstain"
+    >
+      {{ abstain }}
+    </div>
   </div>
 </template>
 <style scoped>
diff --git a/src/layouts/components/Breadcrumbs.vue b/src/layouts/components/Breadcrumbs.vue
deleted file mode 100644
index 0142cffc..00000000
--- a/src/layouts/components/Breadcrumbs.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useBlockchain } from '@/stores/useBlockchain';
-import { Icon } from '@iconify/vue';
-import { computed } from '@vue/reactivity';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-
-const chain = useBlockchain();
-const route = useRoute();
-const i18n = useI18n();
-/// To display human readable module name, we have to set the prefix("module.") + route name to the key in i18n.
-/// such as `module.chain` = 'Dashboard'
-const moduleName = computed(() =>
-  i18n.t(`module.${route.name?.toString() || ''}`)
-);
-const items = computed(() => [
-  { title: String(chain.name).toUpperCase(), href: `/${chain.name}` },
-  moduleName.value,
-]);
-</script>
-<template>
-  <div class="d-flex flex-rows align-center">
-    <span class="text-h5 mr-3">{{ moduleName }}</span>
-    <Icon icon="mdi-dots-vertical" />
-    <VBreadcrumbs :items="items">
-      <template v-slot:divider>
-        <Icon icon="mdi-chevron-right" />
-      </template>
-    </VBreadcrumbs>
-  </div>
-</template>