updated layout for homepage, added disabling of more buttons
This commit is contained in:
parent
a1b0439bd0
commit
7aa4b9baba
|
|
@ -188,11 +188,11 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"title": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD1)",
|
||||
"details": "The House Foundation for the Arts, 2012",
|
||||
"title": "MONK MIX (CD1)",
|
||||
"details": "Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
|
||||
"parent_dir": "music_sound_various",
|
||||
"media": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD1)_The House Foundation for the Arts, 2012",
|
||||
"image": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD1)_The House Foundation for the Arts, 2012.jpg",
|
||||
"media": "MONK MIX (CD1)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
|
||||
"image": "MONK MIX (CD1)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012.jpg",
|
||||
"album": true,
|
||||
"tracks": [
|
||||
{
|
||||
|
|
@ -250,11 +250,11 @@
|
|||
]
|
||||
},
|
||||
{
|
||||
"title": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD2)",
|
||||
"details": "The House Foundation for the Arts, 2012",
|
||||
"title": "MONK MIX (CD2)",
|
||||
"details": "Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
|
||||
"parent_dir": "music_sound_various",
|
||||
"media": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD2)_The House Foundation for the Arts, 2012",
|
||||
"image": "MONK MIX Remixes and Interpretations of Music by Meredith Monk (CD2)_The House Foundation for the Arts, 2012.jpg",
|
||||
"media": "MONK MIX (CD2)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012",
|
||||
"image": "MONK MIX (CD2)_Remixes and Interpretations of Music by Meredith Monk The House Foundation for the Arts, 2012.jpg",
|
||||
"album": true,
|
||||
"tracks": [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export default new Router({
|
|||
short: 'ECM',
|
||||
icon: 'headphones',
|
||||
group: 'Music & Sound',
|
||||
disabled: true,
|
||||
plugins: [
|
||||
lazy(() => import('../views/audio.js'))
|
||||
],
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ class Footer extends LitElement {
|
|||
|
||||
renderLink(r, first = false) {
|
||||
return html`
|
||||
${first && !r.disabled ? html`<span class="break"></span>` : '' }
|
||||
${first ? html`<span class="break"></span>` : '' }
|
||||
${!r.disabled ? html`<a href=${r.path} class="${r.path == this.path ? 'selected' : ''}">
|
||||
<mm-icon name=${r.icon}></mm-icon>
|
||||
<span>
|
||||
|
|
@ -60,9 +60,12 @@ class Footer extends LitElement {
|
|||
${this.navigation?.map(r => {
|
||||
if (!r.hide) {
|
||||
if (Array.isArray(r)) {
|
||||
return r.map((r, i) => this.renderLink(r, i == 0))
|
||||
return r.map((r, i) =>
|
||||
html`${i == 0 ? html`<span class="break"></span>` : ''}
|
||||
${this.renderLink(r, false)}`
|
||||
)
|
||||
} else {
|
||||
return this.renderLink(r, r.path != '/')
|
||||
return this.renderLink(r, r.path != '/' && !r.disabled)
|
||||
}
|
||||
}
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { formatSeconds } from '../api/utils'
|
|||
import MainCSS from '../assets/styles/main.scss?inline'
|
||||
|
||||
import './RangeSlider.js'
|
||||
import './Loading.js'
|
||||
|
||||
class ModularPlayer extends LitElement {
|
||||
static properties = {
|
||||
|
|
@ -17,7 +16,6 @@ class ModularPlayer extends LitElement {
|
|||
position: { state: true },
|
||||
playing: { state: true },
|
||||
track: { state: true },
|
||||
loading: { state: true },
|
||||
|
||||
// audio element
|
||||
audio: { state: true },
|
||||
|
|
@ -32,13 +30,16 @@ class ModularPlayer extends LitElement {
|
|||
this.track = 0
|
||||
this.position = 0
|
||||
this.duration = 0
|
||||
this.loading = true
|
||||
|
||||
this._initAudio()
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
console.log(this.details)
|
||||
willUpdate(att) {
|
||||
if (att.has('details')) {
|
||||
this.track = 0
|
||||
}
|
||||
|
||||
this.requestUpdate()
|
||||
}
|
||||
|
||||
_getTrack = new Task(
|
||||
|
|
@ -66,16 +67,6 @@ class ModularPlayer extends LitElement {
|
|||
_initAudio() {
|
||||
this.audio = document.createElement('audio')
|
||||
|
||||
this.audio.addEventListener('loadstart', () => {
|
||||
this.loading = true
|
||||
})
|
||||
|
||||
this.audio.addEventListener('canplay', () => {
|
||||
if (this.details.tracks) {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
|
||||
this.audio.addEventListener('play', () => {
|
||||
this.playing = true
|
||||
})
|
||||
|
|
@ -282,13 +273,16 @@ ${ this.details ?
|
|||
}
|
||||
|
||||
.player:has(.tracklist) {
|
||||
grid-template-rows: 67% 0.5fr 0.3fr 1fr;
|
||||
grid-template-rows: 67% 1fr 1fr 1fr;
|
||||
padding-block-end: 2em;
|
||||
gap: 0;
|
||||
|
||||
& > header {
|
||||
margin-block-start: 1.5em;
|
||||
margin-block-end: 2em;
|
||||
margin-block: 1.25em;
|
||||
}
|
||||
|
||||
& .info {
|
||||
padding-block-end: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,19 +15,10 @@ class NavCard extends LitElement {
|
|||
this.route = {}
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
console.log(this.route)
|
||||
this.shadowRoot.host.addEventListener('click', () => {
|
||||
if (!this.route.disabled) {
|
||||
Router.navigate(this.route.path)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
navigate(path) {
|
||||
if (!this.route.disabled) {
|
||||
path = path || this.route.path
|
||||
Router.navigate(path)
|
||||
navigate(route) {
|
||||
route = route || this.route
|
||||
if (!route.disabled) {
|
||||
Router.navigate(route.path)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -38,23 +29,30 @@ class NavCard extends LitElement {
|
|||
<header class="title">
|
||||
<span>${this.route[0].group}</span>
|
||||
</header>
|
||||
${this.route.map(r =>
|
||||
!r.disabled ? html`
|
||||
<button @click=${() => this.navigate(r.path)}>
|
||||
<mm-icon name=${r.icon}></mm-icon>
|
||||
${r.title}
|
||||
</button>
|
||||
` : ''
|
||||
)}
|
||||
<div class="buttons">
|
||||
${this.route.map(r =>
|
||||
html`
|
||||
<button @click=${() => this.navigate(r)}>
|
||||
${!r.disabled ?
|
||||
html`<mm-icon name=${r.icon}></mm-icon>
|
||||
${r.title}`
|
||||
: html`<span class="disabled">${r.title} coming soon.</span>`
|
||||
}
|
||||
</button>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
:
|
||||
html`
|
||||
<header class="title">
|
||||
<span>${this.route?.title}</span>
|
||||
</header>
|
||||
<button class="iconOnly" @click=${this.navigate}>
|
||||
${!this.route.disabled ? html`<mm-icon name=${this.route.icon}></mm-icon>` : html`<span>coming soon...</span>`}
|
||||
</button>
|
||||
<div class="buttons single">
|
||||
<button class="iconOnly" @click=${() => this.navigate()}>
|
||||
${!this.route.disabled ? html`<mm-icon name=${this.route.icon}></mm-icon>` : html`<span class="disabled">coming soon</span>` }
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
|
|
@ -76,11 +74,28 @@ class NavCard extends LitElement {
|
|||
|
||||
.card {
|
||||
display: grid;
|
||||
grid-auto-flow: rows;
|
||||
gap: 0.5em;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 0.4em;
|
||||
margin-inline: var(--inline-padding);
|
||||
cursor: pointer;
|
||||
font-size: 1.65em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4em;
|
||||
padding-block-end: 0.75em;
|
||||
|
||||
&:not(.single) > * {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.single {
|
||||
justify-content: center;
|
||||
padding-block-end: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
mm-icon {
|
||||
|
|
@ -91,14 +106,14 @@ class NavCard extends LitElement {
|
|||
}
|
||||
|
||||
.title {
|
||||
padding-bottom: 0.75em;
|
||||
margin-block-start: 1em;
|
||||
padding-bottom: 0.25em;
|
||||
margin-block-start: 0.75em;
|
||||
font-size: 0.75em;
|
||||
text-align: center;
|
||||
border-bottom: thin solid var(--highlight-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2.5em;
|
||||
min-height: 2em;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
|
|
@ -122,8 +137,12 @@ class NavCard extends LitElement {
|
|||
text-shadow: 0 0 5px #ffffff;
|
||||
margin: 0;
|
||||
|
||||
&:has(span) {
|
||||
&:has(.disabled) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--neutral-gradient-600);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.iconOnly {
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ class AudioView extends LitElement {
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="player ${this.selected.tracks ? '' : 'single'}">
|
||||
<div class="player ${this.selected?.tracks ? '' : 'single'}">
|
||||
<div>
|
||||
<mm-audio-player .details=${this.selected}></mm-audio-player>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue