update
This commit is contained in:
@@ -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 {
|
||||
<uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
|
||||
<div class="mainbox">
|
||||
${this.loading ? html`
|
||||
${Array(this.monthsToShow).fill(0).map(() => html`
|
||||
${Array(this.monthsToShow).fill(0).map((_, index) => html`
|
||||
<div class="statusMonth">
|
||||
<div class="loading-skeleton"></div>
|
||||
<div class="loading-skeleton">
|
||||
<div class="skeleton-header"></div>
|
||||
<div class="skeleton-grid">
|
||||
${Array(35).fill(0).map((_, i) => html`
|
||||
<div class="skeleton-day" style="--index: ${i}"></div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
` : this.monthlyData.length === 0 ? html`
|
||||
@@ -261,8 +316,16 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
${monthData.days.map(day => this.renderDay(day))}
|
||||
</div>
|
||||
<div class="overall-uptime">
|
||||
${monthData.overallUptime.toFixed(2)}% uptime
|
||||
${monthData.totalIncidents > 0 ? html`<br/>${monthData.totalIncidents} incidents` : ''}
|
||||
<div class="uptime-stat">
|
||||
<span>Uptime</span>
|
||||
<span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
|
||||
</div>
|
||||
${monthData.totalIncidents > 0 ? html`
|
||||
<div class="uptime-stat">
|
||||
<span>Incidents</span>
|
||||
<span class="uptime-value">${monthData.totalIncidents}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -319,11 +382,11 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
|
||||
|
||||
tooltip.innerHTML = `
|
||||
<div><strong>${dateStr}</strong></div>
|
||||
<div>Status: ${statusText}</div>
|
||||
<div>Uptime: ${day.uptime.toFixed(2)}%</div>
|
||||
${day.incidents > 0 ? `<div>Incidents: ${day.incidents}</div>` : ''}
|
||||
${day.totalDowntime > 0 ? `<div>Downtime: ${day.totalDowntime} minutes</div>` : ''}
|
||||
<div class="tooltip-date">${dateStr}</div>
|
||||
<div class="tooltip-stat">Status: ${statusText}</div>
|
||||
<div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
|
||||
${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
|
||||
${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</div>` : ''}
|
||||
`;
|
||||
|
||||
const rect = (event.target as HTMLElement).getBoundingClientRect();
|
||||
|
||||
Reference in New Issue
Block a user