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

feat(statuspage): refactor shared styles and modernize components for consistent theming, spacing and APIs

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 09:26:37 +00:00
parent 891eb04d11
commit ed9728dd4a
24 changed files with 4177 additions and 3542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
ts_web/elements/upl-statuspage-statusmonth.ts
View File

@@ -10,7 +10,7 @@ import {
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import type { IMonthlyUptime } from '../interfaces/index.js';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
import * as sharedStyles from '../styles/shared.styles.js';
import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-statusmonth.demo.js';
@@ -26,22 +26,22 @@ export class UplStatuspageStatusmonth extends DeesElement {
public static demo = demoFunc;
@property({ type: Array })
public monthlyData: IMonthlyUptime[] = [];
accessor monthlyData: IMonthlyUptime[] = [];
@property({ type: String })
public serviceId: string = '';
accessor serviceId: string = '';
@property({ type: String })
public serviceName: string = 'Service';
accessor serviceName: string = 'Service';
@property({ type: Boolean })
public loading: boolean = false;
accessor loading: boolean = false;
@property({ type: Boolean })
public showTooltip: boolean = true;
accessor showTooltip: boolean = true;
@property({ type: Number })
public monthsToShow: number = 5;
accessor monthsToShow: number = 5;
constructor() {
super();
@@ -49,32 +49,32 @@ export class UplStatuspageStatusmonth extends DeesElement {
public static styles = [
domtools.elementBasic.staticStyles,
commonStyles,
sharedStyles.commonStyles,
css`
:host {
position: relative;
display: block;
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
color: ${colors.text.primary};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
color: ${sharedStyles.colors.text.primary};
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
}
.mainbox {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: ${unsafeCSS(spacing.lg)};
gap: ${unsafeCSS(sharedStyles.spacing.lg)};
}
.statusMonth {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
padding: ${unsafeCSS(spacing.lg)};
border-radius: ${unsafeCSS(borderRadius.base)};
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
position: relative;
transition: all 0.2s ease;
@@ -83,7 +83,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
min-height: 280px;
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
}
.statusMonth:hover {
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)')};
@@ -92,7 +92,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
.month-header {
font-size: 13px;
font-weight: 600;
margin-bottom: ${unsafeCSS(spacing.md)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.md)};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
letter-spacing: 0.02em;
text-transform: uppercase;
@@ -102,9 +102,9 @@ export class UplStatuspageStatusmonth extends DeesElement {
flex: 1;
display: flex;
flex-direction: column;
margin-bottom: ${unsafeCSS(spacing.lg)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.lg)};
}
.days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
@@ -119,7 +119,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
font-weight: 500;
height: 20px;
line-height: 20px;
margin-bottom: ${unsafeCSS(spacing.sm)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
text-transform: uppercase;
}
@@ -171,7 +171,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
.overall-uptime {
font-size: 12px;
margin-top: auto;
padding-top: ${unsafeCSS(spacing.md)};
padding-top: ${unsafeCSS(sharedStyles.spacing.md)};
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
display: flex;
flex-direction: column;
@@ -195,7 +195,7 @@ export class UplStatuspageStatusmonth extends DeesElement {
.loading-skeleton {
display: flex;
flex-direction: column;
gap: ${unsafeCSS(spacing.sm)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
height: 100%;
}
@@ -264,28 +264,28 @@ export class UplStatuspageStatusmonth extends DeesElement {
.no-data-message {
grid-column: 1 / -1;
text-align: center;
padding: ${unsafeCSS(spacing['2xl'])};
color: ${colors.text.secondary};
padding: ${unsafeCSS(sharedStyles.spacing['2xl'])};
color: ${sharedStyles.colors.text.secondary};
}
@media (max-width: 640px) {
.container {
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
}
.mainbox {
grid-template-columns: 1fr;
gap: ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.md)};
}
.statusMonth {
padding: ${unsafeCSS(spacing.md)};
padding: ${unsafeCSS(sharedStyles.spacing.md)};
min-height: 260px;
}
.loading-skeleton {
height: 180px;
padding: ${unsafeCSS(spacing.md)};
padding: ${unsafeCSS(sharedStyles.spacing.md)};
}
}
`