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

Standardize the MusicRow

pull/31/head
Nikan Dalvand 2019-07-29 22:22:45 +04:30
parent 336ee60a39
commit b29d50edfd
2 changed files with 7 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<template> <template>
<section class="wtf"> <section class="wtf">
<ActionBar class="action-bar" /> <ActionBar class="action-bar" />
<div class="upper-row"> <div class="upper-row" >
<MusicRow :items='items' /> <MusicRow :items='items' title="Top rated" />
</div> </div>
<div class="middle-row"> <div class="middle-row">
@ -31,30 +31,13 @@
</div> <!-- favourite box--> </div> <!-- favourite box-->
<div class="grow-half recommend" > <div class="grow-half recommend" >
<div class="recommend__title"> <MusicRow :items='items' title="Recommended for you" class="carousel-custom half" />
<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> <!-- recommended box -->
</div> </div>
<div class="lower-row"> <div class="lower-row">
<div class="genre"> <div class="genre">
<div class="genre__title"> <MusicRow :items='geners' title="Top genres" class="carousel-custom half" />
<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>
</div> </div>
</section> </section>

5
src/renderer/layouts/MusicRow.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<section class="music-row"> <section class="music-row">
<legend>Top Rated</legend> <legend>{{title}}</legend>
<carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom"> <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
<MusicBox v-for="item in items" :key="item.id" :item="item" /> <MusicBox v-for="item in items" :key="item.id" :item="item" />
</carousel> </carousel>
@ -13,7 +13,7 @@ import carousel from 'vue-owl-carousel'
export default { export default {
name: 'MusicRow', name: 'MusicRow',
props: ['items'], props: ['items', 'title'],
components: { MusicBox, carousel } components: { MusicBox, carousel }
} }
</script> </script>
@ -25,6 +25,7 @@ section.music-row
font-size: 2rem font-size: 2rem
font-family: 'Roboto Slab', serif font-family: 'Roboto Slab', serif
margin: 20px 0px margin: 20px 0px
white-space: nowrap
.carousel-custom .carousel-custom
.owl-stage-outer .owl-stage-outer
overflow: unset overflow: unset