Merge pull request #16 from nikandlv/development

MusicBox and MusicRow update

package-lock.json

@@ -14231,6 +14231,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "roboto-slab-fontface-kit": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/roboto-slab-fontface-kit/-/roboto-slab-fontface-kit-1.0.2.tgz",
+      "integrity": "sha512-EdwkOvb6+D7ENrnjs1JzuHQHbeeEuQpddtbYqHzjl+c4dE2Vep0Jh5CHkpQkAhj+nELrXEUikzDayvIn2xzNNA=="
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",

package.json

@@ -59,6 +59,7 @@
     "axios": "^0.18.0",
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",
+    "roboto-slab-fontface-kit": "^1.0.2",
     "vue": "^2.5.16",
     "vue-carousel": "^0.18.0",
     "vue-custom-scrollbar": "^1.1.0",

src/main/index.js

@@ -25,6 +25,9 @@ function createWindow () {
     width: 1000,
     minHeight:600,
     minWidth:400,
+    //frame: false,
+    //titleBarStyle: 'hidden',
+    //titleBarStyle: 'customButtonsOnHover', 
   })
 
   mainWindow.loadURL(winURL)

src/renderer/App.vue

@@ -21,6 +21,8 @@ export default {
 <style lang="sass">
 @import 'normalize-scss'
 @import 'lato-font/scss/_public-api.scss'
+$FontPath: '/node_modules/roboto-slab-fontface-kit/fonts'
+@import 'roboto-slab-fontface-kit/roboto-slab.scss'
 @include normalize()
  
 $lato-font-path: '/node_modules/lato-font/fonts'
@@ -44,7 +46,7 @@ $lato-font-path: '/node_modules/lato-font/fonts'
 
   .page
     flex-grow: 1
-    overflow: auto
+    overflow-x: hidden
     transition: padding-top 300ms
 @media(max-width: 800px)
   .page

src/renderer/components/MusicBox.vue

@@ -15,7 +15,7 @@ export default {
     onLoad () {
       let img = this.$el.getElementsByTagName('img')[0]
       color(img.src, {format: 'rgb'}, (_, color) => {
-        img.style['boxShadow'] = `0px 10px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60)`
+        img.style['boxShadow'] = `0px 5px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60),0px 10px 40px 4px rgba(${color[0]},${color[1]},${color[2]},0.40)`
       })
     }
   }
@@ -24,7 +24,7 @@ export default {
 
 <style scoped lang="sass">
 div.music-box
-    width: 150px
+    width: 140px
     img
         border-radius: 4px
         width: 100%

src/renderer/layouts/DockableSidebar.vue

@@ -220,7 +220,7 @@ section.sidebar
 @media(max-width: 1000px)
     section.sidebar
         width: 200px
-        overflow-y: auto
+        overflow-y: hidden
         padding: 1rem 0rem 0rem 1rem
 @media(max-width: 800px)
     section.sidebar

src/renderer/layouts/HomePage.vue

@@ -1,21 +1,21 @@
 <template>
-    <section class="page">
+    <section>
       <ActionBar />
       <div>
-        <MusicBox v-for="item in top" :key="item.id" :item="item" />
+        <MusicRow :items='items' />
       </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
-import MusicBox from '../components/MusicBox'
+import MusicRow from './MusicRow'
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicBox },
+  components: { ActionBar, MusicRow },
   data: () => {
     return {
-      top: [
+      items: [
         {
           id: 0,
           title: 'Habiba',
@@ -33,6 +33,42 @@ export default {
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 3,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 4,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 5,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 6,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 7,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 8,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
         }
       ]
     }
@@ -40,8 +76,10 @@ export default {
 }
 </script>
 
-<style scoped lang="sass">
+<style lang="sass">
 section.page
     padding: 1rem 2.5rem
-
+    overflow-x: hidden
+    .VueCarousel-wrapper
+        overflow: unset
 </style>

src/renderer/layouts/MusicRow.vue

@@ -0,0 +1,29 @@
+<template>
+    <section>
+        <legend>Top music of the month</legend>
+        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
+          <Slide v-for="item in items" :key="item.id">
+            <MusicBox  :item="item" />
+          </Slide>
+        </Carousel>
+    </section>
+</template>
+
+<script>
+import { Carousel, Slide } from 'vue-carousel'
+import MusicBox from '../components/MusicBox'
+export default {
+  name: 'MusicRow',
+  props: ['items'],
+  components: { MusicBox, Carousel, Slide }
+}
+</script>
+
+<style scoped lang="sass">
+
+section
+    legend
+        font-size: 2rem
+        font-family: 'Roboto Slab', serif        
+        margin: 20px 0px
+</style>

src/renderer/layouts/PlayerBar.vue

@@ -12,5 +12,7 @@ export default {
 
 <style lang="sass" scoped>
 section
-    height: 3rem
+    display: flex
+    border-top: 1px solid rgba(0,0,0,0.1)
+    height: 4.5rem
 </style>