🎨 ✨ 🚀 Overhaul UI/UX with comprehensive design system improvements
✨ Features added: - 🔍 Implement functional search in header navigation - ⚙️ Add basic user settings page - 📱 Make dashboard fully responsive 🔧 Enhancements: - 🎭 Standardize CSS with consistent theming across components - 🧹 Remove unused CSS for better performance - 📊 Improve dashboard layout and visual hierarchy - 📦 Redesign last block widget for better usability 💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.
This commit is contained in:
parent
5afeb4d01a
commit
dc9abee715
GPG key ID:
7CC8056A5A04557E
49 changed files with 4176 additions and 2468 deletions
|
|
@ -2,7 +2,9 @@ import { LitElement, css, html } from 'lit';
|
|||
import { customElement, property } from 'lit/decorators.js';
|
||||
import type { RouteParams } from './router';
|
||||
|
||||
import '@components/EveLink';
|
||||
import '@components/General/Button';
|
||||
import '@components/General/Card';
|
||||
import '@components/General/Fieldset';
|
||||
|
||||
@customElement('arx-404-page')
|
||||
export class FourOhFourPage extends LitElement {
|
||||
|
|
@ -17,30 +19,27 @@ export class FourOhFourPage extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
.not-found {
|
||||
:host {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: "Inter", sans-serif;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
padding: 2rem 1rem;
|
||||
min-height: 80vh;
|
||||
background-color: var(--color-base-100);
|
||||
}
|
||||
|
||||
.error-container h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-container h1 * {
|
||||
position: relative;
|
||||
margin: 0 -20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spinning-gear {
|
||||
animation: spin 5s linear infinite;
|
||||
animation: spin 8s linear infinite;
|
||||
font-size: 7rem;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
|
|
@ -52,37 +51,34 @@ export class FourOhFourPage extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
.path-container {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.path-text {
|
||||
color: var(--secondary);
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
arx-fieldset {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.path {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
color: var(--primary);
|
||||
font-family: monospace;
|
||||
color: var(--color-accent);
|
||||
word-break: break-all;
|
||||
font-size: 1.1rem;
|
||||
padding: 0.5rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: oklch(from var(--color-base-content) l c h / 0.1);
|
||||
border-radius: var(--radius-field);
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 8rem;
|
||||
font-size: 7rem;
|
||||
font-weight: 800;
|
||||
color: var(--color-base-content);
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.four {
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
|
|
@ -92,108 +88,100 @@ export class FourOhFourPage extends LitElement {
|
|||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.message-text .inline-icon {
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1.25rem;
|
||||
color: #94a3b8;
|
||||
margin: 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-base-content);
|
||||
margin: 0.5rem 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
color: #64748b;
|
||||
color: var(--color-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.inline-icon {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 2.5rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 1.25rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary);
|
||||
transform: translateY(-2px);
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
arx-eve-link::part(link) {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
.spinning-gear {
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.sub-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div class="not-found">
|
||||
<div class="content">
|
||||
<div class="error-container">
|
||||
<h1>
|
||||
<span class="four">4</span>
|
||||
<iconify-icon
|
||||
icon="fluent-emoji:gear"
|
||||
class="spinning-gear"
|
||||
></iconify-icon>
|
||||
<span class="four">4</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="path-container">
|
||||
<div class="path-text">Path:</div>
|
||||
<div class="path">${this.path}</div>
|
||||
</div>
|
||||
<div class="message-text">
|
||||
<div class="status">Page not found.</div>
|
||||
<div class="sub-text">
|
||||
The page you are looking for does not exist.
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click="${() =>
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('go-back', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
)}"
|
||||
class="primary-button"
|
||||
>
|
||||
<iconify-icon icon="material-symbols:arrow-back"></iconify-icon>
|
||||
Go back
|
||||
</a>
|
||||
<arx-eve-link href="home" class="primary-button">
|
||||
<iconify-icon icon="material-symbols:home"></iconify-icon>
|
||||
Home
|
||||
</arx-eve-link>
|
||||
<arx-card>
|
||||
<div class="error-container">
|
||||
<h1>
|
||||
<span class="four">4</span>
|
||||
<iconify-icon
|
||||
icon="fluent-emoji:gear"
|
||||
class="spinning-gear"
|
||||
></iconify-icon>
|
||||
<span class="four">4</span>
|
||||
</h1>
|
||||
</div>
|
||||
<arx-fieldset legend="Path">
|
||||
<div class="path">${this.path}</div>
|
||||
</arx-fieldset>
|
||||
<div class="message-text">
|
||||
<div class="status">Page not found</div>
|
||||
<div class="sub-text">
|
||||
The page you are looking for does not exist
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<arx-button
|
||||
@click="${() =>
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('go-back', {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
)}"
|
||||
variant="primary"
|
||||
label="Go Back"
|
||||
>
|
||||
<iconify-icon
|
||||
slot="prefix"
|
||||
icon="material-symbols:arrow-back"
|
||||
></iconify-icon>
|
||||
</arx-button>
|
||||
<arx-button href="home" label="Home" variant="secondary">
|
||||
<iconify-icon icon="material-symbols:home"></iconify-icon>
|
||||
Home
|
||||
</arx-button>
|
||||
</div>
|
||||
</arx-card>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,16 +2,13 @@ import { getSigner, ndk } from '@/ndk';
|
|||
import { NDKEvent, type NDKKind, type NDKSubscription } from '@nostr-dev-kit/ndk';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
import { map } from 'lit/directives/map.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
import '@components/Breadcrumbs';
|
||||
import '@components/Arbor/ForumTopic';
|
||||
import '@components/Arbor/ForumCategory';
|
||||
import '@components/Arbor/Button';
|
||||
import '@components/Prompt';
|
||||
|
||||
import type { EvePrompt } from '@components/Prompt';
|
||||
import { map } from 'lit/directives/map.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
import '@components/General/Prompt';
|
||||
|
||||
interface ForumTopic {
|
||||
id: string;
|
||||
|
|
@ -164,9 +161,10 @@ export class ArborForum extends LitElement {
|
|||
>
|
||||
</arx-breadcrumbs>
|
||||
|
||||
<arx-arbor-button @click=${this.newCategoryButtonClicked}>
|
||||
New Category
|
||||
</arx-arbor-button>
|
||||
<arx-button
|
||||
label="New Category"
|
||||
@click=${this.newCategoryButtonClicked}
|
||||
></arx-button>
|
||||
|
||||
<arx-prompt
|
||||
id="new-category-prompt"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
|
||||
import '@components/General/Textarea';
|
||||
|
||||
@customElement('arx-arbor-post-creator')
|
||||
export class ArborPostCreator extends LitElement {
|
||||
@property({ type: String })
|
||||
|
|
@ -36,23 +38,6 @@ export class ArborPostCreator extends LitElement {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.5rem;
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color, #3b82f6);
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -133,29 +118,29 @@ export class ArborPostCreator extends LitElement {
|
|||
<div class="container">
|
||||
<div class="topic-id">Topic ID: ${this.topicId}</div>
|
||||
|
||||
<textarea
|
||||
<arx-textarea
|
||||
placeholder="Post. You can use Markdown here."
|
||||
.value=${this.postContent}
|
||||
@input=${this.handleContentInput}
|
||||
?disabled=${this.isCreating}
|
||||
></textarea>
|
||||
></arx-textarea>
|
||||
|
||||
${this.error ? html` <div class="error">${this.error}</div> ` : null}
|
||||
|
||||
<div class="actions">
|
||||
<arx-arbor-button
|
||||
<arx-button
|
||||
label="Cancel"
|
||||
@click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
Cancel
|
||||
</arx-arbor-button>
|
||||
></arx-button>
|
||||
|
||||
<arx-arbor-button
|
||||
<arx-button
|
||||
label=${this.isCreating ? 'Creating...' : 'Create'}
|
||||
@click=${this.doCreatePost}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
${this.isCreating ? 'Creating...' : 'Create'}
|
||||
</arx-arbor-button>
|
||||
</arx-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,10 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Textarea';
|
||||
import '@components/General/Button';
|
||||
|
||||
@customElement('arx-arbor-topic-creator')
|
||||
export class ArborTopicCreator extends LitElement {
|
||||
@property({ type: String })
|
||||
|
|
@ -22,20 +26,6 @@ export class ArborTopicCreator extends LitElement {
|
|||
display: block;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -108,35 +98,34 @@ export class ArborTopicCreator extends LitElement {
|
|||
return html`
|
||||
<div class="category-id">Category ID: ${this.categoryId}</div>
|
||||
|
||||
<input
|
||||
<arx-input
|
||||
type="text"
|
||||
placeholder="New Topic"
|
||||
.value=${this.newTopic}
|
||||
@input=${this.handleTopicInput}
|
||||
?disabled=${this.isCreating}
|
||||
/>
|
||||
></arx-input>
|
||||
|
||||
<textarea
|
||||
<arx-textarea
|
||||
placeholder="Topic. You can use Markdown here."
|
||||
.value=${this.topicContent}
|
||||
@input=${this.handleContentInput}
|
||||
?disabled=${this.isCreating}
|
||||
></textarea>
|
||||
></arx-textarea>
|
||||
|
||||
<div class="button-group">
|
||||
<arx-arbor-button
|
||||
<arx-button
|
||||
label="Cancel"
|
||||
@click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
Cancel
|
||||
</arx-arbor-button>
|
||||
></arx-button>
|
||||
|
||||
<arx-arbor-button
|
||||
<arx-button
|
||||
label=${this.isCreating ? 'Creating...' : 'Create'}
|
||||
@click=${this.doCreateTopic}
|
||||
?disabled=${this.isCreating}
|
||||
>
|
||||
${this.isCreating ? 'Creating...' : 'Create'}
|
||||
</arx-arbor-button>
|
||||
</arx-button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|||
|
||||
import '@components/Breadcrumbs';
|
||||
import '@components/Arbor/ForumPost';
|
||||
import '@components/Arbor/Button';
|
||||
import '@components/General/Button';
|
||||
|
||||
import { map } from 'lit/directives/map.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
|
@ -34,23 +34,24 @@ export class ArborTopicView extends LitElement {
|
|||
:host {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
color: #1a1a1a;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
.topic-container {
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
background: var(--color-base-100);
|
||||
border-radius: var(--radius-box);
|
||||
border: var(--border) solid var(--color-base-300);
|
||||
overflow: hidden;
|
||||
margin-top: 1.5rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
||||
calc(var(--depth) * 4px)
|
||||
oklch(from var(--color-base-content) l c h / 0.1),
|
||||
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
|
||||
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.4);
|
||||
}
|
||||
|
||||
.header {
|
||||
background: var(--primary);
|
||||
color: oklch(100% 0 0);
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-secondary-content);
|
||||
padding: 1.5rem 2rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
|
|
@ -58,32 +59,54 @@ export class ArborTopicView extends LitElement {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
text-shadow: 0 1px 2px oklch(from var(--color-base-content) l c h / 0.2);
|
||||
letter-spacing: 0.01em;
|
||||
border-bottom: var(--border) solid var(--color-base-300);
|
||||
}
|
||||
|
||||
.posts-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
background: #f9f9f9;
|
||||
background: var(--color-base-200);
|
||||
padding: 1.5rem;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
background: #f9f9f9;
|
||||
background: var(--color-base-200);
|
||||
padding: 1.25rem 1.5rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-top: var(--border) solid var(--color-base-300);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
color: var(--color-secondary);
|
||||
font-style: italic;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
background: var(--color-base-100);
|
||||
border-radius: var(--radius-field);
|
||||
margin: 1rem 0;
|
||||
border: var(--border) dashed var(--color-base-300);
|
||||
}
|
||||
|
||||
arx-breadcrumbs {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
arx-forum-post {
|
||||
border-bottom: var(--border) solid var(--color-base-300);
|
||||
}
|
||||
|
||||
arx-forum-post:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -108,6 +131,13 @@ export class ArborTopicView extends LitElement {
|
|||
|
||||
.header {
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -199,9 +229,9 @@ export class ArborTopicView extends LitElement {
|
|||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<arx-arbor-button href="/arbor/new-post/${this.topicId}">
|
||||
<arx-button label="New Post" href="/arbor/new-post/${this.topicId}">
|
||||
New Post
|
||||
</arx-arbor-button>
|
||||
</arx-button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,13 @@ import { getNpub, getUserProfile } from '@/ndk';
|
|||
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
|
||||
import { LitElement, css } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
import { map } from 'lit/directives/map.js';
|
||||
import { html, literal } from 'lit/static-html.js';
|
||||
|
||||
import '@widgets/BitcoinBlockWidget';
|
||||
import '@components/AppGrid';
|
||||
import '@components/NostrAvatar';
|
||||
import '@components/General/Card';
|
||||
|
||||
@customElement('arx-eve-home')
|
||||
export class Home extends LitElement {
|
||||
|
|
@ -20,57 +24,57 @@ export class Home extends LitElement {
|
|||
id: 0,
|
||||
href: 'letters',
|
||||
name: 'Letters',
|
||||
color: '#FF33BB',
|
||||
icon: 'bxs:envelope',
|
||||
color: '#FF3E96',
|
||||
icon: 'fa-solid:leaf',
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
href: 'messages',
|
||||
name: 'Messages',
|
||||
color: '#34C759',
|
||||
icon: 'bxs:chat',
|
||||
name: 'Murmur',
|
||||
color: '#00CD66',
|
||||
icon: 'fa-solid:seedling',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
href: 'calendar',
|
||||
name: 'Calendar',
|
||||
color: '#FF9500',
|
||||
icon: 'bxs:calendar',
|
||||
color: '#FF8C00',
|
||||
icon: 'fa-solid:sun',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
href: 'arbor',
|
||||
name: 'Arbor',
|
||||
color: '#FF3B30',
|
||||
icon: 'bxs:conversation',
|
||||
color: '#FF4040',
|
||||
icon: 'fa-solid:tree',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
href: 'agora',
|
||||
name: 'Agora',
|
||||
color: '#5856D6',
|
||||
icon: 'bxs:store',
|
||||
href: 'grove',
|
||||
name: 'Grove',
|
||||
color: '#9370DB',
|
||||
icon: 'fa-solid:store-alt',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
href: 'wallet',
|
||||
name: 'Wallet',
|
||||
color: '#007AFF',
|
||||
icon: 'bxs:wallet',
|
||||
color: '#1E90FF',
|
||||
icon: 'fa-solid:spa',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
href: 'consortium',
|
||||
name: 'Consortium',
|
||||
color: '#FFCC00',
|
||||
icon: 'bxs:landmark',
|
||||
href: 'oracle',
|
||||
name: 'Oracle',
|
||||
color: '#FFD700',
|
||||
icon: 'bxs:landscape',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
href: 'settings',
|
||||
name: 'Settings',
|
||||
color: '#deadbeef',
|
||||
icon: 'bxs:wrench',
|
||||
color: '#7B68EE',
|
||||
icon: 'fa-solid:tools',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -91,26 +95,12 @@ export class Home extends LitElement {
|
|||
|
||||
static override styles = [
|
||||
css`
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.home {
|
||||
|
|
@ -126,36 +116,17 @@ export class Home extends LitElement {
|
|||
|
||||
.home-container {
|
||||
flex: 1;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.widgets-container {
|
||||
width: 300px;
|
||||
width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.widget {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
h3 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 18px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,20 +141,12 @@ export class Home extends LitElement {
|
|||
overflow-x: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.widget {
|
||||
min-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.widgets-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.widget {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
|
|
@ -193,21 +156,12 @@ export class Home extends LitElement {
|
|||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.welcome-text h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #1c1c1e;
|
||||
}
|
||||
|
||||
.welcome-text p {
|
||||
margin: 5px 0 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
@ -221,29 +175,20 @@ export class Home extends LitElement {
|
|||
return html`
|
||||
<div class="home">
|
||||
<div class="content-wrapper">
|
||||
<div class="home-container">
|
||||
<div class="welcome-section">
|
||||
<div class="avatar">
|
||||
<arx-nostr-profile
|
||||
.npub=${this.npub}
|
||||
render-type="avatar"
|
||||
></arx-nostr-profile>
|
||||
</div>
|
||||
<arx-card class="home-container">
|
||||
<arx-card class="welcome-section">
|
||||
<arx-nostr-avatar
|
||||
.profile=${this.profile}
|
||||
size="huge"
|
||||
></arx-nostr-avatar>
|
||||
<div class="welcome-text">
|
||||
<h1>Welcome, ${this.username}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</arx-card>
|
||||
<arx-app-grid .apps=${this.apps}></arx-app-grid>
|
||||
</div>
|
||||
</arx-card>
|
||||
<div class="widgets-container">
|
||||
${this.widgets.map(
|
||||
(widget) => html`
|
||||
<div class="widget">
|
||||
<h3>${widget.title}</h3>
|
||||
<${widget.content}></${widget.content}>
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
${map(this.widgets, (widget) => html`<arx-card><${widget.content}></${widget.content}></arx-card>`)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|||
import { when } from 'lit/directives/when.js';
|
||||
import { getUserProfile } from '../ndk';
|
||||
|
||||
import '@components/General/Card';
|
||||
|
||||
@customElement('arx-profile-route')
|
||||
export class NostrProfile extends LitElement {
|
||||
@property({ type: String })
|
||||
|
|
@ -24,13 +26,16 @@ export class NostrProfile extends LitElement {
|
|||
position: relative;
|
||||
height: 20rem;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-box) var(--radius-box) 0 0;
|
||||
border: var(--border) solid var(--color-base-300);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: scale(1);
|
||||
transition: transform 700ms;
|
||||
transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.banner-image:hover {
|
||||
|
|
@ -49,8 +54,8 @@ export class NostrProfile extends LitElement {
|
|||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgba(0, 0, 0, 0.2),
|
||||
rgba(0, 0, 0, 0.4)
|
||||
oklch(from var(--color-base-content) l c h / 0.2),
|
||||
oklch(from var(--color-base-content) l c h / 0.4)
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -70,14 +75,6 @@ export class NostrProfile extends LitElement {
|
|||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 1.5rem;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.profile-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -100,9 +97,11 @@ export class NostrProfile extends LitElement {
|
|||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 300ms;
|
||||
border: calc(var(--border) * 2) solid var(--color-base-100);
|
||||
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
||||
calc(var(--depth) * 4px)
|
||||
oklch(from var(--color-base-content) l c h / 0.15);
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.profile-image:hover {
|
||||
|
|
@ -113,16 +112,24 @@ export class NostrProfile extends LitElement {
|
|||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(to bottom right, #e5e7eb, #d1d5db);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--color-base-200),
|
||||
var(--color-base-300)
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: calc(var(--border) * 2) solid var(--color-base-100);
|
||||
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
||||
calc(var(--depth) * 4px)
|
||||
oklch(from var(--color-base-content) l c h / 0.15);
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
color: #9ca3af;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
|
|
@ -145,18 +152,19 @@ export class NostrProfile extends LitElement {
|
|||
.display-name {
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
color: var(--color-base-content);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.verified-icon {
|
||||
color: #3b82f6;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.nip05 {
|
||||
color: #4b5563;
|
||||
color: var(--color-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
|
@ -175,51 +183,13 @@ export class NostrProfile extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
.follow-button {
|
||||
padding: 0.5rem 1.5rem;
|
||||
border-radius: 9999px;
|
||||
font-weight: 500;
|
||||
transition: all 300ms;
|
||||
background-color: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.follow-button:hover {
|
||||
background-color: #2563eb;
|
||||
}
|
||||
|
||||
.follow-button.following {
|
||||
background-color: #e5e7eb;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.follow-button.following:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
padding: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background-color: #f3f4f6;
|
||||
transition: background-color 300ms;
|
||||
}
|
||||
|
||||
.copy-button:hover {
|
||||
background-color: #e5e7eb;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.links-section {
|
||||
display: grid;
|
||||
grid-auto-columns: minmax(300px, 1fr);
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
border-top: var(--border) solid var(--color-base-300);
|
||||
}
|
||||
|
||||
.link-item {
|
||||
|
|
@ -227,13 +197,19 @@ export class NostrProfile extends LitElement {
|
|||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #f9fafb;
|
||||
transition: background-color 300ms;
|
||||
border-radius: var(--radius-field);
|
||||
background-color: var(--color-base-200);
|
||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
text-decoration: none;
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
background-color: var(--color-base-300);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
|
||||
calc(var(--depth) * 4px)
|
||||
oklch(from var(--color-base-content) l c h / 0.1);
|
||||
}
|
||||
|
||||
.link-icon {
|
||||
|
|
@ -242,39 +218,23 @@ export class NostrProfile extends LitElement {
|
|||
}
|
||||
|
||||
.link-icon.website {
|
||||
color: #3b82f6;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.link-icon.lightning {
|
||||
color: #eab308;
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.bio {
|
||||
white-space: pre-line;
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
color: var(--color-secondary);
|
||||
margin: 1rem 0;
|
||||
padding-top: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.animate-gradient {
|
||||
background-size: 200% 200%;
|
||||
animation: gradient 15s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
padding: 1rem;
|
||||
line-height: 1.6;
|
||||
background-color: var(--color-base-200);
|
||||
border-radius: var(--radius-field);
|
||||
border-left: 3px solid var(--color-accent);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -317,7 +277,7 @@ export class NostrProfile extends LitElement {
|
|||
<div
|
||||
class=${this.profile.banner ? 'profile-container with-banner' : 'profile-container no-banner'}
|
||||
>
|
||||
<div class="profile-card">
|
||||
<arx-card>
|
||||
<div class="profile-content">
|
||||
<div class="profile-image-container">
|
||||
${when(
|
||||
|
|
@ -376,6 +336,7 @@ export class NostrProfile extends LitElement {
|
|||
<a
|
||||
href=${this.profile!.website}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="link-item"
|
||||
>
|
||||
<svg-icon icon="mdi:web" class="link-icon website"></svg-icon>
|
||||
|
|
@ -396,7 +357,7 @@ export class NostrProfile extends LitElement {
|
|||
`,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</arx-card>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
181
src/routes/Settings.ts
Normal file
181
src/routes/Settings.ts
Normal file
|
|
@ -0,0 +1,181 @@
|
|||
import defaultAvatar from '@/default-avatar.png';
|
||||
import { getSigner, getUserProfile, ndk } from '@/ndk';
|
||||
import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
|
||||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, state } from 'lit/decorators.js';
|
||||
import { when } from 'lit/directives/when.js';
|
||||
|
||||
import '@components/DateTimeSettings';
|
||||
import '@components/General/Input';
|
||||
import '@components/General/Button';
|
||||
import '@components/General/Fieldset';
|
||||
import '@components/General/Card';
|
||||
import '@components/Breadcrumbs';
|
||||
|
||||
@customElement('arx-settings')
|
||||
export class EveSettings extends LitElement {
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
font-family: var(--font-family, "Inter", system-ui, sans-serif);
|
||||
margin: 0 auto;
|
||||
line-height: 1.6;
|
||||
color: var(--color-base-content);
|
||||
background-color: var(--color-base-100);
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: calc(var(--border) * 2) solid var(--color-base-100);
|
||||
box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
|
||||
calc(var(--depth) * 6px)
|
||||
oklch(from var(--color-base-content) l c h / 0.15),
|
||||
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
|
||||
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.6);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.profile-image:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
|
||||
calc(var(--depth) * 8px) oklch(from var(--color-accent) l c h / 0.3),
|
||||
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
|
||||
calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
`;
|
||||
|
||||
@state() private loading = true;
|
||||
@state() private saving = false;
|
||||
@state() private profile: NDKUserProfile | undefined;
|
||||
@state() private error: string | undefined;
|
||||
@state() private darkMode = false;
|
||||
|
||||
protected override async firstUpdated() {
|
||||
try {
|
||||
this.profile = await getUserProfile();
|
||||
this.darkMode = localStorage.getItem('darkMode') === 'true';
|
||||
this.loading = false;
|
||||
} catch (err) {
|
||||
this.error = 'Failed to load profile';
|
||||
console.error(err);
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
private handleInputChange(e: Event) {
|
||||
const target = e.target as HTMLInputElement;
|
||||
this.profile = {
|
||||
...this.profile,
|
||||
[target.name]: target.value,
|
||||
};
|
||||
}
|
||||
|
||||
private async saveProfile() {
|
||||
if (this.saving) return;
|
||||
this.saving = true;
|
||||
try {
|
||||
await getSigner();
|
||||
const event = new NDKEvent(ndk);
|
||||
event.kind = 0;
|
||||
event.content = JSON.stringify(this.profile);
|
||||
await event.sign();
|
||||
await event.publish();
|
||||
} catch (err) {
|
||||
alert(err);
|
||||
console.error(err);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
private toggleDarkMode() {
|
||||
this.darkMode = !this.darkMode;
|
||||
localStorage.setItem('darkMode', this.darkMode.toString());
|
||||
document.body.classList.toggle('dark', this.darkMode);
|
||||
}
|
||||
|
||||
override render() {
|
||||
if (this.error) return html`<arx-error-view .error=${this.error}></arx-error-view>`;
|
||||
|
||||
if (this.loading) return html`<arx-loading-view></arx-loading-view>`;
|
||||
|
||||
const breadcrumbItems = [{ text: 'Home', href: '/' }, { text: 'Settings' }];
|
||||
|
||||
return html`
|
||||
<arx-breadcrumbs .items=${breadcrumbItems}></arx-breadcrumbs>
|
||||
<arx-card>
|
||||
<arx-fieldset legend="Dark Mode">
|
||||
<arx-toggle
|
||||
label="Dark Mode"
|
||||
.checked=${this.darkMode}
|
||||
@change=${() => this.toggleDarkMode()}
|
||||
></arx-toggle>
|
||||
</arx-fieldset>
|
||||
<arx-fieldset legend="Profile">
|
||||
${when(
|
||||
this.profile.picture,
|
||||
() => html`
|
||||
<div class="profile-header">
|
||||
<img
|
||||
class="profile-image"
|
||||
src=${this.profile!.picture}
|
||||
alt="Profile"
|
||||
@error=${(e: Event) => {
|
||||
(e.target as HTMLImageElement).src = defaultAvatar;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
`,
|
||||
)}
|
||||
|
||||
<arx-input
|
||||
label="Name"
|
||||
type="text"
|
||||
name="name"
|
||||
.value=${this.profile.name}
|
||||
@input=${this.handleInputChange}
|
||||
placeholder="Your display name"
|
||||
></arx-input>
|
||||
|
||||
<arx-input
|
||||
label="Profile Image URL"
|
||||
type="text"
|
||||
name="image"
|
||||
.value=${this.profile.picture}
|
||||
@input=${this.handleInputChange}
|
||||
placeholder="https://example.com/your-image.jpg"
|
||||
></arx-input>
|
||||
|
||||
<arx-input
|
||||
label="Banner URL"
|
||||
type="text"
|
||||
name="banner"
|
||||
.value=${this.profile.banner}
|
||||
@input=${this.handleInputChange}
|
||||
placeholder="https://example.com/your-image.jpg"
|
||||
></arx-input>
|
||||
</arx-fieldset>
|
||||
|
||||
<arx-date-time-settings></arx-date-time-settings>
|
||||
|
||||
<arx-button
|
||||
.label=${this.saving ? 'Saving...' : 'Save Changes'}
|
||||
@click=${this.saveProfile}
|
||||
?disabled=${this.saving}
|
||||
>
|
||||
</arx-button>
|
||||
</arx-card>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import '@routes/404Page';
|
||||
import '@routes/Home';
|
||||
import '@routes/Profile';
|
||||
import '@routes/Settings';
|
||||
import '@routes/Arbor/Home';
|
||||
import '@routes/Arbor/NewTopic';
|
||||
import '@routes/Arbor/TopicView';
|
||||
|
|
@ -10,6 +11,7 @@ import '@components/InitialSetup';
|
|||
import { spread } from '@open-wc/lit-helpers';
|
||||
import { LitElement, css } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { keyed } from 'lit/directives/keyed.js';
|
||||
import { type StaticValue, html, literal } from 'lit/static-html.js';
|
||||
|
||||
export interface RouteParams {
|
||||
|
|
@ -58,6 +60,11 @@ export default class EveRouter extends LitElement {
|
|||
params: {},
|
||||
component: literal`arx-arbor-post-creator`,
|
||||
},
|
||||
{
|
||||
pattern: 'settings',
|
||||
params: {},
|
||||
component: literal`arx-settings`,
|
||||
},
|
||||
{
|
||||
pattern: '404',
|
||||
params: {},
|
||||
|
|
@ -85,25 +92,16 @@ export default class EveRouter extends LitElement {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: 1px solid var(--border);
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.window {
|
||||
max-width: 1200px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.window-content {
|
||||
max-width: 1200px;
|
||||
overflow: visible;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -261,24 +259,29 @@ export default class EveRouter extends LitElement {
|
|||
override render() {
|
||||
if (!this.ccnSetup) return this.renderSetup();
|
||||
return html`
|
||||
<arx-header
|
||||
?canGoBack=${this.currentIndex > 0}
|
||||
?canGoForward=${this.currentIndex < this.history.length - 1}
|
||||
url="eve://${this.currentPath}"
|
||||
@navigate=${(e: CustomEvent) => this.navigate(e.detail)}
|
||||
@go-back=${this.goBack}
|
||||
@go-forward=${this.goForward}
|
||||
title="Eve"
|
||||
></arx-header>
|
||||
<arx-header
|
||||
?canGoBack=${this.currentIndex > 0}
|
||||
?canGoForward=${this.currentIndex < this.history.length - 1}
|
||||
url="eve://${this.currentPath}"
|
||||
@navigate=${(e: CustomEvent) => this.navigate(e.detail)}
|
||||
@go-back=${this.goBack}
|
||||
@go-forward=${this.goForward}
|
||||
title="Eve"
|
||||
></arx-header>
|
||||
<div class="window">
|
||||
<div class="window-content">
|
||||
<${this.currentRoute.component}
|
||||
${spread(this.currentRoute.params)}
|
||||
path=${this.currentPath}
|
||||
@navigate=${this.navigate}
|
||||
@go-back=${this.goBack}
|
||||
@go-forward=${this.goForward}
|
||||
></${this.currentRoute.component}>
|
||||
${keyed(
|
||||
this.currentRoute.params,
|
||||
html`
|
||||
<${this.currentRoute.component}
|
||||
${spread(this.currentRoute.params)}
|
||||
path=${this.currentPath}
|
||||
@navigate=${this.navigate}
|
||||
@go-back=${this.goBack}
|
||||
@go-forward=${this.goForward}
|
||||
></${this.currentRoute.component}>
|
||||
`,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue