Style channel cards more responsive

Now they go from portrait to landscape using container queries
radio4000 · Apr 20, 2024 · 437e8f5 · 437e8f5
1 parent 5ae109b
commit 437e8f5
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 22 deletions.
diff --git a/public/themes/jellybeans.css b/public/themes/jellybeans.css
@@ -216,25 +216,36 @@ r4-track-create {
 		min-height: 3em;
 	}
 }
+
 /* Cards */
 r4-channel-card {
 	background: var(--c-bg2);
 }
 [color-scheme='dark'] r4-channel-card {
 	--c-border: rgb(50, 51, 70);
 }
+r4-channel-card r4-button-play {
+	margin-top: var(--s);
+	margin-left: var(--s);
+}
+r4-channel-card-body {
+	padding: var(--s);
+}
 r4-channel-card r4-channel-slug {
 	display: none;
 }
-r4-channel-card r4-channel-description {
-	margin-left: 0.5em;
-}
 
 /* Track lists */
 r4-list-item r4-track {
 	border-bottom: 1px solid var(--c-border);
 	padding: calc(var(--s) / 2) 0;
 }
+r4-list-item r4-track:hover {
+	background-color: color-mix(in oklch, var(--c-bg) 100%, black 2%);
+}
+[color-scheme="dark"] r4-list-item r4-track:hover {
+	background-color: color-mix(in oklch, var(--c-bg) 100%, white 8%);
+}
 r4-track-title,
 r4-track-description {
 	font-size: 14px;

diff --git a/src/components/r4-channel-card.js b/src/components/r4-channel-card.js
@@ -39,20 +39,27 @@ export default class R4ChannelCard extends LitElement {
 			return html`Loading...`
 		}
 		return html`
-			<r4-button-play .channel=${this.channel}></r4-button-play>
+			<r4-channel-card-inner>
 			<a href="${this.url}">
 				${this.renderAvatar()}
-				<r4-channel-name>${this.channel.name}</r4-channel-name>
-				<r4-channel-slug>@${this.channel.slug}</r4-channel-slug>
 			</a>
-			${this.renderDescription()} ${this.renderUrl()}
+			<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-actions hidden>
 				<menu>
 					<li><a href="${this.channelOrigin + '/feed'}">Feed</a></li>
 					<li><a href="${this.channelOrigin + '/following'}">Following</a></li>
 					<li><button type="button" role="menuitem" @click=${() => this.openDialog('share')}>Share</button></li>
 				</menu>
 			</r4-actions>
+			</r4-channel-card-inner>
 		`
 	}
 	renderDescription() {
@@ -62,7 +69,7 @@ export default class R4ChannelCard extends LitElement {
 	}
 	renderAvatar() {
 		if (this.channel.image) {
-			return html`<r4-avatar size="small" image=${this.channel.image}></r4-avatar>`
+			return html`<r4-avatar size="medium" image=${this.channel.image}></r4-avatar>`
 		}
 	}
 	renderUrl() {

diff --git a/src/index.css b/src/index.css
@@ -401,27 +401,21 @@ r4-supabase-modifiers form {
 	display: flex;
 	flex-wrap: wrap;
 }
-r4-channel-card,
-r4-channel-card a,
 r4-track {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 }
-r4-channel-card {
-	flex: 1;
-	background-color: var(--c-bg);
-	border: 1px solid var(--c-border);
-	border-radius: var(--s-radius);
-	padding: var(--s);
+
+r4-avatar {
+	display: inline-flex;
 }
-r4-channel-card r4-avatar,
-r4-channel-card r4-button-play {
-	padding: calc(var(--s) / 2);
+r4-avatar picture,
+r4-avatar img {
+	width: 100%;
 }
-r4-avatar,
-r4-avatar picture {
-	display: inline-flex;
+r4-avatar img {
+	vertical-align: bottom;
 }
 
 r4-list {
@@ -444,6 +438,43 @@ r4-avatar-upload form {
 	align-items: center;
 }
 
+/* Default, portrait card layout */
+r4-channel-card {
+	display: block;
+	flex: 1;
+	background-color: var(--c-bg);
+	border: 1px solid var(--c-border);
+	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: 500px) {
+	r4-channel-card-inner {
+		flex-direction: row;
+		align-items: center;
+		gap: var(--s);
+	}
+	r4-channel-card a:has(r4-avatar) {
+		width: 13rem;
+	}
+}
+
+r4-channel-description {
+	display: block;
+}
+
 r4-supabase-modifiers form {
 	display: flex;
 	flex-wrap: wrap;