From 0b101a771ee72eee7db065807fdeb66a926905f2 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 01:31:12 +0430
Subject: [PATCH 1/6] Fixed sidebar scrollbar on 1000px break point

---
 src/renderer/layouts/DockableSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
index e99b432..c53e10b 100644
--- a/src/renderer/layouts/DockableSidebar.vue
+++ b/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

From cad77d375167c3ec548b178e00cc32e5dfb32f7d Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 18:31:18 +0430
Subject: [PATCH 2/6] Added carousel with proper sizing to homepage

---
 src/renderer/App.vue              |  2 +-
 src/renderer/layouts/HomePage.vue | 53 ++++++++++++++++++++++++++++---
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index ed67390..5c6a327 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -44,7 +44,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
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index c764a7f..6b42502 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,8 +1,12 @@
 <template>
-    <section class="page">
+    <section>
       <ActionBar />
       <div>
-        <MusicBox v-for="item in top" :key="item.id" :item="item" />
+        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5]]">
+          <Slide v-for="item in top" :key="item.id">
+            <MusicBox  :item="item" />
+          </Slide>
+        </Carousel>
       </div>
     </section>
 </template>
@@ -10,9 +14,10 @@
 <script>
 import ActionBar from './ActionBar'
 import MusicBox from '../components/MusicBox'
+import { Carousel, Slide } from 'vue-carousel'
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicBox },
+  components: { ActionBar, MusicBox, Carousel, Slide },
   data: () => {
     return {
       top: [
@@ -33,6 +38,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 +81,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>

From 0454d51eb76cc2127bb62ec06d38ab22b7cf6374 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 18:43:33 +0430
Subject: [PATCH 3/6] Started MusicRow layout top to items for demo

---
 src/renderer/components/MusicBox.vue |  4 ++--
 src/renderer/layouts/HomePage.vue    | 13 ++++---------
 src/renderer/layouts/MusicRow.vue    | 23 +++++++++++++++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 src/renderer/layouts/MusicRow.vue

diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue
index 9d9c942..13bc03d 100644
--- a/src/renderer/components/MusicBox.vue
+++ b/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%
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 6b42502..83a90cc 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -2,25 +2,20 @@
     <section>
       <ActionBar />
       <div>
-        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5]]">
-          <Slide v-for="item in top" :key="item.id">
-            <MusicBox  :item="item" />
-          </Slide>
-        </Carousel>
+        <MusicRow :items='items' />
       </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
-import MusicBox from '../components/MusicBox'
-import { Carousel, Slide } from 'vue-carousel'
+import MusicRow from './MusicRow'
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicBox, Carousel, Slide },
+  components: { ActionBar, MusicRow },
   data: () => {
     return {
-      top: [
+      items: [
         {
           id: 0,
           title: 'Habiba',
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
new file mode 100644
index 0000000..61d8373
--- /dev/null
+++ b/src/renderer/layouts/MusicRow.vue
@@ -0,0 +1,23 @@
+<template>
+    <section>
+        <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>
+
+</style>

From 516e283cb4d4926ca244c9d63405f0baccd6b3d9 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 18:46:35 +0430
Subject: [PATCH 4/6] Added title to MusicRow

---
 src/renderer/layouts/MusicRow.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index 61d8373..881e1bc 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -1,5 +1,6 @@
 <template>
     <section>
+        <h1>Top music of the month</h1>
         <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" />
@@ -18,6 +19,8 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped lang="sass">
+section
+    h1
+        margin: 20px 0px
 </style>

From 11cefcb63e93cc09ff975b4bbaa5663aa32fc1a4 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 19:01:00 +0430
Subject: [PATCH 5/6] Added roboto-slab-fontface-kit and adjusted MusicRow
 title

---
 package-lock.json                 | 5 +++++
 package.json                      | 1 +
 src/renderer/App.vue              | 2 ++
 src/renderer/layouts/MusicRow.vue | 7 +++++--
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 70b2d57..8db4fa3 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index df6206a..6604936 100644
--- a/package.json
+++ b/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",
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 5c6a327..4b1d3f4 100644
--- a/src/renderer/App.vue
+++ b/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'
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
index 881e1bc..b36a639 100644
--- a/src/renderer/layouts/MusicRow.vue
+++ b/src/renderer/layouts/MusicRow.vue
@@ -1,6 +1,6 @@
 <template>
     <section>
-        <h1>Top music of the month</h1>
+        <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" />
@@ -20,7 +20,10 @@ export default {
 </script>
 
 <style scoped lang="sass">
+
 section
-    h1
+    legend
+        font-size: 2rem
+        font-family: 'Roboto Slab', serif        
         margin: 20px 0px
 </style>

From 2046cd32616e285401b649ee25eeab1bd6218329 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Wed, 24 Jul 2019 19:26:37 +0430
Subject: [PATCH 6/6] Added baseline for playerbar and added commented code for
 borderless/titlebarless window

---
 src/main/index.js                  | 3 +++
 src/renderer/layouts/PlayerBar.vue | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/main/index.js b/src/main/index.js
index 00304c5..1b34615 100644
--- a/src/main/index.js
+++ b/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)
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 0981714..96a1d37 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/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>