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

adjusted artist page to look like eleven artist CSS

Browse source
This commit is contained in:
booploops 2021-12-06 21:21:30 -08:00
parent 22194be526
commit b05b826f4f
2 changed files with 33 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1356,6 +1356,14 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 16px; padding: 16px;
} }
.artist-page .well {
background: rgba(200, 200, 200, 0.05);
border-radius: 10px;
padding: 16px;
box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
margin-top: 16px;
}
.artist-page .showmoreless { .artist-page .showmoreless {
font-family: inherit; font-family: inherit;
font-size: 16px; font-size: 16px;

46
resources/cider-ui-tests/views/pages/artist.ejs
View file

@ -18,30 +18,34 @@
</div> </div>
</div> </div>
<div class="artist-body"> <div class="artist-body">
<div class="row"> <div class="row well">
<div class="col-auto" v-if="artistPage.data.views['latest-release']"> <div class="col">
<h3>Latest Release</h3> <div class="row">
<div style="width: auto;margin: 0 auto;"> <div class="col-auto" v-if="artistPage.data.views['latest-release']">
<mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data" :item="song"> <h3>Latest Release</h3>
</mediaitem-square-sp> <div style="width: auto;margin: 0 auto;">
<mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data" :item="song">
</mediaitem-square-sp>
</div>
</div>
<div class="col" v-if="artistPage.data.views['top-songs']">
<h3>Top Songs</h3>
<mediaitem-list-item
v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
:item="song"></mediaitem-list-item>
<button class="showmoreless" @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
<template v-if="!artistPage.topSongsExpanded">
Show more
</template>
<template v-else>
Show less
</template>
</button>
</div>
</div> </div>
</div> </div>
<div class="col" v-if="artistPage.data.views['top-songs']">
<h3>Top Songs</h3>
<mediaitem-list-item
v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
:item="song"></mediaitem-list-item>
<button class="showmoreless" @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
<template v-if="!artistPage.topSongsExpanded">
Show more
</template>
<template v-else>
Show less
</template>
</button>
</div>
</div> </div>
<div class="row"> <div class="row well">
<div class="col"> <div class="col">
<template v-for="(view) in artistPage.data.meta.views.order" <template v-for="(view) in artistPage.data.meta.views.order"
v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')"> v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">