Arx/Eve
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request 'minor lint fixes' (#4) from minor-lint-and-ui-fixes into master

Browse source
This commit is contained in:
Danny Morabito 2025-04-14 13:04:43 +00:00
commit 24e1356bbc
2 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Sidebar.ts
View file

@ -191,9 +191,9 @@ export default class Sidebar extends LitElement {
} }
.profile-avatar { .profile-avatar {
width: 64px; max-width: 64px;
height: 64px; max-height: 64px;
border-radius: 50%; border-radius: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 2px solid var(--color-base-300); border: 2px solid var(--color-base-300);

16
src/routes/Settings.ts
View file

@ -1,9 +1,11 @@
import { getSigner, getUserProfile, ndk } from '@/ndk'; import { getSigner, getUserProfile, ndk } from '@/ndk';
// @ts-ignore
import defaultAvatar from '@assets/default-avatar.png'; import defaultAvatar from '@assets/default-avatar.png';
import type { ArxInputChangeEvent } from '@components/General/Input'; import type { ArxInputChangeEvent } from '@components/General/Input';
import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk'; import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit'; import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js'; import { customElement, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { when } from 'lit/directives/when.js'; import { when } from 'lit/directives/when.js';
import '@components/Breadcrumbs'; import '@components/Breadcrumbs';
@ -27,8 +29,8 @@ export class EveSettings extends LitElement {
} }
.profile-image { .profile-image {
width: 140px; max-width: 140px;
height: 140px; max-height: 140px;
border-radius: 50%; border-radius: 50%;
object-fit: cover; object-fit: cover;
border: calc(var(--border) * 2) solid var(--color-base-100); border: calc(var(--border) * 2) solid var(--color-base-100);
@ -155,12 +157,12 @@ export class EveSettings extends LitElement {
</arx-fieldset> </arx-fieldset>
<arx-fieldset legend="Profile"> <arx-fieldset legend="Profile">
${when( ${when(
this.profile!.picture, this.profile?.picture,
() => html` () => html`
<div class="profile-header"> <div class="profile-header">
<img <img
class="profile-image" class="profile-image"
src=${this.profile!.picture} src=${ifDefined(this.profile?.picture)}
alt="Profile" alt="Profile"
@error=${(e: Event) => { @error=${(e: Event) => {
(e.target as HTMLImageElement).src = defaultAvatar; (e.target as HTMLImageElement).src = defaultAvatar;
@ -174,7 +176,7 @@ export class EveSettings extends LitElement {
label="Name" label="Name"
type="text" type="text"
name="name" name="name"
.value=${this.profile!.name} .value=${this.profile?.name ?? ''}
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)} @change=${(e: ArxInputChangeEvent) => this.handleInputChange('name', e)}
placeholder="Your display name" placeholder="Your display name"
></arx-input> ></arx-input>
@ -183,7 +185,7 @@ export class EveSettings extends LitElement {
label="Profile Image URL" label="Profile Image URL"
type="text" type="text"
name="image" name="image"
.value=${this.profile!.picture} .value=${this.profile?.picture ?? ''}
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)} @change=${(e: ArxInputChangeEvent) => this.handleInputChange('picture', e)}
placeholder="https://example.com/your-image.jpg" placeholder="https://example.com/your-image.jpg"
></arx-input> ></arx-input>
@ -192,7 +194,7 @@ export class EveSettings extends LitElement {
label="Banner URL" label="Banner URL"
type="text" type="text"
name="banner" name="banner"
.value=${this.profile!.banner} .value=${this.profile?.banner ?? ''}
@change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)} @change=${(e: ArxInputChangeEvent) => this.handleInputChange('banner', e)}
placeholder="https://example.com/your-image.jpg" placeholder="https://example.com/your-image.jpg"
></arx-input> ></arx-input>