From 5fcf910eab654f3bb66ae3eb58a7492229307246 Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Sun, 29 Jun 2025 23:25:42 +0000 Subject: [PATCH] update --- ts_web/elements/upl-statuspage-statusmonth.ts | 177 ++++++++++++------ 1 file changed, 120 insertions(+), 57 deletions(-) diff --git a/ts_web/elements/upl-statuspage-statusmonth.ts b/ts_web/elements/upl-statuspage-statusmonth.ts index d17b20a..352a89a 100644 --- a/ts_web/elements/upl-statuspage-statusmonth.ts +++ b/ts_web/elements/upl-statuspage-statusmonth.ts @@ -67,56 +67,57 @@ export class UplStatuspageStatusmonth extends DeesElement { .mainbox { display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: ${unsafeCSS(spacing.lg)}; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: ${unsafeCSS(spacing.md)}; } .statusMonth { - background: ${colors.background.card}; + background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; padding: ${unsafeCSS(spacing.lg)}; - border-radius: ${unsafeCSS(borderRadius.md)}; - border: 1px solid ${colors.border.default}; - box-shadow: ${unsafeCSS(shadows.sm)}; + border-radius: ${unsafeCSS(borderRadius.base)}; + border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')}; position: relative; + transition: border-color 0.2s ease; + } + + .statusMonth:hover { + border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')}; } .month-header { font-size: 14px; - font-weight: 600; + font-weight: 500; margin-bottom: ${unsafeCSS(spacing.md)}; - text-align: center; - color: ${colors.text.primary}; - letter-spacing: 0.02em; + color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + letter-spacing: -0.01em; } .days-grid { display: grid; grid-template-columns: repeat(7, 1fr); - gap: 3px; + gap: 2px; } .weekday-label { - font-size: 12px; + font-size: 11px; text-align: center; - color: ${colors.text.secondary}; - font-weight: 500; + color: ${cssManager.bdTheme('#9ca3af', '#71717a')}; + font-weight: 400; height: 20px; line-height: 20px; - margin-bottom: ${unsafeCSS(spacing.xs)}; + margin-bottom: ${unsafeCSS(spacing.sm)}; } .statusDay { aspect-ratio: 1; - border-radius: ${unsafeCSS(borderRadius.sm)}; + border-radius: 2px; cursor: pointer; - transition: all 0.2s ease; + transition: opacity 0.15s ease; position: relative; } - .statusDay:hover { - transform: scale(1.15); - box-shadow: ${unsafeCSS(shadows.md)}; - z-index: 1; + .statusDay:hover:not(.empty) { + opacity: 0.8; } .statusDay.operational { @@ -151,54 +152,96 @@ export class UplStatuspageStatusmonth extends DeesElement { } .overall-uptime { - text-align: center; font-size: 13px; margin-top: ${unsafeCSS(spacing.md)}; - color: ${colors.text.secondary}; - line-height: 1.4; + padding-top: ${unsafeCSS(spacing.md)}; + border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; + color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; + display: flex; + flex-direction: column; + gap: 4px; + } + + .uptime-stat { + display: flex; + justify-content: space-between; + align-items: center; + } + + .uptime-value { + font-weight: 500; + color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + font-variant-numeric: tabular-nums; } .loading-skeleton { - height: 280px; - background: ${cssManager.bdTheme( - 'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)', - 'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)' - )}; - background-size: 200% 100%; - animation: loading 1.5s infinite; - border-radius: ${unsafeCSS(borderRadius.md)}; + height: 200px; + display: flex; + flex-direction: column; + gap: ${unsafeCSS(spacing.sm)}; + padding: ${unsafeCSS(spacing.lg)}; + } + + .skeleton-header { + height: 20px; + width: 80px; + background: ${cssManager.bdTheme('#f3f4f6', '#27272a')}; + border-radius: 4px; + animation: pulse 2s infinite; + } + + .skeleton-grid { + flex: 1; + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; + } + + .skeleton-day { + background: ${cssManager.bdTheme('#f3f4f6', '#27272a')}; + border-radius: 2px; + animation: pulse 2s infinite; + animation-delay: calc(var(--index) * 0.05s); + } + + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } } @keyframes loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } + 0% { transform: translateX(-100%); } + 100% { transform: translateX(200%); } } .tooltip { position: absolute; - background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; - color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; - padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)}; - border-radius: ${unsafeCSS(borderRadius.base)}; + background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; + color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; + padding: 8px 12px; + border-radius: 4px; font-size: 12px; pointer-events: none; opacity: 0; - transition: opacity 0.2s; - z-index: 10; + transition: opacity 0.15s; + z-index: 50; white-space: nowrap; - box-shadow: ${unsafeCSS(shadows.lg)}; - border: 1px solid ${colors.border.default}; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + line-height: 1.5; } .tooltip.visible { - opacity: 0.95; + opacity: 1; } - .tooltip strong { - font-weight: 600; - display: block; - margin-bottom: ${unsafeCSS(spacing.xs)}; - color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; + .tooltip-date { + font-weight: 500; + margin-bottom: 4px; + } + + .tooltip-stat { + font-size: 11px; + opacity: 0.9; } .no-data-message { @@ -221,6 +264,11 @@ export class UplStatuspageStatusmonth extends DeesElement { .statusMonth { padding: ${unsafeCSS(spacing.md)}; } + + .loading-skeleton { + height: 180px; + padding: ${unsafeCSS(spacing.md)}; + } } ` ] @@ -233,9 +281,16 @@ export class UplStatuspageStatusmonth extends DeesElement { ${this.serviceName} - Last ${totalDays} Days
${this.loading ? html` - ${Array(this.monthsToShow).fill(0).map(() => html` + ${Array(this.monthsToShow).fill(0).map((_, index) => html`
-
+
+
+
+ ${Array(35).fill(0).map((_, i) => html` +
+ `)} +
+
`)} ` : this.monthlyData.length === 0 ? html` @@ -261,8 +316,16 @@ export class UplStatuspageStatusmonth extends DeesElement { ${monthData.days.map(day => this.renderDay(day))}
- ${monthData.overallUptime.toFixed(2)}% uptime - ${monthData.totalIncidents > 0 ? html`
${monthData.totalIncidents} incidents` : ''} +
+ Uptime + ${monthData.overallUptime.toFixed(2)}% +
+ ${monthData.totalIncidents > 0 ? html` +
+ Incidents + ${monthData.totalIncidents} +
+ ` : ''}
`; @@ -319,11 +382,11 @@ export class UplStatuspageStatusmonth extends DeesElement { statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1); tooltip.innerHTML = ` -
${dateStr}
-
Status: ${statusText}
-
Uptime: ${day.uptime.toFixed(2)}%
- ${day.incidents > 0 ? `
Incidents: ${day.incidents}
` : ''} - ${day.totalDowntime > 0 ? `
Downtime: ${day.totalDowntime} minutes
` : ''} +
${dateStr}
+
Status: ${statusText}
+
Uptime: ${day.uptime.toFixed(2)}%
+ ${day.incidents > 0 ? `
Incidents: ${day.incidents}
` : ''} + ${day.totalDowntime > 0 ? `
Downtime: ${day.totalDowntime} min
` : ''} `; const rect = (event.target as HTMLElement).getBoundingClientRect();