improve spacing

radio4000 · May 17, 2024 · 761e874 · 761e874
1 parent 8e9c628
commit 761e874
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 11 deletions.
diff --git a/public/themes/classic.css b/public/themes/classic.css
@@ -235,9 +235,7 @@ r4-page-header {
 	& h1 {
 		margin: 0;
 		height: 100%;
-		& + * {
-			margin-left: var(--s);
-		}
+		font-size: clamp(1rem, 4vmin, 2rem);
 	}
 	& menu {
 		margin: calc(var(--s) / 4);
@@ -416,7 +414,6 @@ r4-list r4-avatar {
 /* Forms */
 r4-app form legend,
 r4-app form label {
-	margin-right: var(--s);
 	font-weight: bold;
 }
 r4-app summary {
@@ -570,7 +567,6 @@ r4-page-channel {
 			& button::after {
 				display: inline;
 				content: 'Listen';
-				margin-left: calc(var(--s) / 2);
 			}
 		}
 		& r4-avatar {

diff --git a/src/components/r4-button-play.js b/src/components/r4-button-play.js
@@ -51,7 +51,9 @@ export default class R4ButtonPlay extends LitElement {
 	}
 
 	render() {
-		return html`<button @click=${this.play} ?disabled=${this.playing}>▶${this.label}</button>`
+		return html`<button @click=${this.play} ?disabled=${this.playing}>
+			<r4-icon name="play"></r4-icon>${this.label}
+		</button>`
 	}
 
 	createRenderRoot() {

diff --git a/src/components/r4-icon.js b/src/components/r4-icon.js
@@ -10,6 +10,7 @@ export default class R4Icon extends HTMLElement {
 		globe: '🌍',
 		dark: '🌘',
 		light: '🌖',
+		play: '▶',
 		player_status: '♫',
 		player_close: 'x',
 		player_dock: '⌃',

diff --git a/src/components/r4-supabase-filter-search.js b/src/components/r4-supabase-filter-search.js
@@ -12,7 +12,8 @@ export default class R4SupabaseFilterSearch extends LitElement {
 		return html`
 			<form>
 				<fieldset>
-					<label>Search
+					<label>
+						<legend>Search</legend>
 						<input
 							type="search"
 							placeholder=${this.placeholder || 'search'}
@@ -33,7 +34,7 @@ export default class R4SupabaseFilterSearch extends LitElement {
 			new CustomEvent('input', {
 				bubbles: false,
 				detail: {filter: createSearchFilter(this.search), search: this.search},
-			})
+			}),
 		)
 	}
 

diff --git a/src/components/r4-track-create.js b/src/components/r4-track-create.js
@@ -11,7 +11,7 @@ fieldsTemplate.innerHTML = `
 		</fieldset>
 		<fieldset>
 			<label for="url">URL</label>
-			<input name="url" type="url" required placeholder="Link to a YouTube, Soundcloud, Vimeo… media" />
+			<input name="url" type="url" required placeholder="Link to the media (youtube, soundcloud, vimeo, file…)" title="Add the address to a media (youtube, soundcloud, vimeo etc.)"/>
 		</fieldset>
 		<fieldset>
 			<label for="title" title="After pasting a URL the title will write itself">Title</label>

diff --git a/src/index.css b/src/index.css
@@ -649,6 +649,11 @@ r4-app r4-actions a {
 r4-app r4-actions button {
 	flex: 1;
 }
+r4-button-play {
+	& r4-icon {
+		padding: calc(var(--s) / 3);
+	}
+}
 
 /* beta logo */
 r4-app r4-app-menu r4-title::before,
@@ -698,6 +703,7 @@ r4-supabase-filter-search {
 		margin: 0;
 	}
 }
+r4-supabase-filter-search,
 r4-supabase-modifiers,
 r4-supabase-filters {
 	& form {
@@ -718,6 +724,7 @@ r4-supabase-filters {
 		border: 1px solid var(--c-border);
 		border-radius: 0.3rem;
 		z-index: 1;
+		transform: translate(-20%, -20%);
 	}
 }
 

diff --git a/src/pages/r4-page-channel-tracks.js b/src/pages/r4-page-channel-tracks.js
@@ -51,13 +51,13 @@ export default class R4PageChannelTracks extends BaseChannel {
 						</a>
 					</h1>
 				</li>
-				<li><r4-button-play .channel=${this.channel} label=" Play all"></r4-button-play></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="Play results"
+						label="results"
 					></r4-button-play>
 				</li>
 				<li>