Removed vue-custom-scrollbar and added smooth-scrollbar instead and implemented it for sidebar and homepage
Nikan Dalvand
parent
1d40f6779b
commit
c0de57da6c
|
|
@ -4282,8 +4282,7 @@
|
|||
"core-js": {
|
||||
"version": "2.6.9",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
|
||||
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -10152,6 +10151,11 @@
|
|||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
|
||||
"integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
|
||||
},
|
||||
"lodash-es": {
|
||||
"version": "4.17.15",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
|
||||
"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
|
||||
},
|
||||
"lodash._arraycopy": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
|
||||
|
|
@ -14678,6 +14682,16 @@
|
|||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"smooth-scrollbar": {
|
||||
"version": "8.4.0",
|
||||
"resolved": "https://registry.npmjs.org/smooth-scrollbar/-/smooth-scrollbar-8.4.0.tgz",
|
||||
"integrity": "sha512-ROKPDABrNcCpiR7grzyRMykYtWSP7qyX59Ka/fcSPRYcixYPZhzW5mkg6EuAHMBvvVc9iHst7mOnnuM0+C/kBQ==",
|
||||
"requires": {
|
||||
"core-js": "^2.6.5",
|
||||
"lodash-es": "^4.17.11",
|
||||
"tslib": "^1.9.3"
|
||||
}
|
||||
},
|
||||
"smtp-connection": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-2.12.0.tgz",
|
||||
|
|
@ -16148,8 +16162,7 @@
|
|||
"tslib": {
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
|
||||
},
|
||||
"tsscmp": {
|
||||
"version": "1.0.6",
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@
|
|||
"dominant-color": "0.0.1",
|
||||
"normalize-scss": "^7.0.1",
|
||||
"roboto-slab-fontface-kit": "^1.0.2",
|
||||
"smooth-scrollbar": "^8.4.0",
|
||||
"vue": "^2.5.16",
|
||||
"vue-custom-scrollbar": "^1.1.0",
|
||||
"vue-electron": "^1.0.6",
|
||||
|
|
|
|||
|
|
@ -17,8 +17,7 @@
|
|||
<Logo :nopadding="true"/>
|
||||
</section>
|
||||
<section class="overlay" :class="{'open': menuStatus === true}" @click="toggleMenuStatus" />
|
||||
<section >
|
||||
<vue-custom-scrollbar class="sidebar" :class="{'open': menuStatus === true}" :settings="settings">
|
||||
<section class="sidebar" :class="{'open': menuStatus === true}">
|
||||
<div class="logo-wrapper">
|
||||
<Logo class="logo" />
|
||||
</div>
|
||||
|
|
@ -116,8 +115,7 @@
|
|||
Version {{version}}
|
||||
</MenuItem>
|
||||
</MenuGroup>
|
||||
</vue-custom-scrollbar>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -128,13 +126,16 @@ import projectPackage from '~/package.json'
|
|||
import Logo from '../components/Logo'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import Button from '../components/Button'
|
||||
import vueCustomScrollbar from 'vue-custom-scrollbar'
|
||||
|
||||
import Scrollbar from 'smooth-scrollbar'
|
||||
export default {
|
||||
name: 'DockableSidebar',
|
||||
components: { MenuGroup, MenuItem, Logo, Button, vueCustomScrollbar },
|
||||
components: { MenuGroup, MenuItem, Logo, Button },
|
||||
data: () => {
|
||||
return { version: projectPackage.version, settings: { maxScrollbarLength: 60, swipeEasing: true, wheelSpeed: 0.5 } }
|
||||
return { version: projectPackage.version }
|
||||
},
|
||||
mounted () {
|
||||
let container = this.$el.getElementsByClassName('sidebar')[0]
|
||||
Scrollbar.init(container)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['toggleMenuStatus'])
|
||||
|
|
@ -143,7 +144,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
<style lang="sass">
|
||||
section.handle
|
||||
position: absolute
|
||||
left: 0
|
||||
|
|
@ -198,6 +199,9 @@ section.sidebar
|
|||
flex-direction: column
|
||||
overflow-y: hidden
|
||||
transition: width 300ms,transform 300ms,padding 500ms
|
||||
.scroll-content
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.logo-wrapper
|
||||
min-height: 48px
|
||||
.icon
|
||||
|
|
|
|||
|
|
@ -1,63 +1,63 @@
|
|||
<template>
|
||||
<section>
|
||||
<ActionBar class="action-bar" />
|
||||
<div class="upper-row">
|
||||
<MusicRow :items='items' />
|
||||
</div>
|
||||
|
||||
<div class="middle-row">
|
||||
<div class="grow-half favourite">
|
||||
<div class="favourite__title-container">
|
||||
<legend>favourite songs</legend>
|
||||
<Button variant="outlined" class="view-all">View All</Button>
|
||||
</div>
|
||||
|
||||
<div class="favourite__list-header">
|
||||
<span class="song">
|
||||
<p>songs</p>
|
||||
</span>
|
||||
|
||||
<span class="artist">
|
||||
<p>artist</p>
|
||||
</span>
|
||||
|
||||
<span class="duration">
|
||||
<p>duration</p>
|
||||
</span>
|
||||
</div>
|
||||
<List >
|
||||
<ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
|
||||
</List>
|
||||
</div> <!-- favourite box-->
|
||||
|
||||
<div class="grow-half recommend" >
|
||||
<div class="recommend__title">
|
||||
<legend>Recommended For You</legend>
|
||||
</div>
|
||||
|
||||
<carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
|
||||
<MusicBox v-for="item in items" :key="item.id" :item="item" />
|
||||
</carousel>
|
||||
|
||||
<!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
|
||||
<MusicBox v-for="item in items" :key="item.id" :item="item" />
|
||||
</carousel> -->
|
||||
|
||||
</div> <!-- recommended box -->
|
||||
</div>
|
||||
|
||||
<div class="lower-row">
|
||||
<div class="genre">
|
||||
<div class="genre__title">
|
||||
<legend>top geners</legend>
|
||||
</div>
|
||||
|
||||
<carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
|
||||
<MusicBox v-for="genere in geners" :key="genere.id" :item="genere" />
|
||||
</carousel>
|
||||
<section class="wtf">
|
||||
<ActionBar class="action-bar" />
|
||||
<div class="upper-row">
|
||||
<MusicRow :items='items' />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="middle-row">
|
||||
<div class="grow-half favourite">
|
||||
<div class="favourite__title-container">
|
||||
<legend>favourite songs</legend>
|
||||
<Button variant="outlined" class="view-all">View All</Button>
|
||||
</div>
|
||||
|
||||
<div class="favourite__list-header">
|
||||
<span class="song">
|
||||
<p>songs</p>
|
||||
</span>
|
||||
|
||||
<span class="artist">
|
||||
<p>artist</p>
|
||||
</span>
|
||||
|
||||
<span class="duration">
|
||||
<p>duration</p>
|
||||
</span>
|
||||
</div>
|
||||
<List >
|
||||
<ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
|
||||
</List>
|
||||
</div> <!-- favourite box-->
|
||||
|
||||
<div class="grow-half recommend" >
|
||||
<div class="recommend__title">
|
||||
<legend>Recommended For You</legend>
|
||||
</div>
|
||||
|
||||
<carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
|
||||
<MusicBox v-for="item in items" :key="item.id" :item="item" />
|
||||
</carousel>
|
||||
|
||||
<!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
|
||||
<MusicBox v-for="item in items" :key="item.id" :item="item" />
|
||||
</carousel> -->
|
||||
|
||||
</div> <!-- recommended box -->
|
||||
</div>
|
||||
|
||||
<div class="lower-row">
|
||||
<div class="genre">
|
||||
<div class="genre__title">
|
||||
<legend>top geners</legend>
|
||||
</div>
|
||||
|
||||
<carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
|
||||
<MusicBox v-for="genere in geners" :key="genere.id" :item="genere" />
|
||||
</carousel>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -68,10 +68,15 @@ import ListItem from '../components/ListItem'
|
|||
import Button from '../components/Button'
|
||||
import carousel from 'vue-owl-carousel'
|
||||
import MusicBox from '../components/MusicBox'
|
||||
import Scrollbar from 'smooth-scrollbar'
|
||||
|
||||
export default {
|
||||
name: 'HomePage',
|
||||
components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox },
|
||||
mounted () {
|
||||
let container = this.$el
|
||||
Scrollbar.init(container)
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
items: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue