nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

finished recommend box in the middle row

pull/25/head
NoisyBoy-9 2019-07-27 10:28:18 +04:30
parent f99bdc7e4d
commit 6635c063d8
2 changed files with 112 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
src/renderer/layouts/HomePage.vue
View File

@ -6,7 +6,7 @@
</div>
<div class="middle-row">
<div class="grow-half">
<div class="grow-half favourite">
<div class="favourite__title-container">
<legend>favourite songs</legend>
<Button variant="outlined" class="view-all">View All</Button>
@ -28,9 +28,23 @@
<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>
<h3>Rock</h3>
</div>
<div class="grow-half"></div>
<carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
<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>
</section>
@ -42,10 +56,12 @@ import MusicRow from './MusicRow'
import List from './List'
import ListItem from '../components/ListItem'
import Button from '../components/Button'
import carousel from 'vue-owl-carousel'
import MusicBox from '../components/MusicBox'
export default {
name: 'HomePage',
components: { ActionBar, MusicRow, List, ListItem, Button },
components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox },
data: () => {
return {
items: [
@ -118,12 +134,69 @@ export default {
artist: 'The Weeknd',
duration: '4:30',
artwork: '/static/demo/starboy.png'
}
// {
// id: 3,
// title: 'Tilte',
// artist: 'Juice WRLD',
// duration: '5:30',
// artwork: '/static/demo/clever.jpg'
// }
],
recommends: [
{
id: 0,
title: 'Habiba',
artist: 'Oldasinus',
artwork: '/static/demo/habiba.jpg'
},
{
id: 1,
title: 'Starboy',
artist: 'The Weeknd',
artwork: '/static/demo/starboy.png'
},
{
id: 2,
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',
duration: '5:30',
artwork: '/static/demo/clever.jpg'
}
]
@ -133,6 +206,8 @@ export default {
</script>
<style lang="sass">
@import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do&display=swap') // have to refactor this
section.page
padding: 1rem 2.5rem
overflow-x: hidden
@ -171,7 +246,7 @@ section.page
legend
font-size: 2rem
font-family: 'Roboto Slab', serif
margin: 20px 0px
margin: 15px 0px
text-transform: capitalize
.view-all
@ -183,4 +258,33 @@ section.page
display: flex
align-items: center
justify-content: center
.recommend
margin-left: 2rem
padding: 0
&__title
display: flex
align-items: center
legend
font-size: 2rem
font-family: 'Roboto Slab', serif
margin: 15px 0px 20px 0
text-transform: capitalize
h3
font-size: 1.5rem
font-weight: 200
font-family: 'Nothing You Could Do', cursive;
margin-left: 1rem
.carousel-custom
.owl-stage-outer
overflow: unset
@media(max-width: 1000px)
.middle-row
flex-wrap: wrap
.recommend
margin-left: 0
margin-top: 1.5rem
</style>