improve styles and markup

radio4000 · May 18, 2024 · 2c72470 · 2c72470
1 parent 17acf4b
commit 2c72470
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 66 deletions.
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -39,6 +39,7 @@ r4-app {
 	--s-container: 75rem;
 	--s-container--list: 50rem;
 	--s-container--channel-card: 45rem;
+	--s-font-s1: 0.8rem;
 	--c-light: hsl(0deg 0% 98%);
 	--c-dark: hsl(0deg 0% 8%);
 	--c-purple: #5d1ae6;
@@ -130,28 +131,22 @@ r4-button-play button:active {
 	top: 1px;
 }
 
-r4-app select {
-	border-radius: var(--s-radius);
-	border-color: var(--c-border);
-}
-
 /* Text inputs */
 r4-app {
-	[type='email'],
-	[type='password'],
-	[type='search'],
-	[type='tel'],
-	[type='text'],
-	[type='url'],
-	[type='number'],
-	textarea {
+	& :is(input, textarea, select, button),
+	& ::part(button) {
 		background-color: var(--c-bg-input);
 		border: 1px solid var(--c-border);
 		border-radius: var(--s-radius);
-		box-shadow: var(--c-shadow-input);
 		font-size: 1rem;
-		flex-grow: 1;
-		width: 100%;
+	}
+	& ::part(dialog) {
+		background-color: var(--c-bg);
+	}
+	& ::part(form) {
+		padding: var(--s);
+		display: flex;
+		justify-content: flex-end;
 	}
 }
 
@@ -215,8 +210,7 @@ r4-page-footer {
 }
 r4-page-main,
 r4-page-footer,
-r4-page-header menu,
-r4-app section header {
+r4-page-header menu {
 	background-color: var(--c-bg);
 }
 r4-page-explore r4-page-header,
@@ -422,7 +416,10 @@ r4-app summary {
 }
 r4-app form slot[name='submit'] fieldset:last-of-type {
 	margin: var(--s) calc(var(--s) / 2) calc(var(--s) / 2) var(--s);
-	justify-content: flex-end;
+	justify-content: center;
+}
+r4-app form button {
+	margin: calc(var(--s) / 5);
 }
 
 /* Vertical track form layout */
@@ -450,7 +447,8 @@ r4-sign-out,
 r4-password-reset,
 r4-sign-up,
 r4-page-add,
-r4-page-new {
+r4-page-new,
+r4-dialog {
 	display: flex;
 	justify-content: center;
 	& form {
@@ -586,6 +584,9 @@ r4-page-channel {
 	}
 }
 r4-map {
+	& r4-map-popup code {
+		font-size: var(--s-font-s1);
+	}
 	& r4-map-popup dialog {
 		max-width: calc(var(--s-container--channel-card) / 2.5);
 	}
@@ -600,7 +601,8 @@ r4-map {
 r4-page-channel-followers,
 r4-page-channel-followings,
 r4-page-home,
-r4-page-explore {
+r4-page-explore,
+r4-page-settings {
 	& r4-list {
 		flex-direction: row;
 		flex-wrap: wrap;
@@ -632,6 +634,13 @@ r4-page-channel-update {
 		margin: var(--s);
 	}
 }
+r4-page-settings {
+	& r4-page-footer {
+		& section {
+			background-color: var(--c-bg2);
+		}
+	}
+}
 
 h-captcha {
 	padding-top: var(--s);

diff --git a/public/themes/hash.css b/public/themes/hash.css
@@ -4,12 +4,15 @@ r4-app {
 	--c-light: cornsilk;
 	--c-dark: black;
 	--c-dim: dimgray;
+	--c-dark-dim: darkslategray;
+	--c-light-dim: lightgray;
 	--c-intense: #00ff00;
 	--c-moderate: #ff00ff;
 	--s-container: 65rem;
 	--s-form: 35rem;
 	--s-radius: calc(var(--s) / 3);
 	--s-font: 16px;
+	--s-font-s1: 0.7rem;
 }
 
 /* color schemes */
@@ -23,6 +26,7 @@ r4-app[color-scheme='dark'] {
 	--c-form-bg: var(--c-dim);
 	--c-bg--channel-card: var(--c-dim);
 	--c-bg--track: var(--c-dim);
+	--c-bg--inputs: var(--c-dark-dim);
 }
 r4-app[color-scheme='light'] {
 	color-scheme: light;
@@ -33,6 +37,7 @@ r4-app[color-scheme='light'] {
 	--c-form-bg: var(--c-intense);
 	--c-bg--channel-card: var(--c-intense);
 	--c-bg--track: var(--c-intense);
+	--c-bg--inputs: var(--c-light-dim);
 }
 
 /* app scheme theming */
@@ -44,8 +49,7 @@ r4-app {
 }
 
 /* app layout */
-r4-page-header,
-r4-page-main section h2 {
+r4-page-header {
 	position: sticky;
 	top: 0;
 	z-index: 1;
@@ -60,6 +64,11 @@ r4-app h3 {
 	font-size: 1.3rem;
 	margin-top: 0;
 }
+r4-app {
+	& :is(button, select, input, textarea, summary) {
+		background-color: var(--c-bg--inputs);
+	}
+}
 
 r4-app menu {
 	justify-content: center;
@@ -86,9 +95,12 @@ r4-app ol li + li {
 	margin-top: var(--s);
 }
 
-r4-app details[open],
+/* overwrite "default" styles */
+r4-app r4-actions details[open] menu {
+	background-color: var(--c-bg);
+}
 r4-app summary {
-	padding: calc(var(--s));
+	padding: calc(var(--s) / 2);
 }
 
 r4-app form {
@@ -101,16 +113,23 @@ r4-app form legend,
 r4-app form label {
 	font-style: italic;
 }
+r4-app form button {
+	margin: calc(var(--s) / 2);
+}
 r4-app fieldset {
 	display: flex;
 	margin: calc(var(--s) / 3);
 	position: relative;
 }
-r4-app fieldset legend {
-	position: absolute;
-	top: -0.7rem;
-	left: 0;
-	font-size: 0.7rem;
+r4-app {
+	& :is(r4-supabase-filter-search, r4-supabase-query) {
+		& r4-supabase-filter-search {
+			position: absolute;
+			top: -0.3em;
+			left: 0;
+			font-size: var(--s-font-s1);
+		}
+	}
 }
 r4-app input,
 r4-app textarea {
@@ -167,7 +186,7 @@ r4-track-description {
 		padding: calc(var(--s) / 3);
 		color: var(--c-fg);
 		text-decoration: underline;
-		text-underline-offset: calc(var(--s) / 2);
+		text-underline-offset: calc(var(--s) / 3);
 		text-decoration-color: var(--c-link);
 	}
 }
@@ -225,12 +244,11 @@ r4-page-footer {
 r4-page-main {
 	flex-grow: 1;
 }
-
-r4-page-home {
-	& section header {
-		position: sticky;
-		top: 0;
-		z-index: 1;
+r4-page-settings {
+	& section {
+		border: 1px solid var(--c-bg--inputs);
+		padding: var(--s);
+		margin: var(--s);
 	}
 }
 
@@ -268,6 +286,28 @@ r4-page-map {
 		height: 100%;
 	}
 }
+r4-page-channel {
+	& r4-channel-card {
+		& r4-button-play {
+			order: 1;
+			& button::after {
+				content: 'Listen';
+			}
+		}
+	}
+}
+
+r4-map {
+	& r4-channel-card {
+		max-width: 25rem;
+		& r4-channel-url {
+			display: none;
+		}
+	}
+	& code {
+		font-size: var(--s-font-s1);
+	}
+}
 
 r4-channel-card {
 	display: flex;
@@ -288,4 +328,21 @@ r4-channel-card {
 	& r4-channel-name {
 		font-weight: bold;
 	}
+	& r4-channel-card-body {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+}
+
+/* slug as channel alias, with a max-width */
+r4-channel-slug::before {
+	content: '@';
+}
+r4-channel-slug {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: clamp(calc(var(--s) * 10), calc(var(--s) * 30), 50vmin);
+	overflow: hidden;
 }
diff --git a/src/components/r4-email-update.js b/src/components/r4-email-update.js
@@ -5,7 +5,9 @@ const fieldsTemplate = document.createElement('template')
 fieldsTemplate.innerHTML = `
 	<slot name="fields">
 		<fieldset>
-			<label for="email">Change email</label>
+			<legend>
+				<label for="email">Change email</label>
+			</legend>
 			<input type="email" autocomplete="username" name="email" required />
 		</fieldset>
 	</slot>

diff --git a/src/components/r4-password-update.js b/src/components/r4-password-update.js
@@ -5,8 +5,13 @@ const fieldsTemplate = document.createElement('template')
 fieldsTemplate.innerHTML = `
 	<slot name="fields">
 		<fieldset>
-			<label for="password">Update password</label>
+			<legend>
+					<label for="password">
+						Update password
+					</label>
+			</legend>
 			<input type="password" name="password" required autocomplete="new-password" placeholder="*new*unique*password*"/>
+		</fieldset>
 	</slot>
 `
 

diff --git a/src/components/r4-user-delete.js b/src/components/r4-user-delete.js
@@ -67,7 +67,10 @@ export default class R4UserDelete extends LitElement {
 			<p>
 				<label>
 					<input type="checkbox" name=${`deleteChannel_${c.slug}`} required />
-					<a href=${this.href + '/' + c.slug}>${c.slug}</a> and all its tracks will be lost</label
+					<a href=${this.href + '/' + c.slug}>
+						<r4-channel-slug> ${c.slug} </r4-channel-slug>
+					</a>
+					and all its tracks will be lost</label
 				>
 			</p>
 		`

diff --git a/src/index.css b/src/index.css
@@ -456,6 +456,10 @@ radio4000-player .PlayerControl-group .Btn {
 	border-color: var(--c-link);
 }
 
+r4-app radio4000-player .Tracklist-controls .Btn--locateTrack {
+	background-color: inherit;
+}
+
 /* button + title + actions */
 r4-track {
 	display: grid;
@@ -495,15 +499,6 @@ r4-avatar-upload form {
 	align-items: center;
 }
 
-r4-channel-delete,
-r4-email-update,
-r4-password-update {
-	display: flex;
-	& form {
-		display: flex;
-	}
-}
-
 /* Default, portrait card layout */
 r4-channel-card {
 	display: block;

diff --git a/src/pages/r4-page-channel-tracks.js b/src/pages/r4-page-channel-tracks.js
@@ -51,14 +51,18 @@ export default class R4PageChannelTracks extends BaseChannel {
 						</a>
 					</h1>
 				</li>
-				<li><r4-button-play .channel=${this.channel} label="all"></r4-button-play></li>
 				<li>
-					<r4-button-play
-						.tracks=${this.tracks}
-						.channel=${this.channel}
-						.filters=${this.filters}
-						label="results"
-					></r4-button-play>
+					<form>
+						<fieldset>
+							<r4-button-play .channel=${this.channel} label="all"></r4-button-play>
+							<r4-button-play
+								.tracks=${this.tracks}
+								.channel=${this.channel}
+								.filters=${this.filters}
+								label="results"
+							></r4-button-play>
+						</fieldset>
+					</form>
 				</li>
 				<li>
 					<r4-query