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

Merge pull request #25 from nikandlv/development 

Homepage update
master
Nikan Dalvand 2019-07-27 23:58:03 +04:30 committed by GitHub
parent dc861a2d18 1f3002872b
commit deb55f5d4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 115 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/App.vue
View File

@ -26,7 +26,7 @@ $FontPath: '/node_modules/roboto-slab-fontface-kit/fonts'
@include normalize()
$lato-font-path: '/node_modules/lato-font/fonts'
@include lato-include-font('normal')

2
src/renderer/components/ListItem.vue
View File

@ -44,7 +44,7 @@ li
margin-bottom: .6rem
padding: .4rem .8rem
border-radius: .5rem
box-sizing: border-box
&.active
background-color: #0076F9
color: white

122
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,22 @@
<List >
<ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
</List>
</div>
</div> <!-- favourite box-->
<div class="grow-half"></div>
<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>
</section>
@ -42,10 +55,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 +133,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'
}
]
@ -137,7 +209,7 @@ section.page
padding: 1rem 2.5rem
overflow-x: hidden
.VueCarousel-wrapper
overflow: unset
overflow: unset
.middle-row
display: flex
@ -146,12 +218,14 @@ section.page
flex: 1 0 50% // deviding the space equally between two element
.favourite
background: white
z-index: 10
&__list-header
width: 100%
padding: 0.3rem .6rem
padding: 0.3rem 1.6rem
box-sizing: border-box
display: flex
justify-content: space-between
span.song
flex: 1 0 50%
span.artist
@ -171,7 +245,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 +257,34 @@ 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
margin-left: 1rem
.carousel-custom
&.half
width: 0rem
.owl-stage-outer
overflow: unset
@media(max-width: 1000px)
.middle-row
flex-wrap: wrap
.recommend
margin-left: 0
margin-top: 1.5rem
</style>