update
This commit is contained in:
@@ -67,8 +67,8 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
|
||||
.mainbox {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.lg)};
|
||||
}
|
||||
|
||||
.statusMonth {
|
||||
@@ -77,89 +77,102 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
position: relative;
|
||||
transition: border-color 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 280px;
|
||||
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
|
||||
}
|
||||
|
||||
.statusMonth:hover {
|
||||
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
box-shadow: ${cssManager.bdTheme('0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', '0 0 0 1px rgba(255, 255, 255, 0.1)')};
|
||||
}
|
||||
|
||||
.month-header {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: ${unsafeCSS(spacing.md)};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
letter-spacing: -0.01em;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.days-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
}
|
||||
|
||||
.days-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 2px;
|
||||
gap: 3px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.weekday-label {
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: ${unsafeCSS(spacing.sm)};
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.statusDay {
|
||||
aspect-ratio: 1;
|
||||
border-radius: 2px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statusDay:hover:not(.empty) {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.15);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.statusDay.operational {
|
||||
background: ${colors.status.operational};
|
||||
background: ${cssManager.bdTheme('#10b981', '#10b981')};
|
||||
}
|
||||
|
||||
.statusDay.degraded {
|
||||
background: ${colors.status.degraded};
|
||||
background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
|
||||
}
|
||||
|
||||
.statusDay.partial_outage {
|
||||
background: ${colors.status.partial};
|
||||
background: ${cssManager.bdTheme('#ef4444', '#ef4444')};
|
||||
}
|
||||
|
||||
.statusDay.major_outage {
|
||||
background: ${colors.status.major};
|
||||
background: ${cssManager.bdTheme('#dc2626', '#dc2626')};
|
||||
}
|
||||
|
||||
.statusDay.no-data {
|
||||
background: ${colors.border.muted};
|
||||
opacity: 0.3;
|
||||
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.statusDay.empty {
|
||||
background: transparent;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.statusDay.empty:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.overall-uptime {
|
||||
font-size: 13px;
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
font-size: 12px;
|
||||
margin-top: auto;
|
||||
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;
|
||||
gap: 6px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
|
||||
}
|
||||
|
||||
.uptime-stat {
|
||||
@@ -169,17 +182,17 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
}
|
||||
|
||||
.uptime-value {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.loading-skeleton {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.skeleton-header {
|
||||
@@ -263,6 +276,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
|
||||
.statusMonth {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.loading-skeleton {
|
||||
@@ -285,11 +299,14 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
<div class="statusMonth">
|
||||
<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 class="days-container">
|
||||
<div class="skeleton-grid">
|
||||
${Array(42).fill(0).map((_, i) => html`
|
||||
<div class="skeleton-day" style="--index: ${i}"></div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 48px; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; margin-top: auto; padding-top: 16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`)}
|
||||
@@ -310,10 +327,13 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
return html`
|
||||
<div class="statusMonth" @mouseleave=${this.hideTooltip}>
|
||||
<div class="month-header">${monthName}</div>
|
||||
<div class="days-grid">
|
||||
${this.renderWeekdayLabels()}
|
||||
${this.renderEmptyDays(firstDayOfWeek)}
|
||||
${monthData.days.map(day => this.renderDay(day))}
|
||||
<div class="days-container">
|
||||
<div class="days-grid">
|
||||
${this.renderWeekdayLabels()}
|
||||
${this.renderEmptyDays(firstDayOfWeek)}
|
||||
${monthData.days.map(day => this.renderDay(day))}
|
||||
${this.renderTrailingEmptyDays(firstDayOfWeek + monthData.days.length)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overall-uptime">
|
||||
<div class="uptime-stat">
|
||||
@@ -339,6 +359,12 @@ export class UplStatuspageStatusmonth extends DeesElement {
|
||||
private renderEmptyDays(count: number): TemplateResult[] {
|
||||
return Array(count).fill(0).map(() => html`<div class="statusDay empty"></div>`);
|
||||
}
|
||||
|
||||
private renderTrailingEmptyDays(totalCells: number): TemplateResult[] {
|
||||
const remainder = totalCells % 7;
|
||||
const trailingCount = remainder === 0 ? 0 : 7 - remainder;
|
||||
return Array(trailingCount).fill(0).map(() => html`<div class="statusDay empty"></div>`);
|
||||
}
|
||||
|
||||
private renderDay(day: any): TemplateResult {
|
||||
const status = day.status || 'no-data';
|
||||
|
||||
Reference in New Issue
Block a user