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

listen now looking good

Browse source
This commit is contained in:
vapormusic 2021-12-04 15:39:11 +07:00
parent b9e5372956
commit 1a99e19d16
3 changed files with 85 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

30
resources/cider-ui-tests/index.html
View file

@ -276,7 +276,7 @@
</div>
</div>
<template v-if="recom.attributes.display.kind == 'MusicCoverShelf'">
<mediaitem-scroller-horizontal :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal>
<mediaitem-scroller-horizontal-large :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
<template v-else>
<mediaitem-scroller-horizontal-sp :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal-sp>
@ -371,6 +371,15 @@
</template>
</script>
<script type="text/x-template" id="mediaitem-scroller-horizontal-large">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-square-large :item="item"
v-for="item in items"></mediaitem-square-large>
</div>
</template>
</script>
<script type="text/x-template" id="mediaitem-scroller-horizontal-sp">
<template>
<div class="cd-hmedia-scroller">
@ -448,11 +457,28 @@
</template>
</script>
<script type="text/x-template" id="mediaitem-square-large">
<template>
<div @click="app.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-square-large">
<div class="artwork"
:class="{'round': item.type == 'artists'}"
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
</div>
</div>
</template>
</script>
<script type="text/x-template" id="mediaitem-square-sp">
<template>
<div @click="app.playMediaItemById(item.id, item.type)"
class="cd-mediaitem-square-sp"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : transparent}"
:style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
>
<div class="artwork"

13
resources/cider-ui-tests/index.js
View file

@ -16,18 +16,29 @@ Vue.component('mediaitem-scroller-horizontal-sp', {
methods: {}
});
Vue.component('mediaitem-scroller-horizontal-large', {
template: '#mediaitem-scroller-horizontal-large',
props: ['items'],
methods: {}
});
Vue.component('mediaitem-square', {
template: '#mediaitem-square',
props: ['item'],
methods: {}
});
Vue.component('mediaitem-square-sp', {
template: '#mediaitem-square-sp',
props: ['item'],
methods: {}
});
Vue.component('mediaitem-square-large', {
template: '#mediaitem-square-large',
props: ['item'],
methods: {}
});
Vue.component('mediaitem-hrect', {
template: '#mediaitem-hrect',
props: ['item'],

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

@ -1453,6 +1453,51 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-size: 12px;
}
/* mediaitem-square-large */
.cd-mediaitem-square-large {
width: 190px;
height: 250px;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: flex-start;
align-items: center;
border-radius: 6px;
margin-left: 10px;
cursor: pointer;
}
.cd-mediaitem-square-large:hover {
background: rgb(200 200 200 / 10%);
}
.cd-mediaitem-square-large .artwork {
height: 190px;
width: 190px;
background: blue;
border-radius: var(--mediaItemRadius);
background: var(--artwork);
background-size: cover;
box-shadow: var(--mediaItemShadow);
flex: 0 0 auto;
margin: 6px;
}
.cd-mediaitem-square-large .artwork.round {
border-radius: var(--mediaItemRadiusRound);
}
.cd-mediaitem-square-large .title {
width: 90%;
text-align: center;
}
.cd-mediaitem-square-large .subtitle {
width: 100%;
text-align: center;
font-size: 12px;
}
/* mediaitem-square */
.cd-mediaitem-square {