changes to item sizing

* added :no-scale for mediaitem-square
* cards now scale
* changed sweeteners method of scaling items

src/renderer/less/elements.less

@@ -400,15 +400,15 @@
 
   .listitem-content {
     width: 100%;
-  height: 60px;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
-  font-size: 14px;
-  justify-content: center-between;
-  align-items: center;
-  border-radius: var(--mediaItemRadius);
-  position: relative;
+    height: 60px;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: center-between;
+    align-items: center;
+    border-radius: var(--mediaItemRadius);
+    position: relative;
   }
 
   &:hover {
@@ -444,6 +444,7 @@
     .mediaitem-artwork {
       border-radius: var(--mediaItemRadiusSmall);
     }
+
     .overlay-play {
       background: rgba(0, 0, 0, 0.5);
       opacity: 0;
@@ -957,6 +958,7 @@
 
 /* mediaitem-square */
 .cd-mediaitem-square {
+  --transitionDuration: .25s;
   --scaleRate: 1.25;
   --scaleRateArtwork: 1;
   width: 200px;
@@ -968,6 +970,7 @@
   justify-content: center;
   align-items: center;
   border-radius: 6px;
+  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
   .artwork-container {
     position: relative;
@@ -982,6 +985,7 @@
       flex: 0 0 auto;
       margin: 6px;
       cursor: pointer;
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
       .mediaitem-artwork {
         box-shadow: unset;
@@ -1055,16 +1059,33 @@
     }
   }
 
-  @media (min-width: 1600px) {
-    width: calc(200px * var(--scaleRate));
-    height: calc(200px * var(--scaleRate));
+  &:not(.noscale) {
+    @media (min-width: 1460px) {
+      --scaleRate: 1.1;
+      --scaleRateArtwork: 0.9;
+      width: calc(200px * var(--scaleRate));
+      height: calc(200px * var(--scaleRate));
 
-    .artwork-container > .artwork {
-      width: calc(190px * var(--scaleRateArtwork));
-      height: calc(190px * var(--scaleRateArtwork));
+      .artwork-container > .artwork {
+        width: calc(190px * var(--scaleRateArtwork));
+        height: calc(190px * var(--scaleRateArtwork));
+      }
+    }
+
+    @media (min-width: 1550px) {
+      --scaleRate: 1.25;
+      --scaleRateArtwork: 1;
+      width: calc(200px * var(--scaleRate));
+      height: calc(200px * var(--scaleRate));
+
+      .artwork-container > .artwork {
+        width: calc(190px * var(--scaleRateArtwork));
+        height: calc(190px * var(--scaleRateArtwork));
+      }
     }
   }
 
+
   .info-rect {
     width: 90%;
     height: 100%;
@@ -1122,13 +1143,15 @@
       width: 212px;
     }
 
-    @media (min-width: 1600px) {
-      width: calc(240px * var(--scaleRate));
-      height: calc(200px * var(--scaleRate));
+    &:not(.noscale) {
+      @media (min-width: 1600px) {
+        width: calc(240px * var(--scaleRate));
+        height: calc(200px * var(--scaleRate));
 
-      .artwork-container > .artwork {
-        width: calc(212px * var(--scaleRateArtwork));
-        height: calc(120px * var(--scaleRateArtwork));
+        .artwork-container > .artwork {
+          width: calc(212px * var(--scaleRateArtwork));
+          height: calc(120px * var(--scaleRateArtwork));
+        }
       }
     }
   }
@@ -1241,14 +1264,25 @@
       border-radius: inherit;
     }
 
-    //@media (min-width: 1600px) {
-    //  width: calc(230px * 1.25);
-    //  height: calc(298px * 1.25);
-    //  .artwork-container>.artwork {
-    //    width: calc(230px * 1.25);
-    //    height: calc(230px * 1.25);
-    //  }
-    //}
+    &:not(.noscale) {
+      @media (min-width: 1460px) {
+        width: calc(230px * 1.1);
+        height: calc(298px * 1.1);
+        .artwork-container > .artwork {
+          width: calc(230px * 1.1);
+          height: calc(230px * 1.1);
+        }
+      }
+
+      @media (min-width: 1550px) {
+        width: calc(230px * 1.25);
+        height: calc(298px * 1.25);
+        .artwork-container > .artwork {
+          width: calc(230px * 1.25);
+          height: calc(230px * 1.25);
+        }
+      }
+    }
   }
 }
 

src/renderer/themes/sweetener.less

@@ -57,10 +57,6 @@
 .cd-mediaitem-square:not(.mediaitem-card) {
     transition      : transform .2s var(--appleEase);
     transition-delay: .1s;
-    padding         : 12px;
-
-    // background-color: red;
-    height: 220px;
 
 
     .artwork-container {}
@@ -73,9 +69,16 @@
         transition-delay: .05s;
     }
 
+    .artwork-container {
+      transform       : scale(0.962) translateZ(0);
+      transition      : transform .1s var(--appleEase);
+      transition-delay: 0s;
+      transform-origin: center;
+    }
+
     &:hover {
         .artwork-container {
-            transform       : scale(1.1);
+            transform       : scale(1.0);
             transition      : transform .1s var(--appleEase);
             transition-delay: 0s;
             transform-origin: center;

src/renderer/views/components/mediaitem-square.ejs

@@ -87,6 +87,11 @@
 				default: false,
 				required: false
 			},
+            noScale: {
+                type: Boolean,
+                default: false,
+                required: false
+            },
 			'contextExt': { type: Object, required: false },
 		},
 		data: function () {
@@ -251,6 +256,10 @@
 			},
 			getClasses() {
 				let type = []
+                let classes = []
+                if(this.noScale) {
+                    classes.push("noscale")
+                }
 				try {
 					type = this.item.type
 
@@ -263,25 +272,26 @@
 				}
 				switch (type) {
 					default:
-						return []
+
 						break;
 					case "editorial-elements":
 					case "card":
-						return ["mediaitem-card"]
+						classes.push("mediaitem-card")
 						break;
 					case "385": // editorial
-						return ["mediaitem-brick"]
+                        classes.push("mediaitem-brick")
 						break;
 					case "small":
-						return ["mediaitem-small"]
+						classes.push("mediaitem-small")
 						break;
 					case "music-videos":
 					case "uploadedVideo":
 					case "uploaded-videos":
 					case "library-music-videos":
-						return "mediaitem-video";
+						classes.push("mediaitem-video")
 						break;
 				}
+                return classes
 			},
 			visibilityChanged: function (isVisible, entry) {
 				this.isVisible = isVisible

src/renderer/views/pages/artist.ejs

@@ -69,7 +69,7 @@
                 <div class="latestRelease" 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"
+                        <mediaitem-square kind="card" :no-scale="true" v-for="song in data.views['latest-release'].data"
                                           :item="song">
                         </mediaitem-square>
                     </div>

src/renderer/views/pages/replay.ejs

@@ -28,7 +28,7 @@
                     <h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
                 </div>
                 <div class="col-auto replay-playlist-container">
-                    <mediaitem-square kind="card" :force-video="true" :item="loaded.playlist"></mediaitem-square>
+                    <mediaitem-square kind="card" :no-scale="true" :force-video="true" :item="loaded.playlist"></mediaitem-square>
                 </div>
             </div>
             <!--            Top Artists-->