Skip to content

Commit

Permalink
improve classic design and simplify HTML markup
Browse files Browse the repository at this point in the history
  • Loading branch information
ug.rp committed May 17, 2024
1 parent ef7bed6 commit 07f9ad7
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 63 deletions.
96 changes: 79 additions & 17 deletions public/themes/classic.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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%);
Expand All @@ -60,13 +59,15 @@ 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%);
--c-bg2: color-mix(in oklch, var(--c-bg) 100%, white 50%);
}

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);
Expand All @@ -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);
}
}
Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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'] {
Expand Down Expand Up @@ -495,26 +524,25 @@ 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;
border: none;
& 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;
}
Expand All @@ -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));
}
Expand Down Expand Up @@ -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;
}
4 changes: 2 additions & 2 deletions src/components/r4-user-account.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ export default class R4UserAccount extends LitElement {
}
render() {
return html`
<section>${this.account ? this.renderThemes() : 'Sign-in to use themes'}</section>
<section>${this.account ? this.renderColorSchemes() : 'Sign-in to use color schemes'}</section>
<article>${this.account ? this.renderThemes() : 'Sign-in to use themes'}</article>
<article>${this.account ? this.renderColorSchemes() : 'Sign-in to use color schemes'}</article>
`
}
renderThemes() {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/r4-page-explore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default class R4PageExplore extends R4Page {
this.query = {
table: 'channels',
orderBy: 'updated_at',
limit: 100
limit: 15,
}
this.channels = []
}
Expand Down
67 changes: 31 additions & 36 deletions src/pages/r4-page-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()]
}
Expand All @@ -54,44 +48,52 @@ export default class R4PageSettings extends R4Page {
<section href="account">
<header>
<h2><a href="#account">Account</a></h2>
<p>With a Radio4000 account you can create your own radio, save your favorites and customize it as you wish.</p>
<p>
With a Radio4000 account you can create your own radio, save your favorites and customize it as you wish.
</p>
</header>
<ul>
<li><a href="${this.config.href}/sign/in">Sign in to your account</a></li>
<li><a href="${this.config.href}/sign/up">Create new account</a></li>
</ul>
<p>Already have a radio from the old site? <a href="${this.config.hrefMigrate}">Migrate</a> from version 1 to a version 2 radio channel.</p>
<p>
Already have a radio from the old site? <a href="${this.config.hrefMigrate}">Migrate</a> from version 1 to a
version 2 radio channel.
</p>
</section>
`
}

renderUserChannels() {
const {userChannels} = this.store
renderChannels() {
return html`
<section id="channel">
<header>
<h2>
<a href="#channel">Channel${userChannels?.length > 1 ? 's' : ''}</a>
<a href="#channel">Channel${this.store.userChannels?.length > 1 ? 's' : ''}</a>
</h2>
</header>
<ul>
${userChannels?.map(
(x) =>
html`<li>
<a href=${`${this.config.href}/${x.slug}`}>${x.name}</a>
(<a href=${`${this.config.href}/${x.slug}/update`}>update</a>)
</li>`,
)}
${!this.store?.userChannels?.length
? html`<li>
No channels yet. <a href=${this.config.href + '/new'}>Create a new radio</a> or
<a href=${this.config.hrefV1}>import from v1</a>.
</li>`
: null}
</ul>
<r4-list> ${!this.store.userChannels?.length ? this.renderNoChannel() : this.renderUserChannels()} </r4-list>
</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>
`
}
renderUserChannels() {
return 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>
`,
)
}

renderAppearance() {
return html`
Expand All @@ -116,15 +118,8 @@ export default class R4PageSettings extends R4Page {
<dt>Email</dt>
<dd>${this.store?.user?.email}</dd>
</dl>
<details>
<summary>Update sign-in email or password</summary>
<section>
<r4-email-update email=${this.store.user.email} @submit=${this.changeEmail}></r4-email-update>
</section>
<section>
<r4-password-update @submit=${this.changePassword}></r4-password-update>
</section>
</details>
<r4-email-update email=${this.store.user.email} @submit=${this.changeEmail}></r4-email-update>
<r4-password-update @submit=${this.changePassword}></r4-password-update>
</section>
`
}
Expand Down
16 changes: 9 additions & 7 deletions src/pages/r4-page-sign.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,13 @@ export default class R4PageSign extends R4Page {
<li>
<details>
<summary>Forgot password? Sign in with magic link!</summary>
<i
>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.</i
>
<r4-password-reset email=${this.email} @submit=${this.onPasswordReset} hcaptcha-site-key=${this.config.hcaptchaSiteKey}></r4-password-reset>
<p>Enter the email address of the account, to receive a magic link to sign in without password.</p>
<p>It is then possible to reset the password from the settings page.</p>
<r4-password-reset
email=${this.email}
@submit=${this.onPasswordReset}
hcaptcha-site-key=${this.config.hcaptchaSiteKey}
></r4-password-reset>
</details>
</li>
</ul>
Expand All @@ -117,10 +119,10 @@ export default class R4PageSign extends R4Page {
</li>
<li>
Sign up first, to <a href="${this.config.hrefMigrate}">import/migrate</a> an existing radio (from the
previous <a href="https://v1.radio4000.com">site</a>)
<a href="https://v1.radio4000.com">version 1</a> of <r4-title></r4-title>).
</li>
</ul>
<p>Need help? See chat and email support on <a href=${this.config.href + `/settings`}>settings</a></p>
<p>Need help? See chat and email support on the <a href=${this.config.href + `/settings`}>settings</a> page.</p>
</section>
`
}
Expand Down

0 comments on commit 07f9ad7

Please sign in to comment.