try improve UX

radio4000 · May 18, 2024 · 79f227d · 79f227d
1 parent ee30f99
commit 79f227d
Show file tree

Hide file tree

Showing 14 changed files with 111 additions and 113 deletions.
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -98,7 +98,8 @@ r4-app a:has(r4-avatar) {
 }
 
 /* Default button */
-r4-app button {
+r4-app button,
+r4-app r4-dialog::part(button) {
 	display: inline-block;
 	font-weight: bold;
 	border: 1px solid var(--c-border);
@@ -133,17 +134,28 @@ r4-button-play button:active {
 
 /* Text inputs */
 r4-app {
-	& :is(input, textarea, select, button),
-	& ::part(button) {
-		background-color: var(--c-bg-input);
-		border: 1px solid var(--c-border);
-		border-radius: var(--s-radius);
-		font-size: 1rem;
+	& form {
+		border: 1px solid transparent;
+		transition: all 222ms ease-in-out;
+		&:focus-within {
+			border-color: var(--c-border);
+			background-color: var(--c-bg-input);
+			& button {
+				background-color: var(--c-bg);
+			}
+		}
+		& :is(input, textarea, select, button) {
+			background-color: var(--c-bg-input);
+			border: 1px solid var(--c-border);
+			border-radius: var(--s-radius);
+			font-size: 1rem;
+			flex-grow: 1;
+		}
 	}
-	& ::part(dialog) {
+	& r4-dialog::part(dialog) {
 		background-color: var(--c-bg);
 	}
-	& ::part(form) {
+	& r4-dialog::part(form) {
 		padding: var(--s);
 		display: flex;
 		justify-content: flex-end;
@@ -411,7 +423,6 @@ r4-app form label {
 	font-weight: bold;
 }
 r4-app summary {
-	font-weight: bold;
 	padding: calc(var(--s) / 4);
 }
 r4-app form slot[name='submit'] fieldset:last-of-type {
@@ -454,13 +465,20 @@ r4-dialog {
 	& form {
 		max-width: var(--s-form);
 		padding: calc(var(--s) / 2);
-		border: 1px solid var(--c-bg-button2);
 		border-radius: var(--s-radius);
 		& fieldset {
 			margin: calc(var(--s) / 1);
 		}
 	}
 }
+r4-sign-in,
+r4-sign-out,
+r4-sign-up {
+	& form {
+		border: 1px solid var(--c-border);
+	}
+}
+
 r4-page-add form {
 	border-color: var(--c-purple-light);
 }
@@ -508,6 +526,15 @@ r4-channel-slug {
 	overflow: hidden;
 }
 
+r4-avatar-update {
+	& fieldset {
+		justify-content: center;
+	}
+	& legend {
+		text-align: center;
+	}
+}
+
 r4-page-home {
 	justify-content: center;
 	& r4-favicon {
@@ -584,23 +611,25 @@ r4-page-channel {
 	}
 }
 r4-map {
-	& r4-map-popup code {
-		font-size: var(--s-font-s1);
-	}
-	& r4-map-popup dialog {
+	& r4-map-popup dialog[inline] {
 		max-width: calc(var(--s-container--channel-card) / 2.5);
+		margin: calc(var(--s) / 3);
+	}
+	& r4-channel-card-body {
+		justify-content: center;
 	}
 	& r4-channel-card {
 		flex-direction: column;
-		& r4-channel-url a {
-			white-space: pre-wrap;
-			word-break: break-all;
+		justify-content: center;
+		& r4-channel-url {
+			display: none;
 		}
 	}
 }
 r4-page-channel-followers,
 r4-page-channel-followings,
 r4-page-home,
+r4-page-add,
 r4-page-explore,
 r4-page-settings {
 	& r4-list {
@@ -641,12 +670,6 @@ r4-page-settings {
 		}
 	}
 }
-
-h-captcha {
-	padding-top: var(--s);
-	padding-bottom: var(--s);
-	display: inline-flex;
-}
 label[for='token'] input[name='token'] {
 	display: none;
 }
diff --git a/public/themes/hash.css b/public/themes/hash.css
@@ -104,7 +104,6 @@ r4-app summary {
 }
 
 r4-app form {
-	max-width: calc(var(--s) * 100);
 	padding: calc(var(--s) / 2);
 	border-radius: var(--s-radius);
 }
@@ -262,7 +261,6 @@ r4-page-add {
 	align-items: center;
 	justify-content: center;
 	& form {
-		max-width: var(--s-form);
 		padding: calc(var(--s) / 2);
 		border: 1px solid var(--c-fg);
 		border-radius: var(--s-radius);
@@ -276,7 +274,6 @@ r4-page-add form {
 }
 
 r4-app form slot[name='submit'] fieldset:last-of-type {
-	margin: var(--s);
 	justify-content: flex-end;
 }
 

diff --git a/src/components/r4-avatar-update.js b/src/components/r4-avatar-update.js
@@ -10,7 +10,7 @@ export default class AvatarUpdate extends LitElement {
 		// Decides which channel to update.
 		slug: {type: String},
 		// The image id from Cloudinary.
-		image: {type: String, state: true},
+		image: {type: String, reflect: true},
 	}
 	async onUpload({detail}) {
 		this.image = detail.public_id
@@ -21,17 +21,22 @@ export default class AvatarUpdate extends LitElement {
 		const {error} = await sdk.supabase.from('channels').update({image: this.image}).eq('slug', this.slug)
 	}
 	render() {
-		return html`
-			${this.image ? this.renderAvatar() : null} ${!this.image ? this.renderUpload() : null}
-			${this.image ? this.renderDelete() : null}
-		`
-	}
-	renderAvatar() {
-		return html`<r4-avatar slug=${this.slug} image=${this.image} size="small"></r4-avatar>`
+		return html` ${this.image ? this.renderAvatar() : this.renderUpload()} `
 	}
 	renderUpload() {
 		return html`<r4-avatar-upload tags=${this.slug} @upload=${this.onUpload}></r4-avatar-upload>`
 	}
+	renderAvatar() {
+		return html`
+			<form>
+				<fieldset>
+					<legend>Image</legend>
+					<r4-avatar slug=${this.slug} image=${this.image}></r4-avatar>
+				</fieldset>
+				<fieldset>${this.renderDelete()}</fieldset>
+			</form>
+		`
+	}
 	renderDelete() {
 		return html`<button type="button" @click=${this.onDelete} destructive>Delete avatar</button>`
 	}

diff --git a/src/components/r4-channel-update.js b/src/components/r4-channel-update.js
@@ -1,41 +1,39 @@
 import {sdk} from '../libs/sdk.js'
 import R4Form from './r4-form.js'
 
-const positionStep = 0.0000001
-const positionMin = -120
-const positionMax = 120
-
 const fieldsTemplate = document.createElement('template')
 fieldsTemplate.innerHTML = `
 	<slot name="fields">
 		<fieldset>
-			<label for="id" required>ID</label>
+			<legend>
+				<label for="id" required>ID</label>
+			</legend>
 			<input name="id" type="text" readonly/>
 		</fieldset>
 		<fieldset>
-			<label for="name">Name</label>
+			<legend>
+				<label for="name">Name</label>
+			</legend>
 			<input name="name" type="text"/>
 		</fieldset>
 		<fieldset>
-			<label for="slug">Slug</label>
+			<legend>
+				<label for="slug">Slug</label>
+			</legend>
 			<input name="slug" type="text" required minlength="3" />
 		</fieldset>
 		<fieldset>
-			<label for="description">Description</label>
+			<legend>
+				<label for="description">Description</label>
+			</legend>
 			<textarea name="description"></textarea>
 		</fieldset>
 		<fieldset>
-			<label for="url">URL</label>
+			<legend>
+				<label for="url">URL</label>
+			</legend>
 			<input name="url" type="url"/>
 		</fieldset>
-		<fieldset>
-			<label for="longitude">Longitude</label>
-			<input name="longitude" type="number" step="${positionStep}" min="${positionMin}" max="${positionMax}"/>
-		</fieldset>
-		<fieldset>
-			<label for="latitude">Latitude</label>
-			<input name="latitude" type="number" step="${positionStep}"/>
-		</fieldset>
 	</slot>
 `
 

diff --git a/src/components/r4-map.js b/src/components/r4-map.js
@@ -27,7 +27,7 @@ useGeographic()
 export default class R4Map extends LitElement {
 	static properties = {
 		// The slug of a channel to select initially
-		slug: {type: String, state: true},
+		slug: {type: String},
 
 		// List of channels with coordinates.
 		channels: {type: Array, state: true},
@@ -43,8 +43,6 @@ export default class R4Map extends LitElement {
 		latitude: {type: Number},
 		zoom: {type: Number},
 
-		clickedCoordinates: {type: Array, state: true},
-
 		// For building the channel origin URL.
 		href: {type: String},
 
@@ -60,13 +58,6 @@ export default class R4Map extends LitElement {
 		return `${href}/${this.channel.slug}`
 	}
 
-	showPopupForChannel(channel) {
-		const coordinate = [channel.longitude, channel.latitude]
-		this.clickedCoordinate = coordinate
-		this.overlay.setPosition(coordinate)
-		this.requestUpdate()
-	}
-
 	constructor() {
 		super()
 		// Default values
@@ -87,9 +78,6 @@ export default class R4Map extends LitElement {
 			this.channels = data.filter((c) => c.longitude && c.latitude)
 		}
 		this.markers = this.channels?.map((c) => this.createMarker([c.longitude, c.latitude], c))
-		if (this.channel) {
-			this.showPopupForChannel(this.channel)
-		}
 	}
 
 	willUpdate(changedProperties) {
@@ -153,6 +141,7 @@ export default class R4Map extends LitElement {
 	}
 
 	createMarker(coordinate, details) {
+		const active = details.slug === this.slug
 		const feature = new Feature({
 			geometry: new Point(coordinate),
 			details,
@@ -166,7 +155,7 @@ export default class R4Map extends LitElement {
 					width: 2,
 				}),
 				fill: new Fill({
-					color: 'darkviolet',
+					color: active ? 'hotpink' : 'darkviolet',
 				}),
 			}),
 		})
@@ -181,8 +170,6 @@ export default class R4Map extends LitElement {
 	}
 
 	onClick(event) {
-		const coordinate = event.coordinate
-		this.clickedCoordinate = coordinate
 		this.dispatchEvent(
 			new CustomEvent('r4-map-click', {
 				bubbles: true,
@@ -202,9 +189,7 @@ export default class R4Map extends LitElement {
 			// Schedule a re-render so we see the clicked channel.
 			this.channel = details
 			const coordinate = [details.longitude, details.latitude]
-			this.clickedCoordinate = coordinate
 			this.overlay.setPosition(coordinate)
-			this.requestUpdate()
 		}
 	}
 
@@ -213,10 +198,7 @@ export default class R4Map extends LitElement {
 			<main></main>
 			<r4-map-popup class="ol-popup">
 				<button class="ol-popup-closer">✖</button>
-				<dialog open inline>
-					${this.channel ? this.renderChannel() : null}
-					<code>${toStringHDMS(this.clickedCoordinate)}</code>
-				</dialog>
+				<dialog open inline>${this.channel ? this.renderChannel() : null}</dialog>
 			</r4-map-popup>
 		`
 	}

diff --git a/src/components/r4-password-reset.js b/src/components/r4-password-reset.js
@@ -15,7 +15,7 @@ fieldsTemplate.innerHTML = `
 const captchaFieldTemplate = document.createElement('template')
 captchaFieldTemplate.innerHTML = `
 	<fieldset>
-		<legend>To prevent spam, please solve this captcha.</legend>
+		<legend>Captcha</legend>
 		<label for="token">
 			<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 			<h-captcha

diff --git a/src/components/r4-sign-in.js b/src/components/r4-sign-in.js
@@ -5,11 +5,15 @@ const fieldsTemplate = document.createElement('template')
 fieldsTemplate.innerHTML = `
 	<slot name="fields">
 		<fieldset>
-			<label for="email">Email</label>
+			<legend>
+				<label for="email">Email</label>
+			</legend>
 			<input name="email" type="email" autocomplete="username" required placeholder="user@example.com"/>
 		</fieldset>
 		<fieldset>
-			<label for="password">Password</label>
+			<legend>
+				<label for="password">Password</label>
+			</legend>
 			<input name="password" type="password" autocomplete="current-password" required placeholder="my-private-password"/>
 		</fieldset>
 	</slot>
@@ -18,7 +22,7 @@ fieldsTemplate.innerHTML = `
 const captchaFieldTemplate = document.createElement('template')
 captchaFieldTemplate.innerHTML = `
 	<fieldset>
-		<legend>To prevent spam, please solve this captcha.</legend>
+		<legend>Captcha</legend>
 		<label for="token">
 			<input name="token" type="radio" disabled required placeholder="R4_USED_BY_ONVERIFIED"></input>
 			<h-captcha