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

🔄 ✨ Forum overhaul: Phora → Arbor (#1)

Browse source 
🔧 Replace legacy system with NIP-BB implementation
🚀 Enhance forum user experience with improved navigation and interactions
🎨 Redesign UI for forum
🏷️ Rebrand from "Phora" to "Arbor"
This commit is contained in:
Danny Morabito 2025-03-18 15:07:48 +00:00
parent 2a1447cd77
commit 5afeb4d01a
19 changed files with 1233 additions and 610 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/Breadcrumbs.ts
View file

@ -1,6 +1,7 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import './BreadcrumbsItem';
import { map } from 'lit/directives/map.js';
@customElement('arx-breadcrumbs')
export class Breadcrumbs extends LitElement {
@ -8,11 +9,29 @@ export class Breadcrumbs extends LitElement {
static override styles = [
css`
:host {
display: block;
--breadcrumb-bg: var(--surface, #ffffff);
--breadcrumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
--breadcrumb-border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
--breadcrumb-radius: 8px;
--breadcrumb-padding: 0.75rem 1.25rem;
--breadcrumb-font: var(--font-family, system-ui, sans-serif);
--breadcrumb-text-color: var(--text-primary, #333);
--breadcrumb-separator-color: var(--text-secondary, #666);
--breadcrumb-accent-color: var(--accent, #0066cc);
--breadcrumb-hover-color: var(--accent-dark, #004c99);
--breadcrumb-active-bg: var(--accent-light, rgba(0, 102, 204, 0.1));
}
nav {
max-width: 1200px;
margin: 1rem auto;
padding-inline: 1rem;
font-size: 0.9rem;
margin: 1.25rem auto;
background-color: var(--breadcrumb-bg);
border-radius: var(--breadcrumb-radius);
box-shadow: var(--breadcrumb-shadow);
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
transition: all 0.3s ease;
}
ol {
@ -20,8 +39,17 @@ export class Breadcrumbs extends LitElement {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
align-items: center;
overflow-x: auto;
scrollbar-width: none;
}
@media (max-width: 640px) {
nav {
padding: 0.5rem 1rem;
margin: 0.75rem auto;
}
}
`,
];
@ -30,14 +58,16 @@ export class Breadcrumbs extends LitElement {
return html`
<nav aria-label="Breadcrumb">
<ol>
${this.items.map(
${map(
this.items,
(item, index) => html`
<arx-breadcrumbs-item
.text=${item.text}
.href=${item.href}
.index=${index}
></arx-breadcrumbs-item>
`,
<arx-breadcrumbs-item
.text=${item.text}
.href=${item.href}
.index=${index}
.isLast=${index === this.items.length - 1}
></arx-breadcrumbs-item>
`,
)}
</ol>
</nav>