Merge pull request #54 from nikandlv/development

Carousel and bug fix update
master
Nikan Dalvand 2019-08-17 23:38:25 -07:00 committed by GitHub
commit fe1464478f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 131 additions and 35 deletions

View File

@ -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"/>

View File

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

View File

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

View File

@ -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'
}
]
}

View File

@ -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>

View File

@ -313,8 +313,12 @@ section.fullscreen
top: 0
background-color: white
z-index: 1400
transition: transform 500ms ease-out
transform: translate3d(0,+100%,0)
transition: opacity 500ms ease
//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>