added sticky bar to artist page, added .more-btn-round css class

This commit is contained in:
booploops 2022-01-18 05:00:06 -08:00
parent d5013a9c15
commit 0d9e22b711
4 changed files with 99 additions and 81 deletions

View file

@ -1,6 +1,6 @@
<script type="text/x-template" id="cider-artist">
<div class="content-inner artist-page">
<div class="artist-header" :style="getArtistPalette(data)" :key="data.id">
<div class="artist-header" :style="getArtistPalette(data)" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
<animatedartwork-view
:priority="true"
v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
@ -29,14 +29,26 @@
<h1>{{ data.attributes.name }}</h1>
</div>
</div>
<button class="artist-more" @click="artistMenu">
<div style=" margin-top: -1px;
margin-left: -5px;
width: 36px;
height: 36px;">
<%- include("../svg/more.svg") %>
<button class="more-btn-round" @click="artistMenu">
<div class="svg-icon"></div>
</button>
</div>
<div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="row">
<div class="col-auto flex-center">
<button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
</div>
</button>
<div class="col">
<h3>{{ data.attributes.name }}</h3>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" @click="artistMenu">
<div class="svg-icon"></div>
</button>
</div>
</div>
</div>
<div class="artist-body">
<div class="row well">
@ -129,10 +141,14 @@
data: function () {
return {
topSongsExpanded: false,
app: this.$root
app: this.$root,
headerVisible: true
}
},
methods: {
isHeaderVisible(visible) {
this.headerVisible = visible
},
artistMenu (event) {
let self = this
let followAction = "follow"

View file

@ -78,13 +78,8 @@
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
Confirm?
</button>
<button class="playlist-more" style="float:right;" @click="menu">
<div style=" margin-top: -1px;
margin-left: -5px;
width: 36px;
height: 36px;">
<%- include("../svg/more.svg") %>
</div>
<button class="more-btn-round" style="float:right;" @click="menu">
<div class="svg-icon"></div>
</button>
</div>
</div>
@ -95,7 +90,7 @@
</div>
</div>
<div class="playlist-floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="row">
<div class="col">
<h3>{{data.attributes ? (data.attributes.name ??
@ -122,13 +117,8 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="playlist-more" @click="menu">
<div style=" margin-top: -1px;
margin-left: -5px;
width: 36px;
height: 36px;">
<%- include("../svg/more.svg") %>
</div>
<button class="more-btn-round" style="float:right;" @click="menu">
<div class="svg-icon"></div>
</button>
</div>
</div>