diff --git a/public/themes/classic.css b/public/themes/classic.css
index 5a27683a..75ef03fa 100644
--- a/public/themes/classic.css
+++ b/public/themes/classic.css
@@ -33,7 +33,7 @@ r4-app {
--s-font: 18px;
--s: 1rem;
--s-line-height: 1.3125;
- --s-radius: 4px;
+ --s-radius: calc(var(--s) / 4);
--s-form: calc(var(--s) * 36);
--s-textarea: calc(var(--s) * 5);
--s-container: 75rem;
@@ -47,7 +47,6 @@ r4-app {
--c-dark--accent: #9c8fff;
--c-dark-lighter: hsl(0deg 2.6% 13%);
--c-link: var(--c-purple);
- --c-border: rgba(115, 115, 115, 0.4);
/* new vars */
--c-bg-button: hsl(0, 0%, 98%);
@@ -60,6 +59,7 @@ r4-app {
r4-app[color-scheme='os'],
r4-app[color-scheme='light'] {
+ --c-border: whitesmoke;
--c-fg: hsl(40, 6%, 5%);
--c-fg2: color-mix(in oklch, var(--c-fg) 100%, white 50%);
--c-bg: hsl(40, 6%, 90%);
@@ -67,6 +67,7 @@ r4-app[color-scheme='light'] {
}
r4-app[color-scheme='dark'] {
+ --c-border: #2b2b2b;
--c-fg: var(--c-light);
--c-fg2: color-mix(in oklch, var(--c-fg) 100%, black 50%);
--c-bg: var(--c-dark);
@@ -82,7 +83,6 @@ r4-app a {
/* padding: calc(var(--s) / 6) calc(var(--s) / 4); */
[color-scheme='dark'] & {
- background: var(--c-dark-lighter);
color: var(--c-dark--accent);
}
}
@@ -247,10 +247,13 @@ r4-app-menu {
display: flex;
}
-r4-app-menu menu {
- background-color: var(--c-bg);
- flex-wrap: nowrap;
- overflow-x: auto;
+r4-app-menu,
+r4-app-user-menu {
+ & menu {
+ background-color: var(--c-bg);
+ flex-wrap: nowrap;
+ overflow-x: auto;
+ }
}
/* Nav menus */
@@ -330,6 +333,7 @@ r4-channel-card r4-button-play {
r4-track {
padding: calc(var(--s) / 2);
background-color: var(--c-bg2);
+ border: 1px solid var(--c-border);
}
r4-track a {
@@ -367,9 +371,15 @@ r4-track[playing] r4-button-play button {
/* Tracklists */
r4-list:has(r4-track) {
- border: 1px solid var(--c-border);
border-radius: var(--s-radius);
+ background-color: var(--c-bg2);
+ r4-track {
+ border: none;
+ }
+ & r4-list-item + r4-list-item r4-track {
+ border-top: 1px solid var(--c-border);
+ }
r4-list-item:first-of-type r4-track {
border-top-left-radius: var(--s-radius);
border-top-right-radius: var(--s-radius);
@@ -438,23 +448,42 @@ r4-track-create {
r4-sign-in,
r4-sign-out,
+r4-password-reset,
r4-sign-up,
r4-page-add,
r4-page-new {
display: flex;
+ justify-content: center;
& 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) / 2);
+ margin: calc(var(--s) / 1);
}
}
}
r4-page-add form {
border-color: var(--c-purple-light);
}
+r4-supabase-modifiers,
+r4-supabase-modifiers form,
+r4-supabase-filters,
+r4-supabase-filters form {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+r4-supabase-filters {
+ & form fieldset:last-of-type {
+ width: 100%;
+ justify-content: center;
+ }
+ & summary {
+ text-align: center;
+ }
+}
r4-supabase-modifiers input[name='page'],
r4-supabase-modifiers input[name='limit'] {
@@ -495,17 +524,15 @@ r4-page-home {
r4-page-add {
justify-content: center;
}
-r4-page-channel {
+r4-page-channel,
+r4-page-channel-tracks {
& r4-list:has(r4-track) {
max-width: var(--s-container--list);
width: 100%;
+ border: 1px solid var(--c-border);
}
- & r4-channel-card r4-button-play {
- & button::after {
- display: inline;
- content: ' Listen';
- }
- }
+}
+r4-page-channel {
& r4-channel-card {
max-width: var(--s-container--channel-card);
background-color: transparent;
@@ -513,8 +540,9 @@ r4-page-channel {
& r4-channel-card-body {
flex-direction: column;
flex-basis: 100%;
- background-color: var(--c-bg2);
padding: var(--s);
+ background-color: var(--c-bg2);
+ border: 1px solid var(--c-border);
& r4-channel-description {
align-self: flex-start;
}
@@ -532,6 +560,13 @@ r4-page-channel {
color: var(--c-fg);
}
}
+ & r4-button-play {
+ & button::after {
+ display: inline;
+ content: 'Listen';
+ margin-left: calc(var(--s) / 2);
+ }
+ }
& r4-avatar {
transform: translate(calc(var(--s) * -1), calc(var(--s) * 1));
}
@@ -571,3 +606,30 @@ r4-page-explore {
margin: calc(var(--s) / 3);
}
}
+
+r4-page-settings,
+r4-page-channel-update {
+ & r4-page-main {
+ border: 1px solid var(--c-border);
+ margin: var(--s);
+ }
+ & section {
+ min-height: 25vmax;
+ justify-content: center;
+ }
+ & section:not(:last-child) {
+ border-bottom: 1px solid var(--c-border);
+ }
+ & r4-map-position,
+ & r4-channel-update {
+ width: 100%;
+ }
+ & fieldset {
+ margin: var(--s);
+ }
+}
+
+h-captcha {
+ padding: var(--s);
+ display: inline-flex;
+}
diff --git a/src/components/r4-user-account.js b/src/components/r4-user-account.js
index b6be3eee..7c494e81 100644
--- a/src/components/r4-user-account.js
+++ b/src/components/r4-user-account.js
@@ -36,8 +36,8 @@ export default class R4UserAccount extends LitElement {
}
render() {
return html`
- ${this.account ? this.renderThemes() : 'Sign-in to use themes'}
- ${this.account ? this.renderColorSchemes() : 'Sign-in to use color schemes'}
+ ${this.account ? this.renderThemes() : 'Sign-in to use themes'}
+ ${this.account ? this.renderColorSchemes() : 'Sign-in to use color schemes'}
`
}
renderThemes() {
diff --git a/src/pages/r4-page-explore.js b/src/pages/r4-page-explore.js
index 8a5353de..e5f6a397 100644
--- a/src/pages/r4-page-explore.js
+++ b/src/pages/r4-page-explore.js
@@ -14,7 +14,7 @@ export default class R4PageExplore extends R4Page {
this.query = {
table: 'channels',
orderBy: 'updated_at',
- limit: 100
+ limit: 15,
}
this.channels = []
}
diff --git a/src/pages/r4-page-settings.js b/src/pages/r4-page-settings.js
index 04004a62..ea9a3b33 100644
--- a/src/pages/r4-page-settings.js
+++ b/src/pages/r4-page-settings.js
@@ -37,13 +37,7 @@ export default class R4PageSettings extends R4Page {
renderMain() {
if (this.store.user) {
- return [
- ,
- this.renderUserChannels(),
- this.renderAuthentication(),
- this.renderAppearance(),
- this.renderUserDelete(),
- ]
+ return [, this.renderChannels(), this.renderAuthentication(), this.renderAppearance(), this.renderUserDelete()]
} else {
return [this.renderNoUser()]
}
@@ -54,44 +48,52 @@ export default class R4PageSettings extends R4Page {
- With a Radio4000 account you can create your own radio, save your favorites and customize it as you wish.
+
+ With a Radio4000 account you can create your own radio, save your favorites and customize it as you wish.
+
- Already have a radio from the old site? Migrate from version 1 to a version 2 radio channel.
+
+ Already have a radio from the old site? Migrate from version 1 to a
+ version 2 radio channel.
+
`
}
- renderUserChannels() {
- const {userChannels} = this.store
+ renderChannels() {
return html`
-
+ ${!this.store.userChannels?.length ? this.renderNoChannel() : this.renderUserChannels()}
`
}
+ renderNochannel() {
+ return html`
+
+ No channels yet.
+ Create a new radio.
+ Import existing radio from v1.
+
+ `
+ }
+ renderUserChannels() {
+ return this.store.userChannels.map(
+ (channel) => html`
+
+
+
+ `,
+ )
+ }
renderAppearance() {
return html`
@@ -116,15 +118,8 @@ export default class R4PageSettings extends R4Page {
Email
${this.store?.user?.email}
-
- Update sign-in email or password
-
-
-
+
+
`
}
diff --git a/src/pages/r4-page-sign.js b/src/pages/r4-page-sign.js
index 995f1f13..ecc8e6a1 100644
--- a/src/pages/r4-page-sign.js
+++ b/src/pages/r4-page-sign.js
@@ -94,11 +94,13 @@ export default class R4PageSign extends R4Page {
Forgot password? Sign in with magic link!
- Enter the email address of the account, to receive a magic link to sign in without password. You can
- then reset your password from the settings page.
-
+ Enter the email address of the account, to receive a magic link to sign in without password.
+ It is then possible to reset the password from the settings page.
+
@@ -117,10 +119,10 @@ export default class R4PageSign extends R4Page {
Sign up first, to import/migrate an existing radio (from the
- previous site)
+ version 1 of ).
- Need help? See chat and email support on settings
+ Need help? See chat and email support on the settings page.
`
}