serve.zone/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(route-card): align route card with dees-tile layout and update header and footer styling

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-07 22:45:27 +00:00
parent 23fb25dcd5
commit 00ded5d12e
3 changed files with 85 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@@ -1,5 +1,12 @@
# Changelog # Changelog
## 2026-04-07 - 2.12.3 - fix(route-card)
align route card with dees-tile layout and update header and footer styling
- replace the custom card wrapper with dees-tile and move content into header, body, and footer slots
- restyle header, route name, and action buttons to match shared tile design tokens and interaction states
- wrap empty and populated route states consistently inside the tile component
## 2026-04-07 - 2.12.2 - fix(ts_web) ## 2026-04-07 - 2.12.2 - fix(ts_web)
adjust route card section background color in dark theme adjust route card section background color in dark theme

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@serve.zone/catalog', name: '@serve.zone/catalog',
version: '2.12.2', version: '2.12.3',
description: 'UI component catalog for serve.zone' description: 'UI component catalog for serve.zone'
} }

134
ts_web/elements/sz-route-card.ts
View File

@@ -163,26 +163,25 @@ export class SzRouteCard extends DeesElement {
display: block; display: block;
} }
.card { dees-tile::part(outer) {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
padding: 20px;
transition: border-color 200ms ease, box-shadow 200ms ease; transition: border-color 200ms ease, box-shadow 200ms ease;
} }
.card:hover { dees-tile:hover::part(outer) {
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')}; border-color: var(--dees-color-border-strong);
box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')}; box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
} }
/* Header */ /* Header */
.header { .header {
display: flex; display: flex;
align-items: flex-start; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
margin-bottom: 4px; height: 40px;
padding: 0 16px;
width: 100%;
box-sizing: border-box;
} }
.header-left { .header-left {
@@ -190,6 +189,7 @@ export class SzRouteCard extends DeesElement {
align-items: center; align-items: center;
gap: 8px; gap: 8px;
min-width: 0; min-width: 0;
flex: 1;
} }
.status-dot { .status-dot {
@@ -209,9 +209,10 @@ export class SzRouteCard extends DeesElement {
} }
.route-name { .route-name {
font-size: 15px; font-size: 14px;
font-weight: 600; font-weight: 500;
color: ${cssManager.bdTheme('#18181b', '#fafafa')}; letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -253,6 +254,10 @@ export class SzRouteCard extends DeesElement {
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
} }
.card-body {
padding: 16px 20px;
}
.description { .description {
font-size: 13px; font-size: 13px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
@@ -503,43 +508,52 @@ export class SzRouteCard extends DeesElement {
color: ${cssManager.bdTheme('#0e7490', '#22d3ee')}; color: ${cssManager.bdTheme('#0e7490', '#22d3ee')};
} }
.card-actions { .card-footer {
display: flex; display: flex;
gap: 8px; flex-direction: row;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
justify-content: flex-end; justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
} }
.action-btn { .tile-button {
display: inline-flex; padding: 0 16px;
align-items: center; height: 100%;
gap: 4px; text-align: center;
padding: 5px 12px;
border-radius: 6px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')}; user-select: none;
background: ${cssManager.bdTheme('#ffffff', '#09090b')}; transition: all 0.15s ease;
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')}; background: transparent;
transition: all 150ms ease; border: none;
border-left: 1px solid var(--dees-color-border-subtle);
color: var(--dees-color-text-muted);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
font-family: inherit;
} }
.action-btn:hover { .tile-button:first-child {
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')}; border-left: none;
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
} }
.action-btn.edit:hover { .tile-button:hover {
border-color: ${cssManager.bdTheme('#93c5fd', 'rgba(59, 130, 246, 0.5)')}; background: var(--dees-color-hover);
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')}; color: var(--dees-color-text-primary);
} }
.action-btn.delete:hover { .tile-button.edit:hover {
border-color: ${cssManager.bdTheme('#fca5a5', 'rgba(239, 68, 68, 0.5)')}; color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
}
.tile-button.delete:hover {
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
color: ${cssManager.bdTheme('#dc2626', '#f87171')}; color: ${cssManager.bdTheme('#dc2626', '#f87171')};
} }
`, `,
@@ -547,7 +561,11 @@ export class SzRouteCard extends DeesElement {
public render(): TemplateResult { public render(): TemplateResult {
if (!this.route) { if (!this.route) {
return html`<div class="card"><div class="no-route">No route data</div></div>`; return html`
<dees-tile>
<div class="card-body"><div class="no-route">No route data</div></div>
</dees-tile>
`;
} }
const r = this.route; const r = this.route;
@@ -557,9 +575,9 @@ export class SzRouteCard extends DeesElement {
const security = r.security; const security = r.security;
return html` return html`
<div class="card"> <dees-tile>
<!-- Header --> <!-- Header -->
<div class="header"> <div slot="header" class="header">
<div class="header-left"> <div class="header-left">
<span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span> <span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
<span class="route-name">${r.name || r.id || 'Unnamed Route'}</span> <span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
@@ -570,16 +588,17 @@ export class SzRouteCard extends DeesElement {
</div> </div>
</div> </div>
${r.description ? html`<div class="description">${r.description}</div>` : ''} <div class="card-body">
${r.description ? html`<div class="description">${r.description}</div>` : ''}
<div class="meta-row"> <div class="meta-row">
${r.tags && r.tags.length > 0 ${r.tags && r.tags.length > 0
? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>` ? html`<div class="tags">${r.tags.map((t) => html`<span class="tag">${t}</span>`)}</div>`
: html`<div></div>`} : html`<div></div>`}
${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''} ${r.priority != null ? html`<span class="priority">Priority: ${r.priority}</span>` : ''}
</div> </div>
<!-- Match Section --> <!-- Match Section -->
<div class="section match"> <div class="section match">
<div class="section-label">Match</div> <div class="section-label">Match</div>
<div class="field-row"> <div class="field-row">
@@ -735,19 +754,20 @@ export class SzRouteCard extends DeesElement {
` `
: ''} : ''}
<!-- VPN Section --> <!-- VPN Section -->
${this.renderVpn()} ${this.renderVpn()}
<!-- Linked References Section --> <!-- Linked References Section -->
${this.renderLinked()} ${this.renderLinked()}
<!-- Feature Icons Row --> <!-- Feature Icons Row -->
${this.renderFeatures()} ${this.renderFeatures()}
</div>
<!-- Action Buttons --> <!-- Action Buttons -->
${this.showActions ? html` ${this.showActions ? html`
<div class="card-actions"> <div slot="footer" class="card-footer">
<button class="action-btn edit" @click=${(e: Event) => { <button class="tile-button edit" @click=${(e: Event) => {
e.stopPropagation(); e.stopPropagation();
this.dispatchEvent(new CustomEvent('route-edit', { this.dispatchEvent(new CustomEvent('route-edit', {
detail: this.route, detail: this.route,
@@ -755,7 +775,7 @@ export class SzRouteCard extends DeesElement {
composed: true, composed: true,
})); }));
}}>Edit</button> }}>Edit</button>
<button class="action-btn delete" @click=${(e: Event) => { <button class="tile-button delete" @click=${(e: Event) => {
e.stopPropagation(); e.stopPropagation();
this.dispatchEvent(new CustomEvent('route-delete', { this.dispatchEvent(new CustomEvent('route-delete', {
detail: this.route, detail: this.route,
@@ -765,7 +785,7 @@ export class SzRouteCard extends DeesElement {
}}>Delete</button> }}>Delete</button>
</div> </div>
` : ''} ` : ''}
</div> </dees-tile>
`; `;
} }