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

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-29 22:36:12 +00:00
parent 313e736f29
commit f7d3709dac
4 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ts_web/elements/upl-statuspage-header.ts
View File

@@ -1,6 +1,6 @@
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element'; import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import { fonts } from '../styles/shared.styles.js'; import { fonts, shadows } from '../styles/shared.styles.js';
import { demoFunc } from './upl-statuspage-header.demo.js'; import { demoFunc } from './upl-statuspage-header.demo.js';
declare global { declare global {
@@ -46,10 +46,9 @@ export class UplStatuspageHeader extends DeesElement {
css` css`
:host { :host {
display: block; display: block;
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; background: transparent;
font-family: ${unsafeCSS(fonts.base)}; font-family: ${unsafeCSS(fonts.base)};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')};
} }
.mainbox { .mainbox {
@@ -66,10 +65,11 @@ export class UplStatuspageHeader extends DeesElement {
} }
.mainbox .actions .actionButton { .mainbox .actions .actionButton {
background: transparent; background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.8)', 'rgba(0, 0, 0, 0.6)')};
backdrop-filter: blur(10px);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')}; border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
padding: 8px 16px; padding: 8px 16px;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
@@ -80,12 +80,14 @@ export class UplStatuspageHeader extends DeesElement {
justify-content: center; justify-content: center;
min-height: 36px; min-height: 36px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
box-shadow: ${unsafeCSS(shadows.sm)};
} }
.mainbox .actions .actionButton:hover { .mainbox .actions .actionButton:hover {
background: ${cssManager.bdTheme('#f9fafb', '#262626')}; background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(0, 0, 0, 0.8)')};
border-color: ${cssManager.bdTheme('#d1d5db', '#404040')}; border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')};
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
} }
.mainbox .actions .actionButton:active { .mainbox .actions .actionButton:active {
@@ -93,7 +95,7 @@ export class UplStatuspageHeader extends DeesElement {
} }
.header-content { .header-content {
padding: 48px 0 64px 0; padding: 64px 0 48px 0;
text-align: center; text-align: center;
} }
@@ -144,12 +146,14 @@ export class UplStatuspageHeader extends DeesElement {
.actionButton.primary { .actionButton.primary {
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')}; border-color: transparent;
backdrop-filter: none;
} }
.actionButton.primary:hover { .actionButton.primary:hover {
background: ${cssManager.bdTheme('#262626', '#f4f4f5')}; background: ${cssManager.bdTheme('#262626', '#e5e7eb')};
border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')}; transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
} }
` `
] ]

22
ts_web/elements/upl-statuspage-statusbar.ts
View File

@@ -1,7 +1,7 @@
import { DeesElement, property, html, customElement, type TemplateResult, cssManager, css, unsafeCSS } from '@design.estate/dees-element'; import { DeesElement, property, html, customElement, type TemplateResult, cssManager, css, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import type { IOverallStatus } from '../interfaces/index.js'; import type { IOverallStatus } from '../interfaces/index.js';
import { fonts } from '../styles/shared.styles.js'; import { fonts, colors } from '../styles/shared.styles.js';
import { demoFunc } from './upl-statuspage-statusbar.demo.js'; import { demoFunc } from './upl-statuspage-statusbar.demo.js';
declare global { declare global {
@@ -77,32 +77,32 @@ export class UplStatuspageStatusbar extends DeesElement {
} }
.statusbar-inner.operational { .statusbar-inner.operational {
background: ${cssManager.bdTheme('#10b981', '#064e3b')}; background: ${colors.status.operational};
border-color: ${cssManager.bdTheme('#10b981', '#064e3b')}; border-color: ${colors.status.operational};
color: white; color: white;
} }
.statusbar-inner.degraded { .statusbar-inner.degraded {
background: ${cssManager.bdTheme('#f59e0b', '#78350f')}; background: ${colors.status.degraded};
border-color: ${cssManager.bdTheme('#f59e0b', '#78350f')}; border-color: ${colors.status.degraded};
color: white; color: white;
} }
.statusbar-inner.partial_outage { .statusbar-inner.partial_outage {
background: ${cssManager.bdTheme('#ef4444', '#7f1d1d')}; background: ${colors.status.partial};
border-color: ${cssManager.bdTheme('#ef4444', '#7f1d1d')}; border-color: ${colors.status.partial};
color: white; color: white;
} }
.statusbar-inner.major_outage { .statusbar-inner.major_outage {
background: ${cssManager.bdTheme('#dc2626', '#450a0a')}; background: ${colors.status.major};
border-color: ${cssManager.bdTheme('#dc2626', '#450a0a')}; border-color: ${colors.status.major};
color: white; color: white;
} }
.statusbar-inner.maintenance { .statusbar-inner.maintenance {
background: ${cssManager.bdTheme('#3b82f6', '#1e3a8a')}; background: ${colors.status.maintenance};
border-color: ${cssManager.bdTheme('#3b82f6', '#1e3a8a')}; border-color: ${colors.status.maintenance};
color: white; color: white;
} }

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

@@ -75,7 +75,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
display: flex; display: flex;
gap: 2px; gap: 2px;
padding: ${unsafeCSS(spacing.sm)}; padding: ${unsafeCSS(spacing.sm)};
background: ${colors.background.secondary};
border-radius: ${unsafeCSS(borderRadius.base)}; border-radius: ${unsafeCSS(borderRadius.base)};
overflow: hidden; overflow: hidden;
} }
@@ -87,12 +86,11 @@ export class UplStatuspageStatusdetails extends DeesElement {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
opacity: 0.9;
} }
.mainbox .barContainer .bar:hover { .mainbox .barContainer .bar:hover {
opacity: 1; transform: scaleY(1.1);
transform: scaleY(1.05); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
} }
.mainbox .barContainer .bar.operational { .mainbox .barContainer .bar.operational {
@@ -136,14 +134,15 @@ export class UplStatuspageStatusdetails extends DeesElement {
justify-content: space-between; justify-content: space-between;
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0; padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0;
font-size: 12px; font-size: 12px;
color: ${colors.text.secondary}; color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
font-family: ${unsafeCSS(fonts.mono)}; font-family: ${unsafeCSS(fonts.mono)};
font-weight: 500;
} }
.tooltip { .tooltip {
position: absolute; position: absolute;
background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; background: ${cssManager.bdTheme('#18181b', '#ffffff')};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; color: ${cssManager.bdTheme('#fafafa', '#18181b')};
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)}; padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
border-radius: ${unsafeCSS(borderRadius.base)}; border-radius: ${unsafeCSS(borderRadius.base)};
font-size: 13px; font-size: 13px;
@@ -153,7 +152,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
z-index: 10; z-index: 10;
white-space: nowrap; white-space: nowrap;
box-shadow: ${unsafeCSS(shadows.lg)}; box-shadow: ${unsafeCSS(shadows.lg)};
border: 1px solid ${colors.border.default}; border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
} }
.tooltip.visible { .tooltip.visible {
@@ -164,7 +163,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
font-weight: 600; font-weight: 600;
display: block; display: block;
margin-bottom: ${unsafeCSS(spacing.xs)}; margin-bottom: ${unsafeCSS(spacing.xs)};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; color: ${cssManager.bdTheme('#fafafa', '#18181b')};
} }
.tooltip div { .tooltip div {
@@ -217,6 +216,26 @@ export class UplStatuspageStatusdetails extends DeesElement {
border-radius: ${unsafeCSS(borderRadius.sm)}; border-radius: ${unsafeCSS(borderRadius.sm)};
} }
.legend-color.operational {
background: ${colors.status.operational};
}
.legend-color.degraded {
background: ${colors.status.degraded};
}
.legend-color.partial_outage {
background: ${colors.status.partial};
}
.legend-color.major_outage {
background: ${colors.status.major};
}
.legend-color.maintenance {
background: ${colors.status.maintenance};
}
@media (max-width: 640px) { @media (max-width: 640px) {
.container { .container {
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)}; padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
@@ -239,14 +258,13 @@ export class UplStatuspageStatusdetails extends DeesElement {
]; ];
public render(): TemplateResult { public render(): TemplateResult {
const now = Date.now();
const currentHour = new Date().getHours();
const timeIndicatorPosition = this.calculateTimeIndicatorPosition(); const timeIndicatorPosition = this.calculateTimeIndicatorPosition();
return html` return html`
<uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading> <div class="container">
<div class="mainbox"> <uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
${this.loading ? html` <div class="mainbox">
${this.loading ? html`
<div class="loading-skeleton"> <div class="loading-skeleton">
${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)} ${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
</div> </div>
@@ -263,32 +281,33 @@ export class UplStatuspageStatusdetails extends DeesElement {
<span>Now</span> <span>Now</span>
</div> </div>
`} `}
</div>
${!this.loading ? html`
<div class="status-legend">
<div class="legend-item">
<div class="legend-color" style="background: #2deb51"></div>
<span>Operational</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #FF9800"></div>
<span>Degraded</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #FF6F00"></div>
<span>Partial Outage</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #F44336"></div>
<span>Major Outage</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #2196F3"></div>
<span>Maintenance</span>
</div>
</div> </div>
` : ''} ${!this.loading ? html`
<div class="tooltip" id="tooltip"></div> <div class="status-legend">
<div class="legend-item">
<div class="legend-color operational"></div>
<span>Operational</span>
</div>
<div class="legend-item">
<div class="legend-color degraded"></div>
<span>Degraded</span>
</div>
<div class="legend-item">
<div class="legend-color partial_outage"></div>
<span>Partial Outage</span>
</div>
<div class="legend-item">
<div class="legend-color major_outage"></div>
<span>Major Outage</span>
</div>
<div class="legend-item">
<div class="legend-color maintenance"></div>
<span>Maintenance</span>
</div>
</div>
` : ''}
<div class="tooltip" id="tooltip"></div>
</div>
`; `;
} }

10
ts_web/styles/shared.styles.ts
View File

@@ -29,11 +29,11 @@ export const colors = {
// Status colors // Status colors
status: { status: {
operational: cssManager.bdTheme('#10b981', '#064e3b'), operational: cssManager.bdTheme('#047857', '#10b981'),
degraded: cssManager.bdTheme('#f59e0b', '#78350f'), degraded: cssManager.bdTheme('#b45309', '#fbbf24'),
partial: cssManager.bdTheme('#ef4444', '#7f1d1d'), partial: cssManager.bdTheme('#b91c1c', '#f87171'),
major: cssManager.bdTheme('#dc2626', '#450a0a'), major: cssManager.bdTheme('#7f1d1d', '#ef4444'),
maintenance: cssManager.bdTheme('#3b82f6', '#1e3a8a') maintenance: cssManager.bdTheme('#1e40af', '#60a5fa')
} }
}; };