harmonize and text

radio4000 · Apr 26, 2024 · b48c71e · b48c71e
1 parent 44a66e4
commit b48c71e
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 88 deletions.
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -189,10 +189,6 @@ r4-page-header {
 	align-self: flex-start;
 	background-color: var(--c-bg);
 }
-r4-page-header {
-	padding-left: calc(var(--s) / 2);
-	padding-right: calc(var(--s) / 2);
-}
 r4-page-main,
 r4-page-footer {
 	padding-left: var(--s);
@@ -223,7 +219,6 @@ r4-page-header {
 	display: flex;
 	flex-wrap: wrap;
 	& h1 {
-		font-size: 1.2em;
 		margin: 0;
 		height: 100%;
 		& + * {
@@ -232,6 +227,7 @@ r4-page-header {
 	}
 	& menu {
 		align-items: stretch;
+		margin: calc(var(--s) / 4);
 	}
 }
 
@@ -276,44 +272,30 @@ r4-app-menu a {
 	background: none;
 }
 
+r4-list-item + r4-list-item {
+	margin-top: calc(var(--s) / 4);
+}
+
 /* Channel cards */
 r4-channel-card {
 	background-color: var(--c-bg2);
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
 }
 
 r4-channel-card r4-channel-slug {
 	display: none;
 }
 
 r4-channel-card r4-button-play {
-	margin-top: var(--s);
-	margin-left: var(--s);
+	margin: calc(var(--s) / 2);
 }
 
 r4-channel-card-body {
 	padding: var(--s);
 }
 
-/* Tracklists */
-r4-list:has(r4-track) {
-	border: 1px solid var(--c-border);
-	border-radius: var(--s-radius);
-
-	r4-list-item:first-of-type r4-track {
-		border-top-left-radius: var(--s-radius);
-		border-top-right-radius: var(--s-radius);
-	}
-
-	r4-list-item:last-of-type r4-track {
-		border-bottom-left-radius: var(--s-radius);
-		border-bottom-right-radius: var(--s-radius);
-	}
-
-	r4-list-item:not(:last-child) r4-track {
-		border-bottom: 1px solid var(--c-border);
-	}
-}
-
 /* track */
 r4-track {
 	padding: calc(var(--s) / 2);
@@ -363,6 +345,35 @@ r4-track[playing] r4-button-play button {
 	border-color: var(--c-purple);
 }
 
+/* Tracklists */
+r4-list:has(r4-track) {
+	border: 1px solid var(--c-border);
+	border-radius: var(--s-radius);
+
+	r4-list-item:first-of-type r4-track {
+		border-top-left-radius: var(--s-radius);
+		border-top-right-radius: var(--s-radius);
+	}
+
+	r4-list-item:last-of-type r4-track {
+		border-bottom-left-radius: var(--s-radius);
+		border-bottom-right-radius: var(--s-radius);
+	}
+
+	r4-list-item:not(:last-child) r4-track {
+		border-bottom: 1px solid var(--c-border);
+	}
+}
+r4-list r4-channel-description {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 50vmax;
+}
+r4-list r4-avatar {
+	max-width: 5rem;
+}
+
 /* Forms */
 r4-app form legend,
 r4-app form label {
@@ -422,35 +433,25 @@ r4-page-add form {
 radio4000-player .Layout .TrackItem {
 	background-color: inherit;
 }
-
 radio4000-player .PlayerControl-group .Btn {
 	min-height: 0;
 }
-
+r4-page-channel r4-channel-card {
+	max-width: 50rem;
+}
 r4-page-channel r4-channel-name {
 	font-size: 1.5rem;
 }
 /* Add "Listen" to the play button */
 r4-page-channel r4-channel-card r4-button-play button {
 	font-size: 1.2rem;
 }
+
 r4-page-channel r4-channel-card r4-button-play button::after {
 	display: inline;
 	content: ' Listen';
 }
 
-/* pages */
-r4-page-home,
-r4-page-explore {
-	r4-list:has(r4-channel-card) {
-		/* Differentiate channels and track lists by using a grid */
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-		gap: var(--s);
-		align-items: stretch;
-	}
-}
-
 r4-page-channel-track r4-track a {
 	/* we're on this tracck's page */
 	text-decoration: underline;

diff --git a/src/components/r4-channel-card.js b/src/components/r4-channel-card.js
@@ -39,17 +39,15 @@ export default class R4ChannelCard extends LitElement {
 			return html`<r4-loading></r4-loading>`
 		}
 		return html`
-			<r4-channel-card-inner>
-				<a href="${this.url}"> ${this.renderAvatar()} </a>
-				<r4-button-play .channel=${this.channel}></r4-button-play>
-				<r4-channel-card-body>
-					<a href="${this.url}">
-						<r4-channel-name>${this.channel.name}</r4-channel-name>
-						<r4-channel-slug>@${this.channel.slug}</r4-channel-slug>
-					</a>
-					${this.renderDescription()} ${this.renderUrl()}
-				</r4-channel-card-body>
-			</r4-channel-card-inner>
+			<a href="${this.url}"> ${this.renderAvatar()} </a>
+			<r4-button-play .channel=${this.channel}></r4-button-play>
+			<r4-channel-card-body>
+				<a href="${this.url}">
+					<r4-channel-name>${this.channel.name}</r4-channel-name>
+					<r4-channel-slug>@${this.channel.slug}</r4-channel-slug>
+				</a>
+				${this.renderDescription()} ${this.renderUrl()}
+			</r4-channel-card-body>
 		`
 	}
 	renderDescription() {

diff --git a/src/index.css b/src/index.css
@@ -92,12 +92,6 @@ r4-app section {
 	margin-top: var(--s);
 	margin-bottom: var(--s);
 }
-r4-app section:first-child:not(:only-child) {
-	margin-top: 0;
-}
-r4-app section:last-child:not(:only-child) {
-	margin-bottom: 0;
-}
 r4-app summary {
 	/* Don't want to select <summaries> text when toggling */
 	user-select: none;
@@ -507,34 +501,18 @@ r4-channel-card {
 	border-radius: var(--s-radius);
 	container: card / inline-size;
 }
-r4-channel-card-inner {
-	display: flex;
-	flex-flow: column nowrap;
-}
 r4-channel-card r4-avatar {
 	width: 100%;
 }
 r4-channel-card-body {
 	flex: 1;
 	display: block;
 }
-
-/* Horizontal card layout */
-@container card (min-width: 25rem) {
-	r4-channel-card-inner {
-		flex-direction: row;
-		align-items: center;
-		gap: var(--s);
-	}
-	r4-channel-card a:has(r4-avatar) {
-		width: calc(100vmax / 10);
-	}
-}
-
 r4-channel-description {
 	display: block;
 }
 
+/* supabase queries */
 r4-supabase-modifiers form {
 	display: flex;
 	flex-wrap: wrap;

diff --git a/src/pages/r4-page-add.js b/src/pages/r4-page-add.js
@@ -58,7 +58,7 @@ export default class R4PageAdd extends BaseChannel {
 		return html`
 			<menu>
 				<li>
-					<h1><a aria href="${this.config.href}/${this.selectedSlug}">Add track</a></h1>
+					<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>

diff --git a/src/pages/r4-page-channel.js b/src/pages/r4-page-channel.js
@@ -24,9 +24,10 @@ export default class R4PageChannel extends BaseChannel {
 		this.query = {
 			table: 'channel_tracks',
 		}
+		this.tracks = []
 	}
 
-	handleData(event) {
+	onData(event) {
 		this.tracks = event.detail.data
 	}
 
@@ -35,7 +36,7 @@ export default class R4PageChannel extends BaseChannel {
 			<r4-query
 				.defaultFilters=${[{operator: 'eq', column: 'slug', value: this.channel?.slug}]}
 				.initialQuery=${this.query}
-				@data=${this.handleData}
+				@data=${this.onData}
 			></r4-query>
 			${this.channel ? this.renderChannelShare() : null}
 		`
@@ -61,15 +62,25 @@ export default class R4PageChannel extends BaseChannel {
 	}
 
 	renderTracksList() {
-		if (!this.tracks) return null
-		return html`
-			<r4-list>
-				${repeat(
-					this.tracks,
-					(t) => t.id,
-					(t) => this.renderTrackItem(t),
-				)}
-			</r4-list>
-		`
+		console.log(this.tracks)
+		if (this.tracks.length) {
+			return html`
+				<r4-list>
+					${repeat(
+						this.tracks,
+						(t) => t.id,
+						(t) => this.renderTrackItem(t),
+					)}
+				</r4-list>
+			`
+		} else {
+			if (this.canEdit) {
+				return html`
+					<p><a href="${this.config.href}/add?slug=${this.channel.slug}"> Add </a> a first track into the radio.</p>
+				`
+			} else {
+				return html`<p>This channel does not yet have any track.</p>`
+			}
+		}
 	}
 }
diff --git a/src/pages/r4-page-home.js b/src/pages/r4-page-home.js
@@ -32,6 +32,16 @@ export default class R4PageHome extends R4Page {
 	renderHeader() {
 		if (!this.store.userChannels?.length) {
 			return html`<a href=${this.config.href}><r4-favicon></r4-favicon></a>`
+		} else {
+			return html`
+				<menu>
+					<li>
+						<h1>
+							<a href=${this.config.href}>Dashboard</a>
+						</h1>
+					</li>
+				</menu>
+			`
 		}
 	}