SOme vuetify things

config/webpack.config.common.js

@@ -29,7 +29,7 @@ const webpackConfig = function(isDev) {
           loader: "babel-loader",
           include: [helpers.root("frontend")]
         },
-        {
+        /*{
           test: /\.css$/,
           use: [
             isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
@@ -51,7 +51,31 @@ const webpackConfig = function(isDev) {
             { loader: "css-loader", options: { sourceMap: isDev } },
             { loader: "sass-loader", options: { sourceMap: isDev } }
           ]
-        }
+        },*/
+        {
+          test: /\.s(c|a)ss$/,
+          use: [
+            'vue-style-loader',
+            'css-loader',
+            {
+              loader: 'sass-loader',
+              // Requires sass-loader@^7.0.0
+              options: {
+                implementation: require('sass'),
+                fiber: require('fibers'),
+                indentedSyntax: true // optional
+              },
+              // Requires sass-loader@^8.0.0
+              options: {
+                implementation: require('sass'),
+                sassOptions: {
+                  fiber: require('fibers'),
+                  indentedSyntax: true // optional
+                },
+              },
+            },
+          ],
+        },
       ]
     },
     plugins: [new VueLoaderPlugin()]

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,9 +1,15 @@
 <template>
-    <div class="chat-input">
+  <v-row>
-        <input v-model="chatInput" type="text" placeholder="Aa.." @keyup.enter="send" />
+    <v-col cols="9">
-        <button @click="send">Send</button>
+      <v-text-field v-model="chatInput" label="Aa.." @keyup.enter="send"></v-text-field>
-        <button @click="requestHelp">Help</button>
+    </v-col>
-    </div>
+    <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>
@@ -11,11 +17,11 @@ export default {
   data() {
     return {
       chatInput: ""
-        }
+    };
   },
   methods: {
     send: function() {
-            if(this.chatInput == "") {
+      if (this.chatInput == "") {
         return;
       }
       this.$emit("sentMessage", this.chatInput);
@@ -25,9 +31,8 @@ export default {
       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>
+      <v-btn text @click="firstPage" :disabled="disabledPrev" class="first"><</v-btn>
-      <button @click="prevPage" :disabled="disabledPrev">previous</button>
+      <v-btn text @click="prevPage" :disabled="disabledPrev">previous</v-btn>
       <span>{{ page + 1 }} / {{ pages }}</span>
-      <button @click="nextPage" :disabled="disabledNext">next</button>
+      <v-btn text @click="nextPage" :disabled="disabledNext">next</v-btn>
-      <button @click="lastPage" :disabled="disabledNext" class="last">></button>
+      <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;
-
+  margin:auto;
-  & .playlist-element {
+  width: 100%;
-    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;
-    }
-  }
 
   .pagination-buttons {
     display: flex;

frontend/components/playlist/Song.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="song-container">
+  <v-card
-    <div
+    class="mx-auto song-element"
-      class="song-voteable-container"
     @click="clickedSong"
     @contextmenu="$emit('contextmenu', $event, id)"
   >
-      <div class="song-thumbnail">
+    <v-img class="white--text align-end song-image" :src="thumbnail"></v-img>
-        <img :src="thumbnail" :alt="title" />
+
-        <span class="song-duration">{{ durationInString }}</span>
+    <v-card-text class="text--primary text-truncate text-no-wrap song-title">
-      </div>
+      <div class="text-truncate-inner">{{ title }}</div>
-      <div class="song-info">
+
-        <div class="song-title">{{ title }}</div>
+      <div>{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
-        <div class="song-votes">{{ votes }} vote{{votes > 1 || votes == 0 ? "s" : null }}</div>
+    </v-card-text>
-      </div>
+    <div class="more-info-button" @click="$emit('contextmenu', $event, id)">. . .</div>
-    </div>
+  </v-card>
-  </div>
 </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 {
+  & .song-context-button {
-    width: 75%;
+    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

@@ -10,3 +10,5 @@ const store = new Vuex.Store({
     playerModule
   }
 })
+
+export default store;

package-lock.json

@@ -2481,15 +2481,14 @@
       "integrity": "sha1-4+JbIHrE5wGvch4staFnksrD3Fg="
     },
     "clone-deep": {
-      "version": "2.0.2",
+      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
       "dev": true,
       "requires": {
-        "for-own": "^1.0.0",
         "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.0",
+        "kind-of": "^6.0.2",
-        "shallow-clone": "^1.0.0"
+        "shallow-clone": "^3.0.0"
       }
     },
     "cloneable-readable": {
@@ -3932,6 +3931,12 @@
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
       "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
     "default-compare": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-compare/-/default-compare-1.0.0.tgz",
@@ -4971,6 +4976,15 @@
       "resolved": "https://registry.npmjs.org/feature-policy/-/feature-policy-0.2.0.tgz",
       "integrity": "sha512-2hGrlv6efG4hscYVZeaYjpzpT6I2OZgYqE2yDUzeAcKj2D1SH0AsEzqJNXzdoglEddcIXQQYop3lD97XpG75Jw=="
     },
+    "fibers": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/fibers/-/fibers-4.0.2.tgz",
+      "integrity": "sha512-FhICi1K4WZh9D6NC18fh2ODF3EWy1z0gzIdV9P7+s2pRjfRBnCkMDJ6x3bV1DkVymKH8HGrQa/FNOBjYvnJ/tQ==",
+      "dev": true,
+      "requires": {
+        "detect-libc": "^1.0.3"
+      }
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -7753,12 +7767,6 @@
       "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
       "dev": true
     },
-    "lodash.tail": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
-      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=",
-      "dev": true
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -8217,24 +8225,6 @@
         }
       }
     },
-    "mixin-object": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
-      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
-      "dev": true,
-      "requires": {
-        "for-in": "^0.1.3",
-        "is-extendable": "^0.1.1"
-      },
-      "dependencies": {
-        "for-in": {
-          "version": "0.1.8",
-          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
-          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=",
-          "dev": true
-        }
-      }
-    },
     "mkdirp": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -11042,6 +11032,15 @@
         "sparse-bitfield": "^3.0.3"
       }
     },
+    "sass": {
+      "version": "1.23.6",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.23.6.tgz",
+      "integrity": "sha512-awBvj9xrAuiS2TOCcYSUGCmaBV3UW6fVSK4oJ2LHS8IRfnRLc5EJihw90C7ZJ/skcEwFGSf9/XO5NlMiKupBCg==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
     "sass-graph": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
@@ -11055,23 +11054,28 @@
       }
     },
     "sass-loader": {
-      "version": "7.1.0",
+      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-7.3.1.tgz",
-      "integrity": "sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==",
+      "integrity": "sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==",
       "dev": true,
       "requires": {
-        "clone-deep": "^2.0.1",
+        "clone-deep": "^4.0.1",
         "loader-utils": "^1.0.1",
-        "lodash.tail": "^4.1.1",
         "neo-async": "^2.5.0",
-        "pify": "^3.0.0",
+        "pify": "^4.0.1",
-        "semver": "^5.5.0"
+        "semver": "^6.3.0"
       },
       "dependencies": {
         "pify": {
-          "version": "3.0.0",
+          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "dev": true
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
         }
       }
@@ -11253,22 +11257,12 @@
       }
     },
     "shallow-clone": {
-      "version": "1.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-      "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
       "dev": true,
       "requires": {
-        "is-extendable": "^0.1.1",
+        "kind-of": "^6.0.2"
-        "kind-of": "^5.0.0",
-        "mixin-object": "^2.0.1"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
-        }
       }
     },
     "shebang-command": {
@@ -13385,6 +13379,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuetify": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.1.10.tgz",
+      "integrity": "sha512-hFc6XNYc2YE3HisxCH5VezRFtGQ2RwTvBy7eN+b67UuiGIhvEUR9h3uO4NUuulmvKPKJ4rONN+L9sVszgMBlJQ=="
+    },
     "vuex": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",

package.json

@@ -21,10 +21,6 @@
     "url": "https://github.com/zoff-music/zoff/issues"
   },
   "devDependencies": {
-    "cross-env": "~5.2",
-    "gulp": "^4.0.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-uglify": "^3.0.2",
     "@babel/core": "~7.2",
     "@babel/plugin-proposal-class-properties": "~7.3",
     "@babel/plugin-proposal-decorators": "~7.3",
@@ -34,13 +30,20 @@
     "@babel/preset-env": "~7.3",
     "babel-loader": "~8.0",
     "compression-webpack-plugin": "~2.0",
+    "cross-env": "~5.2",
     "css-loader": "~0.28",
+    "deepmerge": "^4.2.2",
+    "fibers": "^4.0.2",
     "friendly-errors-webpack-plugin": "~1.7",
+    "gulp": "^4.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-uglify": "^3.0.2",
     "html-webpack-plugin": "~3.2",
     "mini-css-extract-plugin": "~0.5",
     "node-sass": "~4.11",
     "optimize-css-assets-webpack-plugin": "~3.2",
-    "sass-loader": "~7.1",
+    "sass": "^1.23.6",
+    "sass-loader": "^7.3.1",
     "uglifyjs-webpack-plugin": "~1.2",
     "vue-loader": "~15.6",
     "vue-style-loader": "~4.1",
@@ -92,6 +95,7 @@
     "uniqid": "5.0.3",
     "vue": "~2.6",
     "vue-router": "~3.0",
+    "vuetify": "^2.1.10",
     "vuex": "^3.1.2"
   }
 }