use r4-channel-slug to display @

radio4000 · May 17, 2024 · 7d17df0 · 7d17df0
1 parent e437582
commit 7d17df0
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>