Merge branch 'development' of github.com:nikandlv/jukebox into development

src/renderer/components/Button.vue

@@ -36,6 +36,7 @@ export default {
       background-color: lighten(#336cfb,5)
     &:focus,&:active
       background-color: darken(#336cfb,5)
+
   svg
     width: 14px
     height: 14px

src/renderer/components/FavouriteItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <tr>
+      <td class="song">
+        <img :src="item.artwork" alt="Artwork">  
+        {{item.title}}
+      </td>
+
+      <td>
+        {{item.artist}}
+      </td>
+
+      <td>
+        {{item.duration}}
+      </td>
+  </tr>
+</template>
+
+<script>
+export default {
+  name: 'ListItem',
+  props: ['item']
+}
+</script>
+
+<style lang="sass" scoped>
+tr
+  width: 100%
+  height: 100%
+  padding: .3rem .5rem
+
+  td
+    vertical-align: middle
+
+  img
+    width: 3rem
+    height: 3rem
+    margin-right: .3rem
+</style>
+

src/renderer/layouts/HomePage.vue

@@ -1,18 +1,28 @@
 <template>
     <section>
       <ActionBar />
-      <div>
+      <div class="upper-row">
         <MusicRow :items='items' />
       </div>
+
+      <div class="middle-row">
+        <List class="grow-half">
+          <ListItem v-for="favourite in favourties" :key="favourite.id"></ListItem>
+        </List>
+        <div class="grow-half"></div>
+      </div>
+
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
 import MusicRow from './MusicRow'
+import List from './FavouriteList'
+
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicRow },
+  components: { ActionBar, MusicRow, List },
   data: () => {
     return {
       items: [
@@ -70,6 +80,29 @@ export default {
           artist: 'Juice WRLD',
           artwork: '/static/demo/clever.jpg'
         }
+      ],
+      favourites: [
+        {
+          id: 1,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          duration: '3:30',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 2,
+          title: 'Starboy',
+          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'
+        }
       ]
     }
   }
@@ -81,5 +114,11 @@ section.page
     padding: 1rem 2.5rem
     overflow-x: hidden
     .VueCarousel-wrapper
-        overflow: unset
+      overflow: unset
+
+    .middle-row
+      display: flex
+
+    .grow-half
+      flex: 1 0 50% // deviding the space equally between two element
 </style>

src/renderer/layouts/List.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="favourite__title-container">
+      <legend>favourite songs</legend>
+      <Button variant="outlined" class="view-all">View All</Button>
+    </div>
+
+    <ul>
+      <slot></slot>
+    </ul>
+  </div>
+</template>
+
+<script>
+import FavouriteItem from '../components/FavouriteItem'
+import Button from '../components/Button'
+export default {
+  name: 'List',
+  props: ['favourites'],
+  components: { FavouriteItem, Button }
+}
+</script>
+
+<style lang="sass" scoped>
+// TITLE
+.favourite__title-container
+  display: flex
+  justify-content: space-between
+  align-items: center
+legend
+  font-size: 2rem
+  font-family: 'Roboto Slab', serif        
+  margin: 20px 0px
+  text-transform: capitalize
+.view-all
+  border-radius: 1rem
+  line-height: .1rem
+  padding: .9rem 1.3rem
+  font-weight: 300
+  text-transform: capitalize
+  display: flex
+  align-items: center
+  justify-content: center
+
+// TABLE
+table
+  width: 100%
+  border-collapse: collapse
+th
+  color: lighten(grey, 20)
+  font-weight: 300
+  text-transform: capitalize
+  text-align: left
+  // define width based on amount of content 
+  &#song
+    width: 50%
+  &#artist
+    width: 34%
+  &#duration
+    width: 16%
+
+</style>

src/renderer/layouts/MusicRow.vue

@@ -1,6 +1,6 @@
 <template>
     <section>
-        <legend>Top music of the month</legend>
+        <legend>Top Rated</legend>
         <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
           <Slide v-for="item in items" :key="item.id">
             <MusicBox  :item="item" />