added listitem-horizontal

src/main/base/browserwindow.ts

@@ -66,6 +66,7 @@ export class BrowserWindow {
                 "components/listennow-child",
                 "components/mediaitem-mvview-sp",
                 "components/animatedartwork-view",
+                "components/listitem-horizontal",
                 "components/lyrics-view",
                 "components/fullscreen",
                 "components/miniplayer",

src/renderer/index.js

@@ -3569,6 +3569,13 @@ const app = new Vue({
         darwinShare(url) {
             ipcRenderer.send('share-menu', url)
         },
+        arrayToChunk(arr, chunkSize) {
+            let R = [];
+            for (let i = 0, len = arr.length; i < len; i += chunkSize) {
+                R.push(arr.slice(i, i + chunkSize));
+            }
+            return R;
+        }
     }
 })
 

src/renderer/style.less

@@ -2977,7 +2977,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding-top: var(--navigationBarHeight);
 
   .playlist-body {
-    padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
+    padding: var(--contentInnerPadding) 2em;
     margin-top: -75px;
   }
 
@@ -3445,7 +3445,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   .artist-body {
     padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
-    margin-top: -140px;
+    margin: -140px 20px;
   }
 
   &.animated > .artist-body {
@@ -5410,26 +5410,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 // Cider App
 
+.listitem-horizontal {
+  .cd-mediaitem-list-item {
+    width: 350px;
+    height: 60px;
+  }
+}
+
 .mediaitem-list-item__grid {
-  overflow-x: overlay;
-  overflow-y: hidden;
   background: rgba(200, 200, 200, 0.05);
   border-radius: 10px;
   padding: var(--contentInnerPadding);
   box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
-  height: 300px;
+  width: 100%;
-  display: flex;
-  align-items: center;
-
-  .grid-body {
-    display: grid;
-    grid-auto-flow: column dense;
-    grid-template-rows: auto auto auto auto;
-    grid-gap: 0 6px;
-    padding: 2px 0;
-    justify-content: left;
-    width: 0;
-  }
 
   .cd-mediaitem-list-item {
     width: 350px;

src/renderer/views/components/listitem-horizontal.ejs

@@ -0,0 +1,43 @@
+<script type="text/x-template" id="listitem-horizontal">
+     <div class="listitem-horizontal">
+    <vue-horizontal>
+        <div v-for="items in itemPages">
+            <mediaitem-list-item
+                v-for="(song, index) in items"
+                :index="song.index"
+                :item="song"></mediaitem-list-item>
+        </div>
+    </vue-horizontal>
+</div>
+</script>
+
+<script>
+    Vue.component('listitem-horizontal', {
+        template: '#listitem-horizontal',
+        name: "listitem-horizontal",
+        props: {
+            items: {
+                type: Array,
+                required: true
+            }
+        },
+        data: function () {
+            return {
+                itemPages: []
+            }
+        },
+        mounted() {
+            // give every item an id    
+            this.items.forEach(function (item, index) {
+                item.id = index;
+            });
+            // split items into pages
+            this.itemPages = app.arrayToChunk(this.items, 4);
+        },
+        methods: {
+            sayHello: function () {
+                alert('Hello world!');
+            }
+        }
+    });
+</script>

src/renderer/views/pages/artist.ejs

@@ -57,35 +57,32 @@
         </div>
         <div class="artist-body">
             <div class="row well">
-                <div class="col">
+                <div class="col-sm-3" v-if="data.views['latest-release'].data.length != 0">
+                    <h3>{{app.getLz('term.latestReleases')}}</h3>
+                    <div style="width: auto;margin: 0 auto;">
+                        <mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
+                                             :item="song">
+                        </mediaitem-square>
+                    </div>
+                </div>
+                <div class="col-sm-9" v-if="data.views['top-songs']">
                     <div class="row">
-                        <div class="col-auto" v-if="data.views['latest-release'].data.length != 0">
+                        <div class="col" style="padding:0;">
-                            <h3>{{app.getLz('term.latestReleases')}}</h3>
+                            <h3>{{app.getLz('term.topSongs')}}</h3>
-                            <div style="width: auto;margin: 0 auto;">
-                                <mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
-                                                     :item="song">
-                                </mediaitem-square>
-                            </div>
                         </div>
-                        <div class="col" v-if="data.views['top-songs']">
+                        <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 16" style="padding:0;">
-                            <div class="row">
+                            <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
-                                <div class="col" style="padding:0;">
-                                    <h3>{{app.getLz('term.topSongs')}}</h3>
-                                </div>
-                                <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 16" style="padding:0;">
-                                    <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
-                                </div>
-                            </div>
-                            <div class="mediaitem-list-item__grid">
-                                <div class="grid-body">
-                                    <mediaitem-list-item
-                                    v-for="(song, index) in data.views['top-songs'].data.limit(16)"
-                                    :index="index"
-                                    :item="song"></mediaitem-list-item>
-                                </div>
-                            </div>
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="col flex-center" style="padding:0;">
+                            <div class="mediaitem-list-item__grid">
+                                <listitem-horizontal :items="data.views['top-songs'].data.limit(16)">
+                                </listitem-horizontal>
+                            </div>                                
+                        </div>
+                    </div>
+                    
                 </div>
             </div>
             <div class="row well">

src/renderer/views/pages/home.ejs

@@ -3,11 +3,11 @@
         <div v-if="page == 'main'">
             <div class="row">
                 <div class="col">
-                    <div class="row nopadding">
+                    <div class="row">
-                        <div class="col nopadding">
+                        <div class="col">
                             <h3>{{app.getLz('home.recentlyPlayed')}}</h3>
                         </div>
-                        <div class="col-auto nopadding flex-center">
+                        <div class="col-auto flex-center">
                             <button class="cd-btn-seeall" @click="seeAllHistory()">{{app.getLz('term.seeAll')}}</button>
                         </div>
                     </div>
@@ -20,11 +20,11 @@
                     </div>
                 </div>
                 <div class="col">
-                    <div class="row nopadding">
+                    <div class="row">
-                        <div class="col nopadding">
+                        <div class="col">
                             <h3>{{app.getLz('home.artistsFeed')}}</h3>
                         </div>
-                        <div class="col-auto nopadding flex-center">
+                        <div class="col-auto flex-center">
                             <button class="cd-btn-seeall" @click="app.appRoute('artist-feed')">{{app.getLz('term.seeAll')}}</button>
                         </div>
                     </div>
@@ -63,10 +63,10 @@
             <div class="row" v-if="friendsListeningTo && friendsListeningTo.length > 0">
                 <div class="col">
                     <div class="row">
-                        <div class="col nopadding">
+                        <div class="col">
                             <h3>{{app.getLz('home.friendsListeningTo')}}</h3>
                         </div>
-                        <div class="col-auto nopadding flex-center">
+                        <div class="col-auto flex-center">
                             <button class="cd-btn-seeall" @click="app.showSocialListeningTo()">{{app.getLz('term.seeAll')}}</button>
                         </div>
                     </div>