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

feat(elements): standardize dashboard and detail views on dees tile and stats grid components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-07 22:27:23 +00:00
parent b91d3a9341
commit 9aad9c0c2a
16 changed files with 1148 additions and 972 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
ts_web/elements/sz-domain-detail-view.ts
View File

@@ -229,57 +229,87 @@ export class SzDomainDetailView extends DeesElement {
}
}
.section {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 8px;
overflow: hidden;
}
.section.full-width {
dees-tile.full-width {
grid-column: 1 / -1;
}
.section-header {
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
padding: 0 16px;
width: 100%;
box-sizing: border-box;
}
.section-title {
font-size: 14px;
font-weight: 600;
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
flex: 1;
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--dees-color-text-secondary);
}
.section-title svg {
width: 16px;
height: 16px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--dees-color-text-secondary);
}
.section-action {
padding: 6px 10px;
background: transparent;
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
border-radius: 4px;
.section-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 0;
height: 36px;
width: 100%;
box-sizing: border-box;
}
.tile-button {
padding: 0 16px;
height: 100%;
text-align: center;
font-size: 12px;
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
font-weight: 500;
cursor: pointer;
transition: all 200ms ease;
user-select: none;
transition: all 0.15s ease;
background: transparent;
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;
}
.section-action:hover {
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
.tile-button:first-child {
border-left: none;
}
.tile-button:hover {
background: var(--dees-color-hover);
color: var(--dees-color-text-primary);
}
.tile-button.primary {
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
font-weight: 600;
}
.tile-button.primary:hover {
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
}
.section-content {
padding: 16px;
}
@@ -582,8 +612,8 @@ export class SzDomainDetailView extends DeesElement {
<div class="grid">
<!-- Certificate Section -->
<div class="section">
<div class="section-header">
<dees-tile>
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
@@ -591,9 +621,6 @@ export class SzDomainDetailView extends DeesElement {
</svg>
SSL Certificate
</div>
${this.certificate ? html`
<button class="section-action" @click=${() => this.handleRenewCertificate()}>Renew</button>
` : ''}
</div>
<div class="section-content">
${this.certificate ? html`
@@ -652,11 +679,16 @@ export class SzDomainDetailView extends DeesElement {
<div class="empty-state">No certificate configured</div>
`}
</div>
</div>
${this.certificate ? html`
<div slot="footer" class="section-footer">
<button class="tile-button primary" @click=${() => this.handleRenewCertificate()}>Renew</button>
</div>
` : ''}
</dees-tile>
<!-- Proxy Routes Section -->
<div class="section">
<div class="section-header">
<dees-tile>
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 3 21 3 21 8"></polyline>
@@ -679,11 +711,11 @@ export class SzDomainDetailView extends DeesElement {
<div class="empty-state">No proxy routes configured</div>
`}
</div>
</div>
</dees-tile>
<!-- DNS Records Section -->
<div class="section full-width">
<div class="section-header">
<dees-tile class="full-width">
<div slot="header" class="section-header">
<div class="section-title">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
@@ -692,13 +724,6 @@ export class SzDomainDetailView extends DeesElement {
</svg>
DNS Records
</div>
<button class="section-action" @click=${() => this.handleAddDnsRecord()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add Record
</button>
</div>
<div class="section-content">
${this.dnsRecords.length > 0 ? html`
@@ -737,7 +762,16 @@ export class SzDomainDetailView extends DeesElement {
<div class="empty-state">No DNS records configured</div>
`}
</div>
</div>
<div slot="footer" class="section-footer">
<button class="tile-button primary" @click=${() => this.handleAddDnsRecord()}>
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add Record
</button>
</div>
</dees-tile>
</div>
`;
}