${this.details?.title}
@@ -54,10 +62,18 @@ class AudioCard extends LitElement { font-size: 3em; } + .albumCover { + display: block; + height: 3em; + aspect-ratio: 1 / 1; + object-fit: cover; + background: lightgrey; + } + .card { display: grid; grid-auto-flow: column; - grid-template-columns: min-content 1fr; + grid-template-columns: auto 1fr; gap: 1em; align-items: center; padding-inline: 0.75em; @@ -73,6 +89,10 @@ class AudioCard extends LitElement { .card.selected { outline: 2px solid var(--green-400, black); } + + .info { + max-width: 30ch; + } ` ] } diff --git a/src/components/Footer.js b/src/components/Footer.js index d2acabc..cdd3039 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -43,13 +43,13 @@ class Footer extends LitElement { renderLink(r, first = false) { return html` - ${first ? html`` : '' } - + ${first && !r.disabled ? html`` : '' } + ${!r.disabled ? html`
${this.details.tracks ? html`
-
+ 
+
@@ -191,7 +210,7 @@ ${ this.details ?
` : html``}
-
@@ -216,7 +235,7 @@ ${ this.details ?
@input=${this._seekTrack}
class="progress"
>
- 
+
`
}
@@ -263,11 +282,11 @@ ${ this.details ?
}
.player:has(.tracklist) {
- grid-template-rows: 60% 0.5fr 0.3fr 1fr;
+ grid-template-rows: 67% 0.5fr 0.3fr 1fr;
padding-block-end: 2em;
gap: 0;
- & header {
+ & > header {
margin-block-start: 1.5em;
margin-block-end: 2em;
}
@@ -300,23 +319,36 @@ ${ this.details ?
.tracklist {
--tracklist-padding: calc(var(--padding) * 2);
- position: relative;
+ display: flex;
+ flex-direction: column;
background: var(--neutral-gradient-400);
height: 100%;
- > h2 {
+ & header {
margin-inline: var(--tracklist-padding);
- margin-block-start: 0.75em;
+ margin-block-start: 1em;
+ margin-block-end: 0.75em;
padding-block-start: 0.75em;
border-block-start: thin solid var(--green-400);
+ display: flex;
+ gap: 0.5em;
+ align-items: end;
+ color: black;
+
+ & img {
+ height: 4em;
+ aspect-ratio: 1 / 1;
+ }
+
+ & > h2 {
+ line-height: 1;
+ max-width: 15ch;
+ }
}
- > .list {
- position: absolute;
- bottom: 0;
- top: calc(var(--tracklist-padding) * 2.5);
- right: var(--tracklist-padding);
- left: var(--tracklist-padding);
+ & .list {
+ flex-grow: 1;
+ margin-inline: var(--tracklist-padding);
overflow-x: hidden;
overflow-y: auto;
border-radius: 0.75em 0.75em 0 0;
@@ -391,6 +423,7 @@ ${ this.details ?
}
.info:has(.waveform) {
+
& .time_pos,
& .time_dur {
position: absolute;
diff --git a/src/components/NavCard.js b/src/components/NavCard.js
index 473ab32..5736ac7 100644
--- a/src/components/NavCard.js
+++ b/src/components/NavCard.js
@@ -18,34 +18,42 @@ class NavCard extends LitElement {
firstUpdated() {
console.log(this.route)
this.shadowRoot.host.addEventListener('click', () => {
- Router.navigate(this.route.path)
+ if (!this.route.disabled) {
+ Router.navigate(this.route.path)
+ }
})
}
navigate(path) {
- path = path || this.route.path
- Router.navigate(path)
+ if (!this.route.disabled) {
+ path = path || this.route.path
+ Router.navigate(path)
+ }
}
render() {
return html`
${this.details.title}
+${this.details.title}
+-
${this.details.tracks.map((t, i) => html`
-
- ${t} + ${t.title} `)}
${this.details.tracks ? this.details?.tracks[this.track] : this.details.title}
+${this.details.tracks ? this.details?.tracks[this.track].title : this.details.title}
${this.details.tracks ? '' : html`${this.details.details}
`}
+
${Array.isArray(this.route) ? html`
-
+ ${this.route[0].group}
+
${this.route.map(r =>
- html`
+ !r.disabled ? html`
- `
+ ` : ''
)}
`
:
html`
-
${this.route[0].group}
+${this.route?.title}
-