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

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

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

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

@ -87,6 +87,11 @@
default: false, default: false,
required: false required: false
}, },
noScale: {
type: Boolean,
default: false,
required: false
},
'contextExt': { type: Object, required: false }, 'contextExt': { type: Object, required: false },
}, },
data: function () { data: function () {
@ -251,6 +256,10 @@
}, },
getClasses() { getClasses() {
let type = [] let type = []
let classes = []
if(this.noScale) {
classes.push("noscale")
}
try { try {
type = this.item.type type = this.item.type
@ -263,25 +272,26 @@
} }
switch (type) { switch (type) {
default: default:
return []
break; break;
case "editorial-elements": case "editorial-elements":
case "card": case "card":
return ["mediaitem-card"] classes.push("mediaitem-card")
break; break;
case "385": // editorial case "385": // editorial
return ["mediaitem-brick"] classes.push("mediaitem-brick")
break; break;
case "small": case "small":
return ["mediaitem-small"] classes.push("mediaitem-small")
break; break;
case "music-videos": case "music-videos":
case "uploadedVideo": case "uploadedVideo":
case "uploaded-videos": case "uploaded-videos":
case "library-music-videos": case "library-music-videos":
return "mediaitem-video"; classes.push("mediaitem-video")
break; break;
} }
return classes
}, },
visibilityChanged: function (isVisible, entry) { visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible 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"> <div class="latestRelease" v-if="data.views['latest-release'].data.length != 0">
<h3>{{app.getLz('term.latestReleases')}}</h3> <h3>{{app.getLz('term.latestReleases')}}</h3>
<div style="width: auto;margin: 0 auto;"> <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"> :item="song">
</mediaitem-square> </mediaitem-square>
</div> </div>

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

@ -28,7 +28,7 @@
<h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4> <h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
</div> </div>
<div class="col-auto replay-playlist-container"> <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>
</div> </div>
<!-- Top Artists--> <!-- Top Artists-->