diff --git a/public/themes/classic.css b/public/themes/classic.css index 75ef03fa..ffe13e0a 100644 --- a/public/themes/classic.css +++ b/public/themes/classic.css @@ -501,9 +501,7 @@ radio4000-player .PlayerControl-group .Btn { min-height: 0; } -r4-page-channel-tracks r4-page-header h1 a::before, -r4-page-channel r4-page-header h1 a::before, -r4-channel-card r4-channel-slug::before { +r4-channel-slug::before { content: '@'; } @@ -584,9 +582,11 @@ r4-page-channel { } } r4-map { + & r4-map-popup dialog { + max-width: calc(var(--s-container--channel-card) / 2.5); + } & r4-channel-card { flex-direction: column; - max-width: calc(var(--s-container--channel-card) / 2); & r4-channel-url a { white-space: pre-wrap; word-break: break-all; diff --git a/src/components/r4-app-user-menu.js b/src/components/r4-app-user-menu.js index 8f657b04..c53ea3ac 100644 --- a/src/components/r4-app-user-menu.js +++ b/src/components/r4-app-user-menu.js @@ -49,9 +49,11 @@ export default class R4AppUserMenu extends LitElement { } renderChannelLinks() { if (this.channel) { - return html`<a aria-current=${this.isCurrent(`/${this.channel.slug}`)} href=${this.href + '/' + this.channel.slug} - >${this.channel.slug}</a - >` + return html` + <a aria-current=${this.isCurrent(`/${this.channel.slug}`)} href=${this.href + '/' + this.channel.slug}> + <r4-channel-slug> ${this.channel.slug} </r4-channel-slug> + </a> + ` } else { return html`<a aria-current=${this.isCurrent('/new')} href=${this.href + '/new'}>New radio</a>` } diff --git a/src/pages/base-channel.js b/src/pages/base-channel.js index 1c6172d7..84376dc5 100644 --- a/src/pages/base-channel.js +++ b/src/pages/base-channel.js @@ -155,7 +155,11 @@ export default class BaseChannel extends R4Page { return html` <menu> <li> - <h1><a aria-current=${this.isCurrent(o)} href=${o}>${this.channel.slug}</a></h1> + <h1> + <a aria-current=${this.isCurrent(o)} href=${o}> + <r4-channel-slug>${this.channel.slug}</r4-channel-slug> + </a> + </h1> </li> <li> <a aria-current=${this.isCurrent(o + '/tracks')} href=${o + '/tracks'}>Tracks</a> diff --git a/src/pages/r4-page-add.js b/src/pages/r4-page-add.js index 27519b0d..951347d5 100644 --- a/src/pages/r4-page-add.js +++ b/src/pages/r4-page-add.js @@ -61,7 +61,9 @@ export default class R4PageAdd extends BaseChannel { <h1><a aria href="${this.config.href}/add?slug=${this.selectedSlug}">Add track</a></h1> </li> <li> - <a aria href="${this.config.href}/${this.selectedSlug}">${this.selectedSlug}</a> + <a aria href="${this.config.href}/${this.selectedSlug}"> + <r4-channel-slug> ${this.selectedSlug} </r4-channel-slug> + </a> </li> </menu> ` diff --git a/src/pages/r4-page-channel-tracks.js b/src/pages/r4-page-channel-tracks.js index 4bd7719f..e680a9cc 100644 --- a/src/pages/r4-page-channel-tracks.js +++ b/src/pages/r4-page-channel-tracks.js @@ -45,7 +45,11 @@ export default class R4PageChannelTracks extends BaseChannel { return html` <menu> <li> - <h1><a href=${this.channelOrigin}>${this.slug}</a></h1> + <h1> + <a href=${this.channelOrigin}> + <r4-channel-slug> ${this.slug} </r4-channel-slug> + </a> + </h1> </li> <li><r4-button-play .channel=${this.channel} label=" Play all"></r4-button-play></li> <li>