From 625233036a3c57e84db773170e9826c5ad80c3d4 Mon Sep 17 00:00:00 2001 From: Nikan Dalvand Date: Mon, 29 Jul 2019 23:40:16 +0430 Subject: [PATCH 1/5] Created HorizontalScrollPlugin --- src/renderer/utility/HorizontalScrollPlugin.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/renderer/utility/HorizontalScrollPlugin.js diff --git a/src/renderer/utility/HorizontalScrollPlugin.js b/src/renderer/utility/HorizontalScrollPlugin.js new file mode 100644 index 0000000..b9043b4 --- /dev/null +++ b/src/renderer/utility/HorizontalScrollPlugin.js @@ -0,0 +1,16 @@ +import Scrollbar from 'smooth-scrollbar' + +export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { + static pluginName = 'horizontalScroll'; + transformDelta (delta, fromEvent) { + if (!/wheel/.test(fromEvent.type)) { + return delta + } + // @see: https://github.com/idiotWu/smooth-scrollbar/issues/181 + const { x, y } = delta + return { + y: 0, + x: Math.abs(x) > Math.abs(y) ? x : y + } + } +} From 1c464288eeed2b279af179d87ae5e9a5f9bbaa2b Mon Sep 17 00:00:00 2001 From: Nikan Dalvand Date: Mon, 29 Jul 2019 23:55:01 +0430 Subject: [PATCH 2/5] Moving out of owl carousel and going for a custom scrollbar mechanism --- src/renderer/layouts/HomePage.vue | 5 ----- src/renderer/layouts/MusicRow.vue | 22 +++++++++++++------ .../utility/HorizontalScrollPlugin.js | 3 +++ 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue index 024cedd..61e3d28 100644 --- a/src/renderer/layouts/HomePage.vue +++ b/src/renderer/layouts/HomePage.vue @@ -333,11 +333,6 @@ section.page font-size: 1.5rem font-weight: 200 margin-left: 1rem - .carousel-custom - &.half - width: 0rem - .owl-stage-outer - overflow: unset @media(max-width: 1000px) .middle-row diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue index 57a28ab..13cc122 100644 --- a/src/renderer/layouts/MusicRow.vue +++ b/src/renderer/layouts/MusicRow.vue @@ -1,20 +1,27 @@ @@ -26,7 +33,8 @@ section.music-row font-family: 'Roboto Slab', serif margin: 20px 0px white-space: nowrap - .carousel-custom - .owl-stage-outer - overflow: unset + .items + overflow: visible !important + .scroll-content + display: flex diff --git a/src/renderer/utility/HorizontalScrollPlugin.js b/src/renderer/utility/HorizontalScrollPlugin.js index b9043b4..7c96166 100644 --- a/src/renderer/utility/HorizontalScrollPlugin.js +++ b/src/renderer/utility/HorizontalScrollPlugin.js @@ -7,6 +7,9 @@ export default class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin { return delta } // @see: https://github.com/idiotWu/smooth-scrollbar/issues/181 + if (!this.scrollbar.options.horizontal) { + return + } const { x, y } = delta return { y: 0, From e4e7ddbfcacdc42649203e6cb0b4c7e82eb258de Mon Sep 17 00:00:00 2001 From: Nikan Dalvand Date: Mon, 29 Jul 2019 23:56:23 +0430 Subject: [PATCH 3/5] Fixed MusicBox Sizing --- src/renderer/components/MusicBox.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue index dc64162..307b21e 100644 --- a/src/renderer/components/MusicBox.vue +++ b/src/renderer/components/MusicBox.vue @@ -25,6 +25,7 @@ export default {