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

album page styled more like artist page

Browse source
This commit is contained in:
booploops 2021-12-07 16:10:13 -08:00
parent bf4c003b80
commit 76a0ad2351
2 changed files with 105 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

159
resources/cider-ui-tests/style.css
View file

@ -6,6 +6,7 @@
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
--mediaItemRadius: 4px;
--mediaItemRadiusRound: 100%;
--contentInnerPadding: 16px;
--navbarHeight: 48px;
--keyColor: #fa586a;
--keyColor-rgb: 250, 88, 106;
@ -1364,6 +1365,93 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
color: white;
}
/* Album / Playlist Page */
.playlist-page {
padding: 0px;
}
.playlist-page .well {
background: rgba(200, 200, 200, 0.05);
border-radius: 10px;
padding: var(--contentInnerPadding);
box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
margin-top: 16px;
}
.playlist-page .playlist-body {
padding: var(--contentInnerPadding);
}
.playlist-display {
flex-wrap: nowrap;
/* margin-bottom: 32px; */
padding: var(--contentInnerPadding);
min-height: 300px;
}
.playlist-display .playlist-info{
flex-shrink: unset;
display: flex;
flex-flow: column;
justify-content: flex-end;
}
.playlist-display .playlist-info .playlist-name {
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;
}
.playlist-display .playlist-info .playlist-artist {
font-weight: 500;
font-size: 1.6rem;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;
}
.playlist-display .playlist-info .playlist-desc {
box-sizing: border-box;
font-size: 14px;
flex-shrink: unset;
margin-right: 5px;
max-height: 100px;
position: relative;
}
.playlist-display .playlist-info .playlist-desc .content {
height: 100px;
-webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.playlist-display .playlist-info .playlist-desc .more-btn {
appearance: none;
position: absolute;
right: 0;
bottom: 0;
padding: 0 5px;
font-size: 14px;
color: var(--keyColor);
background-color: transparent;
border: 0px;
cursor: pointer;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-weight: 600;
font-family: inherit;
text-transform: uppercase;
}
.playlist-time {
font-size: 0.9em;
margin: 6px;
opacity: 0.7;
}
/* Artist Page */
.artist-page {
@ -1387,13 +1475,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.artist-page .artist-body {
padding: 16px;
padding: var(--contentInnerPadding);
}
.artist-page .well {
background: rgba(200, 200, 200, 0.05);
border-radius: 10px;
padding: 16px;
padding: var(--contentInnerPadding);
box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
margin-top: 16px;
}
@ -1909,73 +1997,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
}
.playlist-display {
flex-wrap: nowrap;
margin-bottom: 32px;
}
.playlist-display .playlist-info{
flex-shrink: unset;
display: flex;
flex-flow: column;
justify-content: flex-end;
}
.playlist-display .playlist-info .playlist-name {
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;
}
.playlist-display .playlist-info .playlist-artist {
font-weight: 500;
font-size: 1.6rem;
margin-bottom: 6px;
margin-right: 6px;
flex-shrink: unset;
}
.playlist-display .playlist-info .playlist-desc {
box-sizing: border-box;
font-size: 14px;
flex-shrink: unset;
margin-right: 5px;
max-height: 100px;
position: relative;
}
.playlist-display .playlist-info .playlist-desc .content {
height: 100px;
-webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.playlist-display .playlist-info .playlist-desc .more-btn {
appearance: none;
position: absolute;
right: 0;
bottom: 0;
padding: 0 5px;
font-size: 14px;
color: var(--keyColor);
background-color: transparent;
border: 0px;
cursor: pointer;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-weight: 600;
font-family: inherit;
text-transform: uppercase;
}
.playlist-time {
font-size: 0.9em;
margin: 6px;
opacity: 0.7;
}
#apple-music-video-container {
background: black;

22
resources/cider-ui-tests/views/pages/cider-playlist.ejs
View file

@ -1,13 +1,17 @@
<script type="text/x-template" id="cider-playlist">
<div class="content-inner">
<div class="content-inner playlist-page">
<template v-if="data != [] && data.attributes != null">
<div class="playlist-display row">
<div class="playlist-display row"
:style="{
background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
color: (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
}">
<div class="col-auto flex-center">
<div style="width: 300px;height:300px;">
<div style="width: 260px;height:260px;">
<mediaitem-artwork
:url="(data.attributes != null && data.attributes.artwork && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0) ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
:video="(data.attributes != null && data.attributes.editorialVideo != null) ? (data.attributes.editorialVideo.motionDetailSquare ? data.attributes.editorialVideo.motionDetailSquare.video : (data.attributes.editorialVideo.motionSquareVideo1x1 ? data.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
size="300"
size="260"
></mediaitem-artwork>
</div>
</div>
@ -27,9 +31,13 @@
</div>
</div>
</div>
<mediaitem-list-item :item="item"
v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
<div class="playlist-time">{{app.getTotalTime()}}</div>
<div class="playlist-body">
<div class="well">
<mediaitem-list-item :item="item"
v-for="item in data.relationships.tracks.data"></mediaitem-list-item>
</div>
<div class="playlist-time">{{app.getTotalTime()}}</div>
</div>
</template>
</div>