From a7a7350b0151bc719507be321215eb43ed6d3dbb Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 10 Feb 2022 20:51:41 -0800
Subject: [PATCH] adjustements to home screen

---
 src/renderer/style.less                       | 31 +++++-----
 .../mediaitem-scroller-horizontal.ejs         | 13 ++---
 src/renderer/views/pages/collection-list.ejs  | 21 +++----
 src/renderer/views/pages/home.ejs             | 10 ++--
 src/renderer/views/pages/library-artists.ejs  | 57 +++++++++----------
 5 files changed, 63 insertions(+), 69 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 3e8787dd..161e0c2e 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2746,22 +2746,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding: var(--contentInnerPadding);
   box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
   margin-top: 16px;
-  display: flex;
-  flex-flow: wrap;
-  justify-content: center;
 
-  > .cd-mediaitem-square {
-    width: 220px;
-    height: 260px;
-    display: inline-flex;
-    flex: 0 0 auto;
-    flex-direction: column;
-    font-size: 14px;
+
+  &.itemContainer {
+    display: flex;
+    flex-flow: wrap;
     justify-content: center;
-    align-items: center;
-    border-radius: 6px;
-    max-width: 240px;
-    flex-grow: 1;
+    .cd-mediaitem-square {
+      width: 220px;
+      height: 260px;
+      display: inline-flex;
+      flex: 0 0 auto;
+      flex-direction: column;
+      font-size: 14px;
+      justify-content: center;
+      align-items: center;
+      border-radius: 6px;
+      max-width: 240px;
+      flex-grow: 1;
+    }
   }
 }
 
diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs
index b01bfd63..dfda58e4 100644
--- a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs
+++ b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs
@@ -1,11 +1,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal">
-    <template>
-        <vue-horizontal>
-            <slot></slot>
-            <mediaitem-square :kind="kind" :item="item"
-                              v-for="item in items"></mediaitem-square>
-        </vue-horizontal>
-    </template>
+    <vue-horizontal>
+        <slot></slot>
+        <mediaitem-square :kind="kind" :item="item" v-for="item in items"></mediaitem-square>
+    </vue-horizontal>
 </script>
 
 <script>
@@ -22,7 +19,7 @@
                 defualt: ""
             }
         },
-        data: function () {
+        data: function() {
             return {
                 app: this.$root,
             }
diff --git a/src/renderer/views/pages/collection-list.ejs b/src/renderer/views/pages/collection-list.ejs
index d9cc6ca9..1fb77c90 100644
--- a/src/renderer/views/pages/collection-list.ejs
+++ b/src/renderer/views/pages/collection-list.ejs
@@ -1,12 +1,12 @@
 <script type="text/x-template" id="cider-collection-list">
     <div class="content-inner collection-page">
         <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
-        <div v-if="data['data'] != 'null'" class="well">
+        <div v-if="data['data'] != 'null'" class="well itemContainer">
             <template v-for="(item, key) in data.data">
                 <template v-if="item.type == 'artists'">
                     <mediaitem-square :item="item"></mediaitem-square>
                 </template>
-                <template v-else>
+            <template v-else>
                     <mediaitem-list-item
                             v-if="getKind(item) == 'song'"
                             :index="key"
@@ -14,8 +14,7 @@
                     <mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
                 </template>
             </template>
-            <button v-if="triggerEnabled" style="opacity:0;height: 32px;"
-                    v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
+            <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
             </button>
         </div>
         <transition name="fabfade">
@@ -23,7 +22,9 @@
                 <%- include("../svg/arrow-up.svg") %>
             </button>
         </transition>
-        <div class="well" v-show="loading"><div class="spinner"></div></div>
+        <div class="well itemContainer" v-show="loading">
+            <div class="spinner"></div>
+        </div>
     </div>
 </script>
 <script>
@@ -44,7 +45,7 @@
                 default: "artists"
             }
         },
-        data: function () {
+        data: function() {
             return {
                 triggerEnabled: true,
                 canSeeTrigger: false,
@@ -92,8 +93,8 @@
                             this.triggerEnabled = true;
                         }
                         this.loading = false
-                    }else{
-                        if(!response.data.results[app.collectionList.response.groups]) {
+                    } else {
+                        if (!response.data.results[app.collectionList.response.groups]) {
                             this.loading = false
                             return
                         }
@@ -106,14 +107,14 @@
                     }
                 })
             },
-            headerVisibility: function (isVisible, entry) {
+            headerVisibility: function(isVisible, entry) {
                 if (isVisible) {
                     this.showFab = false;
                 } else {
                     this.showFab = true;
                 }
             },
-            visibilityChanged: function (isVisible, entry) {
+            visibilityChanged: function(isVisible, entry) {
                 if (isVisible) {
                     this.canSeeTrigger = true;
                     this.getNext();
diff --git a/src/renderer/views/pages/home.ejs b/src/renderer/views/pages/home.ejs
index 74eddace..226dc360 100644
--- a/src/renderer/views/pages/home.ejs
+++ b/src/renderer/views/pages/home.ejs
@@ -53,9 +53,8 @@
                 <div class="col">
                     <h3>{{app.getLz('home.madeForYou')}}</h3>
                     <div class="well">
-                        <vue-horizontal v-if="isSectionReady('madeForYou')">
-                            <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
-                        </vue-horizontal>
+                        <mediaitem-scroller-horizontal :items="madeForYou" v-if="isSectionReady('madeForYou')">
+                        </mediaitem-scroller-horizontal>
                         <div class="spinner" v-else></div>
                     </div>
                 </div>
@@ -71,9 +70,8 @@
                         </div>
                     </div>
                     <div class="well">
-                        <vue-horizontal v-if="isSectionReady('friendsListeningTo')">
-                            <mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
-                        </vue-horizontal>
+                        <mediaitem-scroller-horizontal :items="friendsListeningTo" v-if="isSectionReady('friendsListeningTo')">
+                        </mediaitem-scroller-horizontal>
                         <div class="spinner" v-else></div>
                     </div>
                 </div>
diff --git a/src/renderer/views/pages/library-artists.ejs b/src/renderer/views/pages/library-artists.ejs
index 8b74ec81..f1871d04 100644
--- a/src/renderer/views/pages/library-artists.ejs
+++ b/src/renderer/views/pages/library-artists.ejs
@@ -1,40 +1,35 @@
-    <div class="content-inner">
-        <div class="row">
-            <div class="col" style="padding:0;">
-                <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
-            </div>
-            
+<div class="content-inner">
+    <div class="row">
+        <div class="col" style="padding:0;">
+            <h1 class="header-text">{{$root.getLz('term.artists')}}</h1>
         </div>
-        <div class="row">
-            <div class="col" style="padding:0;">
-                <div class="search-input-container" style="width:100%;margin: 16px 0;">
-                    <div class="search-input--icon"></div>
-                    <input type="search"
-                           style="width:100%;"
-                           spellcheck="false"
-                           :placeholder="$root.getLz('term.search') + '...'"
-                           @input="searchLibraryArtists"
-                           v-model="library.artists.search" class="search-input">
-                </div>
+
+    </div>
+    <div class="row">
+        <div class="col" style="padding:0;">
+            <div class="search-input-container" style="width:100%;margin: 16px 0;">
+                <div class="search-input--icon"></div>
+                <input type="search" style="width:100%;" spellcheck="false" :placeholder="$root.getLz('term.search') + '...'" @input="searchLibraryArtists" v-model="library.artists.search" class="search-input">
             </div>
-            <div class="col-auto flex-center">
-                <div class="row">
-                    <!-- <div class="col">
+        </div>
+        <div class="col-auto flex-center">
+            <div class="row">
+                <!-- <div class="col">
                         <select class="md-select" v-model="library.artists.sorting[1]" @change="searchLibraryArtists(1)">
                             <optgroup label="Sort By">
                                 <option v-for="(sort, index) in library.artists.sortingOptions" :value="index">{{ sort }}</option>
                             </optgroup>
                         </select>
                     </div> -->
-                    <div class="col">
-                        <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
+                <div class="col">
+                    <select class="md-select" v-model="library.artists.sortOrder[1]" @change="searchLibraryArtists(1)">
                             <optgroup :label="$root.getLz('term.sortOrder')">
                                 <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
                                 <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
                             </optgroup>
                         </select>
-                    </div>
-                    <!-- <div class="col">
+                </div>
+                <!-- <div class="col">
                         <select class="md-select" v-model="library.artists.viewAs">
                             <optgroup label="View As">
                                 <option value="covers">Cover Art</option>
@@ -42,13 +37,13 @@
                             </optgroup>
                         </select>
                     </div> -->
-                </div>
             </div>
         </div>
-        <div class="well">
-            <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
+    </div>
+    <div class="well">
+        <!-- <mediaitem-square v-if="library.artists.viewAs == 'covers'" :item="item" v-for="item in library.artists.displayListing">
             </mediaitem-square> -->
-            <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
-            </libraryartist-item>
-        </div>
-    </div>
\ No newline at end of file
+        <libraryartist-item :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.artists.displayListing">
+        </libraryartist-item>
+    </div>
+</div>
\ No newline at end of file