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

resized music video element, added app.page = 'zoo' for testing new elements

Browse source
This commit is contained in:
booploops 2021-12-15 01:48:37 -08:00
parent 7629cbf5ca
commit addcfe3256
4 changed files with 44 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2092,8 +2092,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* mediaitem-mvview */ /* mediaitem-mvview */
.cd-mediaitem-mvview { .cd-mediaitem-mvview {
width: 300px; width: 220px;
height: 250px; height: 180px;
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
@ -2110,9 +2110,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.cd-mediaitem-mvview .artwork { .cd-mediaitem-mvview .artwork {
height: 190px; height: 120px;
width: 300px; width: 210px;
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);
@ -2124,14 +2123,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.cd-mediaitem-mvview-overlay { .cd-mediaitem-mvview-overlay {
position: absolute; position: absolute;
width: 300px; width: 100%;
float: right; height: 100%;
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>* {

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

@ -14,8 +14,8 @@
<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': '74px',
'margin-left': '250px', 'margin-left': '174px',
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>

3
resources/cider-ui/views/main.ejs
View file

@ -244,6 +244,9 @@
<cider-artist :data="artistPage.data"></cider-artist> <cider-artist :data="artistPage.data"></cider-artist>
</template> </template>
</transition> </transition>
<transition name="wpfade">
<%- include('pages/zoo') %>
</transition>
<transition name="wpfade"> <transition name="wpfade">
<%- include('pages/webview') %> <%- include('pages/webview') %>
</transition> </transition>

19
resources/cider-ui/views/pages/zoo.ejs Normal file
View file

@ -0,0 +1,19 @@
<template v-if="page == 'zoo'">
<div class="content-inner">
<h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
<div tabindex="0" class="cd-mediaitem-video">
<div class="artwork">
<mediaitem-artwork
url="https://is1-ssl.mzstatic.com/image/thumb/Video115/v4/00/8b/eb/008beb79-fc95-a24f-eb38-b2cc5a472d4e/8864491155490101.jpg/{w}x{h}mv.{f}"
size="300"
type="song"></mediaitem-artwork>
</div>
<div class="title text-overflow-elipsis">
Name
</div>
<div class="subtitle text-overflow-elipsis">
Artist Name
</div>
</div>
</div>
</template>