Merge pull request #30 from Drarok/improved-vote-count-display

Improve display of vote count and song length
mintopia · Jul 7, 2024 · a345ede · a345ede
2 parents 8e626cf + 1ce7bce
commit a345ede
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/resources/js/components/Upcoming.vue b/resources/js/components/Upcoming.vue
@@ -18,18 +18,18 @@
                                     <template v-else>Fallback Track</template>
                                 </div>
                             </div>
-                            <div class="col-auto text-secondary">{{ formatMs(song.length) }}</div>
+                            <div class="col-auto text-secondary song-length">{{ formatMs(song.length) }}</div>
                             <div class="col-auto text-center">
                                 <div class="row">
                                     <template v-if="can_downvote == 1">
-                                        <div class="col-4">
+                                        <div class="col-3">
                                             <i v-if="song.vote <= 0" class="icon ti ti-arrow-big-up cursor-pointer" @click="vote(song.id, 1)"></i>
                                             <i v-if="song.vote === 1" class="icon ti ti-arrow-big-up-filled cursor-pointer text-success" @click="vote(song.id, 0)"></i>
                                         </div>
-                                        <div class="col-4">
+                                        <div class="col-6">
                                             {{ song.score }}
                                         </div>
-                                        <div class="col-4">
+                                        <div class="col-3">
                                             <i v-if="song.vote >= 0" class="icon ti ti-arrow-big-down cursor-pointer" @click="vote(song.id, -1)"></i>
                                             <i v-if="song.vote === -1" class="icon ti ti-arrow-big-down-filled cursor-pointer text-danger" @click="vote(song.id, 0)"></i>
                                         </div>
@@ -81,7 +81,6 @@
     </div>
 </template>
 <style>
-
     .list-move,
     .list-enter-active,
     .list-leave-active {
@@ -93,9 +92,14 @@
         opacity: 0;
         transform: translateX(30px);
     }
+
     .list-leave-active {
         position: absolute;
     }
+
+    .song-length {
+        padding-right: 1rem;
+    }
 </style>
 <script>
     import { VueEternalLoading } from '@ts-pro/vue-eternal-loading';