Improve styling for BP Vote tab

telosnetwork · Nov 12, 2023 · 61c794d · 61c794d
1 parent 56a75bb
commit 61c794d
Showing 1 changed file with 86 additions and 52 deletions.
diff --git a/src/components/BpVotes.vue b/src/components/BpVotes.vue
@@ -14,87 +14,121 @@ export default {
         };
     },
     async mounted() {
-        const { account: { voter_info: { producers } } } = await getHyperionAccountData(this.account);
+        const {
+            account: {
+                voter_info: { producers },
+            },
+        } = await getHyperionAccountData(this.account);
         this.bpVotes = producers;
     },
 };
 </script>
 
 <template>
-
-<div class="row col-12 q-my-xs justify-center text-left container-max-width">
+<div
+    class="row col-12 q-my-xs justify-center text-left container-max-width"
+>
     <div class="row col-11">
         <div class="row col-12 q-mt-lg">
             <div>
                 <p class="panel-title">Votes for Block Producers</p>
             </div>
-            <q-space/>
+            <q-space />
         </div>
-        <q-separator class="row col-12 q-mt-md separator"/>
-        <div class="row voted-producers q-pa-md col-9">
-            <p>Account is voting for the following block producers:</p>
-            <div v-if="bpVotes.length" class="producers-list">
-                <span v-for="producer in bpVotes" v-bind:key="producer" class="producer-name">
-                    <a :href="`/account/${ producer }`">{{ producer }}</a>
-                </span>
+        <q-separator class="row col-12 q-mt-md separator" />
+        <div class="info-wrap">
+            <div class="vote-fraction-wrap col-md-3 q-pa-md">
+                <p>
+                    Currently voting for {{ bpVotes?.length }} out of 30
+                    possible block producers:
+                </p>
+                <q-circular-progress
+                    show-value
+                    class="q-ma-md bp-vote-circle"
+                    :value="(bpVotes.length / 30) * 100"
+                    size="50px"
+                    color="primary"
+                >
+                    {{ bpVotes.length }}/30
+                </q-circular-progress>
+            </div>
+            <div class="row voted-producers q-pa-md">
+                <p>Account is voting for the following block producers:</p>
+                <div v-if="bpVotes.length" class="producers-list">
+                    <span
+                        v-for="producer in bpVotes"
+                        v-bind:key="producer"
+                        class="producer-name"
+                    >
+                        <a :href="`/account/${producer}`">{{ producer }}</a>
+                    </span>
+                </div>
             </div>
-        </div>
-        <div class="vote-fraction-wrap col-3 q-pa-md">
-            <p>Currently voting for {{ byVotes?.length }} out of 30 possible block producers:</p>
-            <q-circular-progress
-                show-value
-                class="q-ma-md"
-                :value="bpVotes.length / 30 * 100"
-                size="50px"
-                color="primary"
-            >
-                {{ bpVotes.length }}/30
-            </q-circular-progress>
         </div>
     </div>
 </div>
-
 </template>
 
 <style lang="scss">
-.voted-producers {
-    display: block;
-    width: 100%;
+.info-wrap {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
-    p {
-        margin-bottom: 20px;
-        width: 100%;
+    @media (min-width: $breakpoint-sm-min) {
+        flex-direction: row-reverse;
+        align-items: flex-start;
     }
 
-    .producers-list {
+    .vote-fraction-wrap {
+        // color: var(--q-primary);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+
+        .bp-vote-circle {
+            color: var(--q-primary);
+        }
+
+        @media (min-width: $breakpoint-sm-min) {
+            border-left: 1px solid var(--q-color-seperator-background);
+        }
+    }
+
+    .voted-producers {
+        display: block;
         width: 100%;
-        /* make grid with column width 100px and 20px margin */
-        display: inline-grid;
-        grid-template-columns: repeat(auto-fill, 100px);
-        grid-gap: 20px;
 
-        .producer-name {
-            width: 100px;
-            margin-right: 20px;
+        p {
+            margin-bottom: 20px;
+            width: 100%;
+            display: none;
 
-            a {
-                text-decoration: none;
-                color: var(--q-primary);
+            @media (min-width: $breakpoint-sm-min) {
+                display: block;
             }
         }
-    }
-}
 
-.vote-fraction-wrap {
-    // color: var(--q-primary);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
+        .producers-list {
+            width: 100%;
+            /* make grid with column width 100px and 20px margin */
+            display: inline-grid;
+            grid-template-columns: repeat(auto-fill, 100px);
+            grid-gap: 20px;
 
-    @media (min-width: $breakpoint-sm-min) {
-        border-left: 1px solid var(--q-color-seperator-background);
+            .producer-name {
+                width: 100px;
+                margin-right: 20px;
+
+                a {
+                    text-decoration: none;
+                    color: var(--q-primary);
+                }
+            }
+        }
     }
 }
-
 </style>