From 01480af1054435ebb768aaac2b2644fbd9b4f891 Mon Sep 17 00:00:00 2001
From: Nikan Dalvand <nikandalvand@gmail.com>
Date: Tue, 23 Jul 2019 15:21:08 +0430
Subject: [PATCH] Added first revision of MusicBox

---
 src/renderer/components/MusicBox.vue       |  37 +++++++++++++++++++++
 src/renderer/layouts/ActionBar.vue         |   2 +-
 src/renderer/layouts/HomePage.vue          |  18 +++++++---
 static/demo/{artwork-1 => artwork-1.png}   | Bin
 static/demo/{artwork-10 => artwork-10.png} | Bin
 static/demo/{artwork-2 => artwork-2.png}   | Bin
 static/demo/{artwork-3 => artwork-3.png}   | Bin
 static/demo/{artwork-4 => artwork-4.png}   | Bin
 static/demo/{artwork-5 => artwork-5.png}   | Bin
 static/demo/{artwork-6 => artwork-6.png}   | Bin
 static/demo/{artwork-7 => artwork-7.png}   | Bin
 static/demo/{artwork-8 => artwork-8.png}   | Bin
 static/demo/{artwork-9 => artwork-9.png}   | Bin
 13 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/components/MusicBox.vue
 rename static/demo/{artwork-1 => artwork-1.png} (100%)
 rename static/demo/{artwork-10 => artwork-10.png} (100%)
 rename static/demo/{artwork-2 => artwork-2.png} (100%)
 rename static/demo/{artwork-3 => artwork-3.png} (100%)
 rename static/demo/{artwork-4 => artwork-4.png} (100%)
 rename static/demo/{artwork-5 => artwork-5.png} (100%)
 rename static/demo/{artwork-6 => artwork-6.png} (100%)
 rename static/demo/{artwork-7 => artwork-7.png} (100%)
 rename static/demo/{artwork-8 => artwork-8.png} (100%)
 rename static/demo/{artwork-9 => artwork-9.png} (100%)

diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue
new file mode 100644
index 0000000..0a18e2b
--- /dev/null
+++ b/src/renderer/components/MusicBox.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="music-box">
+        <img @load="onLoad" src="/static/demo/artwork-5.png" alt="Artwork">
+        <p class="title">Don't Hide - single</p>
+        <p class="artist">Mike Perry & Willie Willie Willie</p>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'MusicBox',
+  methods: {
+    onLoad () {
+      console.log('loaded')
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+div.music-box
+    width: 150px
+    img
+        border-radius: 4px
+        width: 100%
+        height: auto
+    p
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden
+        margin: 0.5rem 0
+        &.title
+            font-size: .9rem
+        &.artist
+            font-size: 0.8rem
+            color: lighten(black,50)
+</style>
diff --git a/src/renderer/layouts/ActionBar.vue b/src/renderer/layouts/ActionBar.vue
index 77e6958..54cbceb 100644
--- a/src/renderer/layouts/ActionBar.vue
+++ b/src/renderer/layouts/ActionBar.vue
@@ -36,8 +36,8 @@ export default {
 <style lang="sass" scoped>
 section.action-bar
   display: flex
-  padding: 1rem 2.5rem
   align-items: center
+  padding-bottom: 1rem
   .search-wrapper
     transition: width 200ms
     transition: margin-top 100ms
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 38a7e44..365e516 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,18 +1,28 @@
 <template>
-    <section>
+    <section class="page">
       <ActionBar />
-      <p>home</p>
+      <div>
+        <MusicBox />
+      </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
+import MusicBox from '../components/MusicBox'
 export default {
   name: 'HomePage',
-  components: {ActionBar}
+  components: { ActionBar, MusicBox },
+  data: () => {
+    return {
+      top: []
+    }
+  }
 }
 </script>
 
-<style>
+<style scoped lang="sass">
+section.page
+    padding: 1rem 2.5rem
 
 </style>
diff --git a/static/demo/artwork-1 b/static/demo/artwork-1.png
similarity index 100%
rename from static/demo/artwork-1
rename to static/demo/artwork-1.png
diff --git a/static/demo/artwork-10 b/static/demo/artwork-10.png
similarity index 100%
rename from static/demo/artwork-10
rename to static/demo/artwork-10.png
diff --git a/static/demo/artwork-2 b/static/demo/artwork-2.png
similarity index 100%
rename from static/demo/artwork-2
rename to static/demo/artwork-2.png
diff --git a/static/demo/artwork-3 b/static/demo/artwork-3.png
similarity index 100%
rename from static/demo/artwork-3
rename to static/demo/artwork-3.png
diff --git a/static/demo/artwork-4 b/static/demo/artwork-4.png
similarity index 100%
rename from static/demo/artwork-4
rename to static/demo/artwork-4.png
diff --git a/static/demo/artwork-5 b/static/demo/artwork-5.png
similarity index 100%
rename from static/demo/artwork-5
rename to static/demo/artwork-5.png
diff --git a/static/demo/artwork-6 b/static/demo/artwork-6.png
similarity index 100%
rename from static/demo/artwork-6
rename to static/demo/artwork-6.png
diff --git a/static/demo/artwork-7 b/static/demo/artwork-7.png
similarity index 100%
rename from static/demo/artwork-7
rename to static/demo/artwork-7.png
diff --git a/static/demo/artwork-8 b/static/demo/artwork-8.png
similarity index 100%
rename from static/demo/artwork-8
rename to static/demo/artwork-8.png
diff --git a/static/demo/artwork-9 b/static/demo/artwork-9.png
similarity index 100%
rename from static/demo/artwork-9
rename to static/demo/artwork-9.png