playlist/album revamp, temp disabled inline playlists
revamped playlists/albums pages temporarily disabled inline versions until they are updated
This commit is contained in:
booploops
parent
355495c6da
commit
26d17be145
7 changed files with 216 additions and 152 deletions
13
src/renderer/less/bootstrap.less
vendored
13
src/renderer/less/bootstrap.less
vendored
|
|
@ -991,6 +991,18 @@
|
|||
opacity : 0;
|
||||
}
|
||||
|
||||
.fade {
|
||||
transition: opacity 0.15s var(--appleEase);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
.fade:not(.show) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.modal.fade .modal-dialog {
|
||||
transition: none;
|
||||
|
|
@ -2424,6 +2436,7 @@ fieldset:disabled .btn {
|
|||
-webkit-user-drag: none;
|
||||
// transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
|
||||
font-weight: 500;
|
||||
margin: 0px 4px;
|
||||
&:hover {
|
||||
// transition: transform .35s var(--appleEase), background-color 0s var(--appleEase);
|
||||
background-color: var(--hover);
|
||||
|
|
|
|||
|
|
@ -493,10 +493,41 @@
|
|||
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
|
||||
top : 0;
|
||||
padding-top : var(--navigationBarHeight);
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.playlist-body {
|
||||
padding : var(--contentInnerPadding) 2em;
|
||||
margin-top: -75px;
|
||||
padding : 32px;
|
||||
// margin-top: -75px;
|
||||
overflow-y:overlay;
|
||||
height:100%;
|
||||
padding:0px;
|
||||
background-color: var(--color1);
|
||||
|
||||
&.scrollbody {
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin:0px;
|
||||
.tab-pane {
|
||||
height: 100%;
|
||||
overflow-y: overlay;
|
||||
overflow-x:hidden;
|
||||
padding: var(--contentInnerPadding);
|
||||
.well {
|
||||
margin:0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floating-header {
|
||||
|
|
@ -510,6 +541,7 @@
|
|||
background : rgba(0, 0, 0, 0.25);
|
||||
top : var(--navigationBarHeight);
|
||||
transition : opacity 0.1s var(--appleEase);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.playlist-display {
|
||||
|
|
|
|||
|
|
@ -1652,7 +1652,8 @@ const app = new Vue({
|
|||
params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright"
|
||||
}
|
||||
|
||||
if (this.cfg.advanced.experiments.includes('inline-playlists')) {
|
||||
// if (this.cfg.advanced.experiments.includes('inline-playlists')) {
|
||||
if(false) {
|
||||
let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
|
||||
if (app.page.includes("playlist") || app.page.includes("album")) {
|
||||
showModal = false
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script type="text/x-template" id="mediaitem-scroller-horizontal">
|
||||
<vue-horizontal>
|
||||
<vue-horizontal ref="horizontal">
|
||||
<slot></slot>
|
||||
<mediaitem-square :key="item?.id ?? ''" :kind="kind" :item="item" v-for="item in items"></mediaitem-square>
|
||||
</vue-horizontal>
|
||||
|
|
@ -24,6 +24,9 @@
|
|||
app: this.$root,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.$refs.horizontal.refresh()
|
||||
},
|
||||
methods: {}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -142,8 +142,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div class="playlist-body scrollbody">
|
||||
|
||||
<b-tabs pills align="center" content-class="mt-3">
|
||||
<b-tab title="Tracks">
|
||||
<div class="">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
|
|
@ -198,8 +201,10 @@
|
|||
</div>
|
||||
</template>
|
||||
<hr>
|
||||
<template v-if="typeof data.meta != 'undefined'">
|
||||
<div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
</b-tab>
|
||||
<template v-if="typeof data.views != 'undefined'">
|
||||
<b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views[view].attributes.title }}</h3>
|
||||
|
|
@ -212,8 +217,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
</b-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -278,7 +285,8 @@
|
|||
}
|
||||
console.log(this.nestedPlaylist)
|
||||
|
||||
}},
|
||||
}
|
||||
},
|
||||
isHeaderVisible(visible) {
|
||||
this.headerVisible = visible
|
||||
},
|
||||
|
|
|
|||
|
|
@ -151,12 +151,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div class="playlist-body scrollbody">
|
||||
|
||||
<b-tabs pills align="center" content-class="mt-3">
|
||||
<b-tab title="Tracks">
|
||||
<div class="">
|
||||
<div style="width:100%">
|
||||
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
|
||||
v-model="data.relationships.tracks.data" @start="drag=true"
|
||||
@end="drag=false;put()">
|
||||
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
|
||||
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
|
||||
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
|
||||
:showIndex="true"
|
||||
|
|
@ -183,8 +185,7 @@
|
|||
<div class="friends-info" v-if="itemBadges.length != 0">
|
||||
<div class="well">
|
||||
<div class="badge-container">
|
||||
<div class="socialBadge"
|
||||
:title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
<div class="socialBadge" :title="`${badge.attributes.name} - @${badge.attributes.handle}`"
|
||||
v-for="badge in itemBadges">
|
||||
<mediaitem-artwork
|
||||
:url="badge.attributes.artwork.url"
|
||||
|
|
@ -209,20 +210,26 @@
|
|||
</div>
|
||||
</template>
|
||||
<hr>
|
||||
<template v-if="typeof data.meta != 'undefined'">
|
||||
<div v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
</b-tab>
|
||||
<template v-if="typeof data.views != 'undefined'">
|
||||
<b-tab lazy :title="data.views[view].attributes.title" v-for="view in data.meta.views.order" v-if="data.views[view].data.length != 0">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ data.views[view].attributes.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mediaitem-scroller-horizontal
|
||||
:items="data.views[view].data"></mediaitem-scroller-horizontal>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</b-tab>
|
||||
</template>
|
||||
|
||||
</b-tabs>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -919,7 +919,7 @@
|
|||
{{$root.getLz('settings.option.experimental.inline_playlists')}}
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
|
||||
<input type="checkbox" disabled v-model="app.cfg.advanced.experiments.includes('inline-playlists')" @click="app.cfg.advanced.experiments.includes('inline-playlists') ? removeExperiment('inline-playlists') : addExperiment('inline-playlists')" switch/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue