Reverted mediaitem-mvview changes

This commit is contained in:
booploops 2021-12-15 02:17:37 -08:00
parent addcfe3256
commit 92032ffb02
2 changed files with 29 additions and 23 deletions

View file

@ -2090,10 +2090,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 12px; font-size: 12px;
} }
/* mediaitem-mvview */
/* mediaitem-mvview */ /* mediaitem-mvview */
.cd-mediaitem-mvview { .cd-mediaitem-mvview {
width: 220px; width: 300px;
height: 180px; height: 250px;
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
@ -2110,8 +2112,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.cd-mediaitem-mvview .artwork { .cd-mediaitem-mvview .artwork {
height: 120px; height: 190px;
width: 210px; width: 300px;
background: blue;
border-top-left-radius: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px; border-top-right-radius: 6px;
background: var(--artwork); background: var(--artwork);
@ -2123,12 +2126,14 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.cd-mediaitem-mvview-overlay { .cd-mediaitem-mvview-overlay {
position: absolute; position: absolute;
width: 100%; width: 300px;
height: 100%; float: right;
height: 250px;
top: 0px; top: 0px;
margin: 10px; margin: 10px;
margin-top: 0px; margin-top: 0px;
opacity: 0; opacity: 0;
} }
.cd-mediaitem-mvview-overlay>* { .cd-mediaitem-mvview-overlay>* {
@ -2170,6 +2175,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 12px; font-size: 12px;
} }
/* mediaitem-square */ /* mediaitem-square */
.cd-mediaitem-square { .cd-mediaitem-square {
width: 200px; width: 200px;

View file

@ -8,14 +8,14 @@
:url="item.attributes.artwork ? item.attributes.artwork.url : ''" :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 : '')) : '' " :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" :size="imagesize ?? 300"
></mediaitem-artwork> ></mediaitem-artwork>
</div> </div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'> <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
<div class="button" style=" <div class="button" style="
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" 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': '74px', :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': '140px',
'margin-left': '174px', 'margin-left': '250px',
width: '40px', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', 'margin-left': '95px', {margin: '35px', 'margin-left': '95px',
@ -32,20 +32,20 @@
</div> </div>
</div> </div>
<!-- <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">--> <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
<!-- <div class="button" style="--> <div class="button" style="
<!-- border-radius: 50%;--> border-radius: 50%;
<!-- background: rgba(50,50,50,0.7);"--> 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': '140px',--> :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': '140px',
<!-- 'margin-left': '250px', --> 'margin-left': '250px',
<!-- width: '40px',--> width: '40px',
<!-- height: '40px',} :--> height: '40px',} :
<!-- {margin: '35px', 'margin-left': '95px',--> {margin: '35px', 'margin-left': '95px',
<!-- width: '120px',--> width: '120px',
<!-- height: '120px',}]" @click="app.playMediaItem(item)">--> height: '120px',}]" @click="app.playMediaItem(item)">
<!-- <%- include("../svg/play.svg") %>--> <%- include("../svg/play.svg") %>
<!-- </div>--> </div>
<!-- </div>--> </div>
</div> </div>
</template> </template>
</script> </script>