From fda39412339d77e48546908b2acedae054e06756 Mon Sep 17 00:00:00 2001
From: Oskar Rough <oskar@rough.dk>
Date: Sun, 21 Apr 2024 10:01:38 +0200
Subject: [PATCH] Mobile styles

---
 public/themes/jellybeans.css | 55 +++++++++++++++++++++++++++---------
 src/pages/r4-page-explore.js |  4 ++-
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/public/themes/jellybeans.css b/public/themes/jellybeans.css
index 3d7d6830..72a08901 100644
--- a/public/themes/jellybeans.css
+++ b/public/themes/jellybeans.css
@@ -135,23 +135,25 @@ r4-app input[type='url'],
 r4-app textarea {
 	background: var(--c-bg2);
 	font-size: 14px;
-}
 
-/* r4-app input[type="text"]:hover, */
-/* r4-app input[type="number"]:hover, */
-/* r4-app input[type="email"]:hover, */
-/* r4-app input[type="password"]:hover, */
-/* r4-app input[type="search"]:hover, */
-/* r4-app input[type="url"]:hover, */
-/* r4-app textarea:hover { */
-/* 	background-color: var(--c-bg25); */
-/* } */
+	 &:hover {
+		 /* background-color: var(--c-bg3); */
+	}
+}
 
-r4-app button {
-	padding: 0 1rem;
+r4-app {
+	h1,
+	h2,
+	h3,
+	p {
+		margin: 0 0 var(--s);
+	}
 }
 
 /* "Buttons" */
+r4-app button {
+	padding: 0 var(--s);
+}
 r4-app select,
 r4-app button {
 	font-size: 1rem;
@@ -235,10 +237,16 @@ r4-channel-card r4-channel-slug {
 	display: none;
 }
 
+r4-channel-card + menu {
+	margin-bottom: var(--s);
+}
+
 /* Track lists */
 r4-list-item r4-track {
+	gap: calc(var(--s) / 2);
 	border-bottom: 1px solid var(--c-border);
-	padding: calc(var(--s) / 2) 0;
+	padding: calc(var(--s) / 2);
+	padding-right: 0;
 }
 r4-list-item r4-track:hover {
 	background-color: color-mix(in oklch, var(--c-bg) 100%, black 2%);
@@ -249,11 +257,15 @@ r4-list-item r4-track:hover {
 r4-track-title,
 r4-track-description {
 	font-size: 14px;
+
 }
 r4-track-title a {
 	color: var(--c-fg);
 	text-decoration: none;
-	margin: 0 0.5em;
+	/* margin: 0 0.5em; */
+	/* overflow: hidden; */
+	/* text-overflow: ellipsis; */
+	/* white-space: nowrap; */
 }
 [color-scheme='dark'] r4-track-title a {
 	color: var(--c-gray2);
@@ -298,6 +310,11 @@ r4-page-explore r4-page-main > r4-list {
 	align-items: stretch;
 }
 
+r4-page-channel {
+	r4-channel-card {
+		text-align: center;
+	}
+}
 r4-page-channel r4-page-header r4-channel-name {
 	font-size: 2rem;
 }
@@ -363,3 +380,13 @@ radio4000-player .PlayerControl-group .Btn {
 .TrackItem.active .TrackItem-title {
 	background-color: var(--c-link) !important;
 }
+
+/* Full-width pages */
+r4-page-channel-tracks,
+r4-page-channel  {
+	r4-page-main {
+		padding-left: 0;
+		padding-right: 0;
+	}
+}
+
diff --git a/src/pages/r4-page-explore.js b/src/pages/r4-page-explore.js
index 73e44e97..afe025a7 100644
--- a/src/pages/r4-page-explore.js
+++ b/src/pages/r4-page-explore.js
@@ -30,7 +30,9 @@ export default class R4PageExplore extends R4Page {
 				<r4-query .initialQuery=${this.query} @data=${this.handleData}></r4-query>
 			</r4-page-header>
 			<r4-page-main>
-				<r4-list>${this.renderListItems()}</r4-list>
+				<section>
+					<r4-list>${this.renderListItems()}</r4-list>
+				</section>
 				<p>
 					Missing a radio? The radios you see above have all moved to the new Radio4000.<br />
 					Other radios can still be browsed on <a href="https://v1.radio4000.com">v1</a>.