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

50
ts_web/elements/sz-platform-service-detail-view.ts
View File

@@ -225,39 +225,35 @@ export class SzPlatformServiceDetailView 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-content {
@@ -452,8 +448,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
<div class="grid">
<!-- Connection Info -->
<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">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
@@ -516,11 +512,11 @@ export class SzPlatformServiceDetailView extends DeesElement {
</div>
` : ''}
</div>
</div>
</dees-tile>
<!-- Configuration -->
<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">
<circle cx="12" cy="12" r="3"></circle>
@@ -537,12 +533,12 @@ export class SzPlatformServiceDetailView extends DeesElement {
</div>
`)}
</div>
</div>
</dees-tile>
<!-- Metrics -->
${this.service.metrics ? html`
<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">
<line x1="18" y1="20" x2="18" y2="10"></line>
@@ -583,7 +579,7 @@ export class SzPlatformServiceDetailView extends DeesElement {
` : ''}
</div>
</div>
</div>
</dees-tile>
` : ''}
<!-- Logs -->