From 7aa4b9babade94e78fe5b4dbfa7fb88182070b50 Mon Sep 17 00:00:00 2001 From: suroh Date: Thu, 12 Oct 2023 10:57:14 +0200 Subject: [PATCH] updated layout for homepage, added disabling of more buttons --- public/data/music_sound_various.json | 16 +++--- src/api/Router.js | 1 + src/components/Footer.js | 9 ++-- src/components/ModularPlayer.js | 30 +++++------ src/components/NavCard.js | 79 +++++++++++++++++----------- src/views/audio.js | 2 +- 6 files changed, 77 insertions(+), 60 deletions(-) diff --git a/public/data/music_sound_various.json b/public/data/music_sound_various.json index 9451f60..6aac464 100644 --- a/public/data/music_sound_various.json +++ b/public/data/music_sound_various.json @@ -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": [ { diff --git a/src/api/Router.js b/src/api/Router.js index b0ebd1f..d0b901e 100644 --- a/src/api/Router.js +++ b/src/api/Router.js @@ -52,6 +52,7 @@ export default new Router({ short: 'ECM', icon: 'headphones', group: 'Music & Sound', + disabled: true, plugins: [ lazy(() => import('../views/audio.js')) ], diff --git a/src/components/Footer.js b/src/components/Footer.js index cdd3039..2dc2133 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -43,7 +43,7 @@ class Footer extends LitElement { renderLink(r, first = false) { return html` - ${first && !r.disabled ? html`` : '' } + ${first ? html`` : '' } ${!r.disabled ? html` @@ -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`` : ''} + ${this.renderLink(r, false)}` + ) } else { - return this.renderLink(r, r.path != '/') + return this.renderLink(r, r.path != '/' && !r.disabled) } } })} diff --git a/src/components/ModularPlayer.js b/src/components/ModularPlayer.js index b64cb1b..5912f43 100644 --- a/src/components/ModularPlayer.js +++ b/src/components/ModularPlayer.js @@ -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; } } diff --git a/src/components/NavCard.js b/src/components/NavCard.js index 5736ac7..1f1d50e 100644 --- a/src/components/NavCard.js +++ b/src/components/NavCard.js @@ -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 {
${this.route[0].group}
- ${this.route.map(r => - !r.disabled ? html` - - ` : '' - )} +
+ ${this.route.map(r => + html` + + ` + )} +
` : html`
${this.route?.title}
- +
+ +
` } @@ -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 { diff --git a/src/views/audio.js b/src/views/audio.js index 1538415..a18fd66 100644 --- a/src/views/audio.js +++ b/src/views/audio.js @@ -91,7 +91,7 @@ class AudioView extends LitElement { -
+