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

44
ts_web/elements/upl-statuspage-statusdetails.ts
View File

@@ -10,7 +10,7 @@ import {
unsafeCSS,
} from '@design.estate/dees-element';
import type { IStatusHistoryPoint } from '../interfaces/index.js';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles, getStatusColor } from '../styles/shared.styles.js';
import * as sharedStyles from '../styles/shared.styles.js';
import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-statusdetails.demo.js';
@@ -26,22 +26,22 @@ export class UplStatuspageStatusdetails extends DeesElement {
public static demo = demoFunc;
@property({ type: Array })
public historyData: IStatusHistoryPoint[] = [];
accessor historyData: IStatusHistoryPoint[] = [];
@property({ type: Array })
public dataPoints: IStatusHistoryPoint[] = [];
accessor dataPoints: IStatusHistoryPoint[] = [];
@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: Number })
public hoursToShow: number = 48;
accessor hoursToShow: number = 48;
constructor() {
super();
@@ -49,20 +49,20 @@ export class UplStatuspageStatusdetails extends DeesElement {
public static styles = [
plugins.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)};
}
.graph-wrapper {
@@ -86,10 +86,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
position: relative;
display: flex;
gap: 2px;
padding: ${unsafeCSS(spacing.sm)};
padding: ${unsafeCSS(sharedStyles.spacing.sm)};
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
overflow: hidden;
height: 40px;
}
@@ -138,10 +138,10 @@ export class UplStatuspageStatusdetails extends DeesElement {
display: flex;
justify-content: space-between;
padding: 0;
margin-top: ${unsafeCSS(spacing.xs)};
margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
font-size: 10px;
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
font-family: ${unsafeCSS(fonts.base)};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
opacity: 0.8;
}
@@ -202,16 +202,16 @@ export class UplStatuspageStatusdetails extends DeesElement {
@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)};
}
.graph-container {
padding: ${unsafeCSS(spacing.sm)};
padding: ${unsafeCSS(sharedStyles.spacing.sm)};
}
.mainbox .barContainer {
height: 32px;
padding: ${unsafeCSS(spacing.xs)};
padding: ${unsafeCSS(sharedStyles.spacing.xs)};
}
.time-labels {
@@ -221,7 +221,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
.stats-row {
font-size: 11px;
flex-direction: column;
gap: ${unsafeCSS(spacing.sm)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
align-items: flex-start;
}
}
@@ -235,7 +235,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
<div class="mainbox">
${this.loading ? html`
<div class="graph-container">
<div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${borderRadius.base}; padding: ${spacing.sm}; height: 40px;">
<div class="barContainer" style="background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')}; border: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')}; border-radius: ${sharedStyles.borderRadius.base}; padding: ${sharedStyles.spacing.sm}; height: 40px;">
<div class="loading-skeleton">
${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
</div>