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 * 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';
declare global {
@@ -46,10 +46,9 @@ export class UplStatuspageHeader extends DeesElement {
css`
:host {
display: block;
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#262626')};
}
.mainbox {
@@ -66,10 +65,11 @@ export class UplStatuspageHeader extends DeesElement {
}
.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-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;
border-radius: 6px;
cursor: pointer;
@@ -80,12 +80,14 @@ export class UplStatuspageHeader extends DeesElement {
justify-content: center;
min-height: 36px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
box-shadow: ${unsafeCSS(shadows.sm)};
}
.mainbox .actions .actionButton:hover {
background: ${cssManager.bdTheme('#f9fafb', '#262626')};
border-color: ${cssManager.bdTheme('#d1d5db', '#404040')};
background: ${cssManager.bdTheme('rgba(255, 255, 255, 0.95)', 'rgba(0, 0, 0, 0.8)')};
border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')};
transform: translateY(-1px);
box-shadow: ${unsafeCSS(shadows.md)};
}
.mainbox .actions .actionButton:active {
@@ -93,7 +95,7 @@ export class UplStatuspageHeader extends DeesElement {
}
.header-content {
padding: 48px 0 64px 0;
padding: 64px 0 48px 0;
text-align: center;
}
@@ -144,12 +146,14 @@ export class UplStatuspageHeader extends DeesElement {
.actionButton.primary {
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
border-color: transparent;
backdrop-filter: none;
}
.actionButton.primary:hover {
background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
background: ${cssManager.bdTheme('#262626', '#e5e7eb')};
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 * as domtools from '@design.estate/dees-domtools';
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';
declare global {
@@ -77,32 +77,32 @@ export class UplStatuspageStatusbar extends DeesElement {
}
.statusbar-inner.operational {
background: ${cssManager.bdTheme('#10b981', '#064e3b')};
border-color: ${cssManager.bdTheme('#10b981', '#064e3b')};
background: ${colors.status.operational};
border-color: ${colors.status.operational};
color: white;
}
.statusbar-inner.degraded {
background: ${cssManager.bdTheme('#f59e0b', '#78350f')};
border-color: ${cssManager.bdTheme('#f59e0b', '#78350f')};
background: ${colors.status.degraded};
border-color: ${colors.status.degraded};
color: white;
}
.statusbar-inner.partial_outage {
background: ${cssManager.bdTheme('#ef4444', '#7f1d1d')};
border-color: ${cssManager.bdTheme('#ef4444', '#7f1d1d')};
background: ${colors.status.partial};
border-color: ${colors.status.partial};
color: white;
}
.statusbar-inner.major_outage {
background: ${cssManager.bdTheme('#dc2626', '#450a0a')};
border-color: ${cssManager.bdTheme('#dc2626', '#450a0a')};
background: ${colors.status.major};
border-color: ${colors.status.major};
color: white;
}
.statusbar-inner.maintenance {
background: ${cssManager.bdTheme('#3b82f6', '#1e3a8a')};
border-color: ${cssManager.bdTheme('#3b82f6', '#1e3a8a')};
background: ${colors.status.maintenance};
border-color: ${colors.status.maintenance};
color: white;
}

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

@@ -75,7 +75,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
display: flex;
gap: 2px;
padding: ${unsafeCSS(spacing.sm)};
background: ${colors.background.secondary};
border-radius: ${unsafeCSS(borderRadius.base)};
overflow: hidden;
}
@@ -87,12 +86,11 @@ export class UplStatuspageStatusdetails extends DeesElement {
cursor: pointer;
transition: all 0.2s ease;
position: relative;
opacity: 0.9;
}
.mainbox .barContainer .bar:hover {
opacity: 1;
transform: scaleY(1.05);
transform: scaleY(1.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.mainbox .barContainer .bar.operational {
@@ -136,14 +134,15 @@ export class UplStatuspageStatusdetails extends DeesElement {
justify-content: space-between;
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0;
font-size: 12px;
color: ${colors.text.secondary};
color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
font-family: ${unsafeCSS(fonts.mono)};
font-weight: 500;
}
.tooltip {
position: absolute;
background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
background: ${cssManager.bdTheme('#18181b', '#ffffff')};
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
border-radius: ${unsafeCSS(borderRadius.base)};
font-size: 13px;
@@ -153,7 +152,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
z-index: 10;
white-space: nowrap;
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 {
@@ -164,7 +163,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
font-weight: 600;
display: block;
margin-bottom: ${unsafeCSS(spacing.xs)};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
}
.tooltip div {
@@ -217,6 +216,26 @@ export class UplStatuspageStatusdetails extends DeesElement {
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) {
.container {
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
@@ -239,14 +258,13 @@ export class UplStatuspageStatusdetails extends DeesElement {
];
public render(): TemplateResult {
const now = Date.now();
const currentHour = new Date().getHours();
const timeIndicatorPosition = this.calculateTimeIndicatorPosition();
return html`
<uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
<div class="mainbox">
${this.loading ? html`
<div class="container">
<uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
<div class="mainbox">
${this.loading ? html`
<div class="loading-skeleton">
${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
</div>
@@ -263,32 +281,33 @@ export class UplStatuspageStatusdetails extends DeesElement {
<span>Now</span>
</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 class="tooltip" id="tooltip"></div>
${!this.loading ? html`
<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: {
operational: cssManager.bdTheme('#10b981', '#064e3b'),
degraded: cssManager.bdTheme('#f59e0b', '#78350f'),
partial: cssManager.bdTheme('#ef4444', '#7f1d1d'),
major: cssManager.bdTheme('#dc2626', '#450a0a'),
maintenance: cssManager.bdTheme('#3b82f6', '#1e3a8a')
operational: cssManager.bdTheme('#047857', '#10b981'),
degraded: cssManager.bdTheme('#b45309', '#fbbf24'),
partial: cssManager.bdTheme('#b91c1c', '#f87171'),
major: cssManager.bdTheme('#7f1d1d', '#ef4444'),
maintenance: cssManager.bdTheme('#1e40af', '#60a5fa')
}
};