SOme vuetify things

frontend/components/Styleguide.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <v-app>
     <h1>Styleguide</h1>
-    <div class="row">
+    <div>
       <h2>Chat</h2>
       <Chat />
     </div>
-    <div class="row">
+    <div>
       <h2>Playlist-element</h2>
       <Playlist />
     </div>
-  </div>
+  </v-app>
 </template>
 
 

frontend/components/chat/ChatInput.vue

@@ -1,33 +1,38 @@
 <template>
-    <div class="chat-input">
-        <input v-model="chatInput" type="text" placeholder="Aa.." @keyup.enter="send" />
-        <button @click="send">Send</button>
-        <button @click="requestHelp">Help</button>
-    </div>
+  <v-row>
+    <v-col cols="9">
+      <v-text-field v-model="chatInput" label="Aa.." @keyup.enter="send"></v-text-field>
+    </v-col>
+    <v-col cols="1">
+      <v-btn @click="send">Send</v-btn>
+    </v-col>
+    <v-col cols="1">
+      <v-btn @click="requestHelp">Help</v-btn>
+    </v-col>
+  </v-row>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            chatInput: ""
-        }
+  data() {
+    return {
+      chatInput: ""
+    };
+  },
+  methods: {
+    send: function() {
+      if (this.chatInput == "") {
+        return;
+      }
+      this.$emit("sentMessage", this.chatInput);
+      this.chatInput = "";
     },
-    methods: {
-        send: function() {
-            if(this.chatInput == "") {
-                return;
-            }
-            this.$emit("sentMessage", this.chatInput);
-            this.chatInput = "";
-        },
-        requestHelp: function() {
-            console.log("emit for help here");
-        }
+    requestHelp: function() {
+      console.log("emit for help here");
     }
-}
+  }
+};
 </script>
 
 <style scoped lang="scss">
-
 </style>

frontend/components/playlist/ContextMenu.vue

@@ -65,7 +65,6 @@ export default {
 
 <style scoped lang="scss">
 .context-menu-background {
-  background: #000000a0;
   width: 500px;
   height: 500px;
   position: absolute;

frontend/components/playlist/Playlist.vue

@@ -12,14 +12,13 @@
         :duration="song.duration"
         @contextmenu="moreInfo"
       />
-      <div class="song-context-button" @click="moreInfo($event, song.id)">. . .</div>
     </div>
     <div class="pagination-buttons">
-      <button @click="firstPage" :disabled="disabledPrev" class="first"><</button>
-      <button @click="prevPage" :disabled="disabledPrev">previous</button>
+      <v-btn text @click="firstPage" :disabled="disabledPrev" class="first"><</v-btn>
+      <v-btn text @click="prevPage" :disabled="disabledPrev">previous</v-btn>
       <span>{{ page + 1 }} / {{ pages }}</span>
-      <button @click="nextPage" :disabled="disabledNext">next</button>
-      <button @click="lastPage" :disabled="disabledNext" class="last">></button>
+      <v-btn text @click="nextPage" :disabled="disabledNext">next</v-btn>
+      <v-btn text @click="lastPage" :disabled="disabledNext" class="last">></v-btn>
     </div>
     <ContextMenu
       v-if="contextMenuOpen"
@@ -121,36 +120,8 @@ export default {
 .playlist-conatiner {
   background-color: #2d2d2d;
   padding-top: 5px;
-
-  & .playlist-element {
-    display: flex;
-    flex-direction: row;
-    box-shadow: 0px 0px 2px #000000;
-    border-radius: 5px;
-    background: #2d2d2d;
-    color: white;
-    margin: 5px 5px;
-    cursor: pointer;
-
-    &:hover {
-      box-shadow: 0px 0px 3px #000000;
-    }
-
-    &:active {
-      background: #000000;
-    }
-
-    & .song {
-      width: 90%;
-    }
-    & .song-context-button {
-      width: 10%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-left: 1px solid black;
-    }
-  }
+  margin:auto;
+  width: 100%;
 
   .pagination-buttons {
     display: flex;

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>

frontend/index.html

@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Zoff</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
 </head>
+
 <body>
   <div id="app"></div>
 </body>
+
 </html>

frontend/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import vuetify from '@/plugins/vuetify' // path to vuetify export
 import router from './routes'
 import store from './store'
 
@@ -8,6 +9,7 @@ import App from './App.vue'
 Vue.use(VueRouter)
 
 new Vue({
+  vuetify,
   el: '#app',
   router,
   store,

frontend/plugins/vuetify.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+Vue.use(Vuetify)
+
+const opts = {}
+
+export default new Vuetify(opts)

frontend/store.js

@@ -9,4 +9,6 @@ const store = new Vuex.Store({
   modules: {
     playerModule
   }
-})
+})
+
+export default store;