From 9d51939f0342795eb272d2cc78dc4487cc16f72d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Wed, 25 May 2022 20:51:34 -0700
Subject: [PATCH] collection list now uses grid sizing

---
 src/renderer/style.less                      | 16 ++++++++++++++++
 src/renderer/views/pages/collection-list.ejs |  9 ++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 676e93dc..ef6c2046 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1930,12 +1930,28 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       max-width: 240px;
       flex-grow: 1;
     }
+
+    &.collection-list-square {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(200px, 1fr));
+
+      // screen size > 1200px
+      @media screen and (min-width: 1500px) {
+        grid-template-columns: repeat(6, minmax(200px, 1fr));
+      }
+      // less than 1100px
+      @media screen and (max-width: 1150px) {
+        grid-template-columns: repeat(3, minmax(200px, 1fr));
+      }
+    }
   }
 }
 
 .cd-mediaitem-square-container{
   display: inline-flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .reasonSP{
diff --git a/src/renderer/views/pages/collection-list.ejs b/src/renderer/views/pages/collection-list.ejs
index d00c3fcd..d76bf62c 100644
--- a/src/renderer/views/pages/collection-list.ejs
+++ b/src/renderer/views/pages/collection-list.ejs
@@ -1,7 +1,7 @@
 <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 itemContainer">
+        <div v-if="data['data'] != 'null'" class="well itemContainer" :class="getClasses()">
             <template v-for="(item, key) in data.data">
                 <template v-if="item.type == 'artists'">
                     <mediaitem-square :item="item"></mediaitem-square>
@@ -57,6 +57,13 @@
             }
         },
         methods: {
+            getClasses() {
+                if(this.commonKind != "song") {
+                    return "collection-list-square";
+                }else{
+                    return "";
+                }
+            },
             getKind(item) {
                 if (typeof item.kind != "undefined") {
                     this.commonKind = item.kind;