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

minor browse page visual changes

Browse source
This commit is contained in:
vapormusic 2021-12-14 22:23:48 +07:00
parent 80c8b3abaa
commit 042229ea90
6 changed files with 91 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
resources/cider-ui-tests/style.less
View file

@ -1793,6 +1793,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex;
flex-flow: row;
overflow-x: scroll;
overflow-y: hidden;
&::-webkit-scrollbar-thumb {
box-shadow: none;
@ -2400,4 +2401,18 @@ div#captions {
.item-navigate:hover {
text-decoration: underline;
}
.title-browse-sp{
width: 100%;
text-align: left;
margin-bottom: 2px;
}
.bold{
font-weight: bold;
}
.semibold{
font-weight: 500;
}

61
resources/cider-ui-tests/views/components/mediaitem-mvview-sp.ejs Normal file
View file

@ -0,0 +1,61 @@
<script type="text/x-template" id="mediaitem-mvview-sp">
<template>
<div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview">
<div class="title-browse-sp bold " @click='app.routeView(item)'>
{{ badge ? badge.designBadge : ""}}
</div>
<div class="title-browse-sp " >
{{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? '') }}
</div>
<div class="title-browse-sp semibold" v-if="!(badge != null && badge.designTag != null)" >
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
</div>
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="imagesize ?? 300"
></mediaitem-artwork>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '200px',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
:style="[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '200px',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-mvview-sp', {
template: '#mediaitem-mvview-sp',
props: ['item', "imagesize","badge"],
methods: {}
});
</script>

4
resources/cider-ui-tests/views/components/mediaitem-mvview.ejs
View file

@ -18,7 +18,7 @@
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px',
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
@ -40,7 +40,7 @@
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px',
{margin: '35px', 'margin-left': '95px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>

12
resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-mvview.ejs
View file

@ -1,8 +1,14 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-mvview :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
v-for="item in items"></mediaitem-mvview>
<template v-if="browsesp">
<mediaitem-mvview-sp :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
:badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
</template>
<template v-else>
<mediaitem-mvview :item="item ? (item.attributes.kind ? item: item.relationships.contents.data[0]) : []" :imagesize="imagesize"
v-for="item in items"></mediaitem-mvview>
</template>
</div>
</template>
</script>
@ -11,7 +17,7 @@
<script>
Vue.component('mediaitem-scroller-horizontal-mvview', {
template: '#mediaitem-scroller-horizontal-mvview',
props: ['items',"imagesize"],
props: ['items',"imagesize","browsesp"],
methods: {}
});
</script>

2
resources/cider-ui-tests/views/main.ejs
View file

@ -461,6 +461,8 @@
<%- include('components/mediaitem-square-sp') %>
<!-- MediaItem MusicVideo -->
<%- include('components/mediaitem-mvview') %>
<!-- MediaItem MusicVideo SP -->
<%- include('components/mediaitem-mvview-sp') %>
<!-- Animated Artwork View -->
<%- include('components/animatedartwork-view') %>

4
resources/cider-ui-tests/views/pages/browse.ejs
View file

@ -7,13 +7,13 @@
<div class="col" v-if="recom.attributes.name != 'Chart Set'">
<h3>{{ recom.attributes.name ?? ""}}</h3>
</div>
<div class="col-auto flex-center" v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
<div class="col-auto flex-center" v-if="index != 0 && recom.relationships && ((recom.relationships.children && recom.relationships.children.data.length > 10) || (recom.relationships.contents && recom.relationships.contents.data.length > 10))">
<button class="cd-btn-seeall" @click="app.showCollection(recom.relationships.children ? recom.relationships.children : recom.relationships.contents, recom.attributes.name ?? '', 'listen_now')" >See All</button>
</div>
</div>
<template v-if="recom.relationships && ((recom.relationships.children && recom.relationships.children.data) || (recom.relationships.contents && recom.relationships.contents.data))">
<template v-if="(['385']).includes(recom.attributes.editorialElementKind) || index === 0">
<mediaitem-scroller-horizontal-mvview :imagesize="800"
<mediaitem-scroller-horizontal-mvview :imagesize="800" :browsesp="index == 0"
:items="recom.relationships.children ? recom.relationships.children.data.limit(10) : recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
<template v-else-if="recom.attributes.name == 'Chart Set'">