fix some cotnent, layout bugs, centering

radio4000 · Dec 13, 2024 · 88b24d3 · 88b24d3
1 parent 463afc4
commit 88b24d3
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -174,18 +174,22 @@ r4-layout::part(menu) {
 	position: sticky;
 	bottom: 0;
 	overflow-x: auto;
+	width: 100%;
+	display: flex;
+	justify-content: center;
 }
 r4-layout::part(panel) {
 	background-color: var(--c-bg);
 	/* z-index: 1; */
 }
+r4-layout::part(menu) {
+	z-index: 1;
+}
 r4-layout [slot='main'] {
 	z-index: 1;
 }
 r4-layout header[slot='menu'] {
-	z-index: 1;
-	justify-content: flex-start;
-	width: 100%;
+	overflow-x: auto;
 }
 
 r4-layout::part(playback-summary) {
@@ -197,7 +201,7 @@ r4-page-header {
 	top: 0;
 	z-index: 1;
 	background-color: var(--c-bg);
-	width: 100%;
+	align-self: center;
 }
 r4-page-main {
 	flex-grow: 1;
@@ -257,6 +261,7 @@ r4-app-menu {
 
 r4-app-menu,
 r4-app-user-menu {
+	/* width: 100%; */
 	& menu {
 		background-color: var(--c-bg);
 		flex-wrap: nowrap;
@@ -269,10 +274,7 @@ r4-app-user-menu {
 r4-app menu {
 	border: 1px solid var(--c-border);
 	border-radius: var(--s-radius);
-	/* justify-content: center; */
-}
-r4-app li:has(r4-query) {
-	margin-left: auto;
+	justify-content: center;
 }
 r4-app menu a {
 	white-space: nowrap;
@@ -305,6 +307,9 @@ r4-channel-card-body r4-channel-slug {
 	word-break: break-word;
 }
 
+r4-channel-delete {
+	text-align: center;
+}
 /* Channel cards */
 r4-channel-card {
 	background-color: var(--c-bg2);
@@ -574,7 +579,7 @@ r4-page-channel {
 			width: 100%;
 			justify-content: center;
 			padding: var(--s);
-			order: 3;
+			order: 0;
 			& button::after {
 				display: inline;
 				content: 'Play';

diff --git a/src/components/r4-channel-create.js b/src/components/r4-channel-create.js
@@ -7,7 +7,7 @@ fieldsTemplate.innerHTML = `
 	<slot name="fields">
 		<fieldset>
 			<label for="name">Name</label>
-			<input name="name" type="text" required />
+			<input name="name" type="text" required placeholder="Ex: my new radio" />
 		</fieldset>
 		<fieldset>
 			<label for="slug">Slug</label>

diff --git a/src/pages/r4-page-channel.js b/src/pages/r4-page-channel.js
@@ -49,7 +49,6 @@ export default class R4PageChannel extends BaseChannel {
 			return html`
 				<section>
 					${[this.renderChannelCard(), this.renderTracksList(), this.renderTimes()]}
-					<p><a href="${this.channelOrigin + '/tracks'}"> Explore tracks </a></p>
 				</section>
 			`
 		}
@@ -63,11 +62,13 @@ export default class R4PageChannel extends BaseChannel {
 		if (!this.tracks?.length) {
 			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>
+					<p><a href="${this.config.href}/add?slug=${this.channel.slug}"> Add a first track</a> into the radio channel.</p>
 				`
 			} else {
 				return html`<p>This channel does not yet have any track.</p>`
 			}
+		} else {
+			return html`<p><a href="${this.channelOrigin + '/tracks'}"> Explore tracks </a></p>`
 		}
 	}
 	renderTimes() {

diff --git a/src/pages/r4-page-home.js b/src/pages/r4-page-home.js
@@ -40,7 +40,7 @@ export default class R4PageHome extends R4Page {
 
 	renderMain() {
 		return html`
-			${this.store.userChannels?.length ? this.renderUserChannels() : this.renderBetaNote()}
+			${this.store.userChannels?.length ? this.renderUserChannels() : this.renderNewChannel()}
 			${this.store.following?.length ? this.renderFollowingChannels() : nothing}
 			${this.store.user && this.featuredChannels ? nothing : this.renderFeaturedChannels()}
 		`
@@ -89,24 +89,17 @@ export default class R4PageHome extends R4Page {
 		</r4-list-item>`
 	}
 
-	renderBetaNote() {
+	renderNewChannel() {
 		return html`
 			<section>
 				<header>
 					<p>
 						<center>Welcome to <r4-title></r4-title> <strong>version 2</strong> (v2).</center>
 					</p>
 				</header>
-				<details>
-					<summary>Joining from version 1?</summary>
-					<dialog open inline>
-						<p>
-							<a href="${this.config.hrefMigrate}">Import your radio</a> from the previous
-							<a href="${this.config.hrefV1}" target="_blank">version 1 (v1)</a> website. If you encounter any issue,
-							<a href="${this.config.href}/settings#about">get in touch</a>.
-						</p>
-					</dialog>
-				</details>
+				<menu>
+					<li><a href="${this.config.href}/new">New radio channel</a></li>
+				</menu>
 			</section>
 		`
 	}

diff --git a/src/pages/r4-page-new.js b/src/pages/r4-page-new.js
@@ -31,19 +31,23 @@ export default class R4PageNew extends R4Page {
 		return html`
 			<section>
 				<header>
-					<p>To create a new <r4-title></r4-title> channel, choose a radio name (it can always be changed later).</p>
+					<p>To create a new <r4-title></r4-title> channel, choose a radio name.</p>
+					<p><i>(The name can be changed later)</i></p>
 				</header>
 				<r4-channel-create @submit=${this.onChannelCreate} href=${this.config.href}></r4-channel-create>
 			</section>
 			<section>
 				<dialog open inline>
-					<h2>Import radio from v1?</h2>
+					<h2>Import existing radio from v1?</h2>
 					<p>
-						Visit
-						<a href="${this.config.hrefMigrate}"><strong>${new URL(this.config.hrefMigrate).hostname}</strong></a> to
-						import the existing radio channel.
+						To import a radio channel from the version 1 website, don't create a new radio channel.
 					</p>
-					<p>If you are new here, nevermind that notice and welcome!</p>
+					<p>
+						Visit the page <a href="${this.config.hrefMigrate}"><strong>${new URL(this.config.hrefMigrate).hostname}</strong></a> and follow the steps (using your v1 and v2 accounts).
+					</p>
+					<form method="dialog" part="form">
+						<button part="button" formmethod="dialog">Close</button>
+					</form>
 				</dialog>
 			</section>
 		`

diff --git a/src/pages/r4-page-settings.js b/src/pages/r4-page-settings.js
@@ -67,29 +67,31 @@ export default class R4PageSettings extends R4Page {
 						<a href="#channel">My Channel${this.store.userChannels?.length > 1 ? 's' : ''}</a>
 					</h2>
 				</header>
-				<r4-list> ${!this.store.userChannels?.length ? this.renderNoChannel() : this.renderUserChannels()} </r4-list>
+				${!this.store.userChannels?.length ? this.renderNoChannel() : this.renderUserChannels()}
 			</section>
 		`
 	}
 
 	renderNoChannel() {
 		return html`
-			<r4-list-item>
-				<p>No channels yet.</p>
-				<p><a href=${this.config.href + '/new'}>Create a new radio</a>.</p>
-				<p><a href=${this.config.hrefV1}>Import existing radio from v1</a>.</p>
-			</r4-list-item>
+			<div>
+				<p>You don't have a radio channel yet.</p>
+				<menu>
+					<li><a href=${this.config.href + '/new'}>Create new radio channel</a></li>
+				</menu>
+			</div>
 		`
 	}
 
 	renderUserChannels() {
-		return this.store.userChannels.map(
+		const channels = this.store.userChannels.map(
 			(channel) => html`
 				<r4-list-item>
 					<r4-channel-card .channel=${channel} origin="${this.config.href}/${channel.slug}"></r4-channel-card>
 				</r4-list-item>
 			`,
 		)
+		return html`<r4-list>${channels}</r4-list>`
 	}
 
 	renderAppearance() {

diff --git a/src/pages/r4-page-sign.js b/src/pages/r4-page-sign.js
@@ -98,7 +98,7 @@ export default class R4PageSign extends R4Page {
 		return html`
 			<section>
 				<ul>
-					<li><a href=${this.config.href + '/sign/up'}>Sign up</a> for a new account</li>
+					<li><a href=${this.config.href + '/sign/up'}>Sign up</a> for a new account, to create or migrate a radio channel</li>
 					<li>
 						<details>
 							<summary>Forgot password? Sign in with magic (email) link!</summary>
@@ -108,7 +108,7 @@ export default class R4PageSign extends R4Page {
 								email=${this.email}
 								@submit=${this.onPasswordReset}
 								hcaptcha-site-key=${this.config.hcaptchaSiteKey}
-							></r4-password-reset>
+								></r4-password-reset>
 						</details>
 					</li>
 				</ul>
@@ -121,17 +121,16 @@ export default class R4PageSign extends R4Page {
 			<section>
 				<ul>
 					<li>
-						<a href=${this.config.href + '/sign/in'}>Sign in</a>
-						if you already have an existing account
+						Sign up to create a new radio, or to <a href="${this.config.hrefMigrate}">migrate an existing radio</a> from <a href="https://v1.radio4000.com" target="_blank">version 1</a> of <r4-title></r4-title>
 					</li>
 					<li>
-						Sign up first, to <a href="${this.config.hrefMigrate}">import/migrate</a> an existing radio (from the
-						<a href="https://v1.radio4000.com" target="_blank">version 1</a> of <r4-title></r4-title>).
+						<a href=${this.config.href + '/sign/in'}>Sign in</a>
+						if you already have an existing version 2 account
 					</li>
 				</ul>
-				<p>Need help? See chat and email support on the <a href=${this.config.href + `/settings`}>settings</a> page.</p>
+				<p>Questions? Issues? Need help? Reach out! There is <a href=${this.config.href + `/settings`}>chat and email support</a>.</p>
 			</section>
-		`
+				`
 	}
 
 	renderConfirmEmail() {