SOme vuetify things

frontend/components/playlist/Song.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="song-container">
-    <div
-      class="song-voteable-container"
-      @click="clickedSong"
-      @contextmenu="$emit('contextmenu', $event, id)"
-    >
-      <div class="song-thumbnail">
-        <img :src="thumbnail" :alt="title" />
-        <span class="song-duration">{{ durationInString }}</span>
-      </div>
-      <div class="song-info">
-        <div class="song-title">{{ title }}</div>
-        <div class="song-votes">{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
-      </div>
-    </div>
-  </div>
+  <v-card
+    class="mx-auto song-element"
+    @click="clickedSong"
+    @contextmenu="$emit('contextmenu', $event, id)"
+  >
+    <v-img class="white--text align-end song-image" :src="thumbnail"></v-img>
+
+    <v-card-text class="text--primary text-truncate text-no-wrap song-title">
+      <div class="text-truncate-inner">{{ title }}</div>
+
+      <div>{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
+    </v-card-text>
+    <div class="more-info-button" @click="$emit('contextmenu', $event, id)">. . .</div>
+  </v-card>
 </template>
 
 <script>
@@ -72,7 +70,11 @@ export default {
     }
   },
   methods: {
-    clickedSong: function() {
+    clickedSong: function(e) {
+      e.preventDefault();
+      if (e.target.className === "more-info-button") {
+        return;
+      }
       console.log("Clicked on song with info", this.title, this.id);
     }
   }
@@ -80,57 +82,49 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.song-container {
+.song-image {
+  width: 25%;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2.5px !important;
+}
+.song-element {
   display: flex;
   flex-direction: row;
-  color: white;
+  box-shadow: 0px 0px 2px #000000;
+  border-radius: 5px;
+  margin: 5px 5px;
+  cursor: pointer;
+  margin-left: 8px;
+  width: calc(100% - 16px);
 
-  .song-voteable-container {
-    width: 75%;
+  & .song-context-button {
+    width: 10%;
     display: flex;
-
-    & .song-votes {
-        color: lightgrey;
-    }
-
-    & .song-thumbnail {
-      width: 25%;
-      position: relative;
-
-      & img {
-        width: 100%;
-        height: 100%;
-        border-top-left-radius: 7.5px;
-        border-bottom-left-radius: 7.5px;
-      }
-
-      & .song-duration {
-        position: absolute;
-        bottom: 5px;
-        left: 0px;
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-        border-bottom-left-radius: 5px;
-        padding: 0 5px;
-        background: #000000A0;
-        color:white;
-      }
-    }
-
-    & .song-info {
-      width: 100%;
-      padding-left: 10px;
-      display: flex;
-      justify-content: space-evenly;
-      flex-direction: column;
-    }
-  }
-
-  & .song-mutation {
-    width: 25%;
-    display: flex;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+    border-left: 1px solid black;
   }
 }
+
+.more-info-button {
+  width: 20%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 12px;
+}
+
+.song-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0 !important;
+}
+
+.text-truncate-inner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>