okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

changes to item sizing

Browse source 
* added :no-scale for mediaitem-square
* cards now scale
* changed sweeteners method of scaling items
This commit is contained in:
booploops 2022-06-14 04:32:59 -07:00
parent 493492c579
commit 7746daee54
5 changed files with 88 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/renderer/less/elements.less
View file

@ -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,7 +1059,10 @@
}
}
@media (min-width: 1600px) {
&:not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 0.9;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
@ -1065,6 +1072,20 @@
}
}
@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,6 +1143,7 @@
width: 212px;
}
&:not(.noscale) {
@media (min-width: 1600px) {
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
@ -1132,6 +1154,7 @@
}
}
}
}
&.mediaitem-brick {
height: 200px;
@ -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);
}
}
}
}
}

13
src/renderer/themes/sweetener.less
View file

@ -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;

20
src/renderer/views/components/mediaitem-square.ejs
View file

@ -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

2
src/renderer/views/pages/artist.ejs
View file

@ -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>

2
src/renderer/views/pages/replay.ejs
View file

@ -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-->