Merge pull request #54 from nikandlv/development

Carousel and bug fix update

src/renderer/components/Carousel.vue

@@ -6,7 +6,7 @@
     </div>
 
     <div class="navigation__container">
-      <span class="navigation__left" @click="carouselBackward">
+      <span class="navigation__left" @scroll="carouselBackward" @click="carouselBackward">
         <svg class="navigation__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
             <g>
                 <path d="m88.6,121.3c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-51-51 51-51c1.6-1.6 1.6-4.2 0-5.8s-4.2-1.6-5.8,0l-54,53.9c-1.6,1.6-1.6,4.2 0,5.8l54,53.9z"/>

src/renderer/components/MenuItem.vue

@@ -17,7 +17,6 @@ export default {
   props: ['to', 'faded', 'click'],
   computed: {
     onClick () {
-      console.log(this.click)
       return this.click || (() => {})
     }
   }

src/renderer/layouts/DockableSidebar.vue

@@ -150,7 +150,6 @@ export default {
       this.aboutOpen = true
     },
     closeAbout () {
-      console.log('close')
       this.aboutOpen = false
     }
   },

src/renderer/layouts/HomePage.vue

@@ -154,91 +154,91 @@ export default {
           artwork: '/static/demo/clever.jpg'
         },
         {
-          id: 0,
+          id: 16,
           title: 'Habiba',
           artist: 'Oldasinus',
           artwork: '/static/demo/habiba.jpg'
         },
         {
-          id: 1,
+          id: 17,
           title: 'Starboy',
           artist: 'The Weeknd',
           artwork: '/static/demo/starboy.png'
         },
         {
-          id: 2,
+          id: 18,
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
         },
         {
-          id: 3,
+          id: 19,
           title: 'Habiba',
           artist: 'Oldasinus',
           artwork: '/static/demo/habiba.jpg'
         },
         {
-          id: 4,
+          id: 20,
           title: 'Starboy',
           artist: 'The Weeknd',
           artwork: '/static/demo/starboy.png'
         },
         {
-          id: 5,
+          id: 21,
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
         },
         {
-          id: 6,
+          id: 22,
           title: 'Habiba',
           artist: 'Oldasinus',
           artwork: '/static/demo/habiba.jpg'
         },
         {
-          id: 7,
+          id: 23,
           title: 'Starboy',
           artist: 'The Weeknd',
           artwork: '/static/demo/starboy.png'
         },
         {
-          id: 8,
+          id: 24,
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
         },
         {
-          id: 9,
+          id: 25,
           title: 'Habiba',
           artist: 'Oldasinus',
           artwork: '/static/demo/habiba.jpg'
         },
         {
-          id: 10,
+          id: 26,
           title: 'Starboy',
           artist: 'The Weeknd',
           artwork: '/static/demo/starboy.png'
         },
         {
-          id: 12,
+          id: 27,
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
         },
         {
-          id: 13,
+          id: 28,
           title: 'Habiba',
           artist: 'Oldasinus',
           artwork: '/static/demo/habiba.jpg'
         },
         {
-          id: 14,
+          id: 29,
           title: 'Starboy',
           artist: 'The Weeknd',
           artwork: '/static/demo/starboy.png'
         },
         {
-          id: 15,
+          id: 30,
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
@@ -259,13 +259,6 @@ export default {
           duration: '4:30',
           artwork: '/static/demo/starboy.png'
         }
-        // {
-        //   id: 3,
-        //   title: 'Tilte',
-        //   artist: 'Juice WRLD',
-        //   duration: '5:30',
-        //   artwork: '/static/demo/clever.jpg'
-        // }
       ],
 
       recommends: [
@@ -378,6 +371,114 @@ export default {
           title: 'Tilte',
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 9,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 10,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 11,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 12,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 13,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 14,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 15,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 16,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 17,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 18,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 19,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 20,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 21,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 22,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 23,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 24,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 25,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 26,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
         }
       ]
     }

src/renderer/layouts/MusicRow.vue

@@ -9,19 +9,12 @@
 
 <script>
 import MusicBox from '../components/MusicBox'
-import Scrollbar from 'smooth-scrollbar'
-import HorizontalScrollPlugin from '../utility/HorizontalScrollPlugin'
 import Carousel from '../components/Carousel'
-Scrollbar.use(HorizontalScrollPlugin)
 
 export default {
   name: 'MusicRow',
   props: ['items', 'title'],
   components: { MusicBox, Carousel },
-  mounted () {
-    let container = this.$el.getElementsByClassName('items')[0]
-    Scrollbar.init(container, { overscrollEffect: 'bounce', continuousScrolling: true, horizontal: true })
-  }
 }
 </script>
 

src/renderer/layouts/PlayerBar.vue

@@ -313,8 +313,12 @@ section.fullscreen
   top: 0
   background-color: white
   z-index: 1400
-  transition: transform 500ms ease-out
+  transition: opacity 500ms ease
-  transform: translate3d(0,+100%,0)
+  //transform: translate3d(0,+100%,0)
+  opacity: 0
+  pointer-events: none
   &.active
-    transform: translate3d(0,0%,0)
+    opacity: 1
+    pointer-events: all
+    //transform: translate3d(0,0%,0)
 </style>