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

349
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, colors } from '../styles/shared.styles.js';
import * as sharedStyles from '../styles/shared.styles.js';
import { demoFunc } from './upl-statuspage-statusbar.demo.js';
declare global {
@@ -15,7 +15,7 @@ export class UplStatuspageStatusbar extends DeesElement {
public static demo = demoFunc;
@property({ type: Object })
public overallStatus: IOverallStatus = {
accessor overallStatus: IOverallStatus = {
status: 'operational',
message: 'All Systems Operational',
lastUpdated: Date.now(),
@@ -24,10 +24,10 @@ export class UplStatuspageStatusbar extends DeesElement {
};
@property({ type: Boolean })
public loading: boolean = false;
accessor loading: boolean = false;
@property({ type: Boolean })
public expandable: boolean = true;
accessor expandable: boolean = true;
constructor() {
super();
@@ -37,149 +37,236 @@ export class UplStatuspageStatusbar extends DeesElement {
cssManager.defaultStyles,
css`
:host {
padding: 0;
display: block;
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
}
padding: 0;
display: block;
background: transparent;
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
}
.statusbar-container {
margin: auto;
max-width: 1200px;
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
position: relative;
}
.statusbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 64px;
padding: ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.lg)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
cursor: default;
transition: all ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
position: relative;
overflow: hidden;
font-weight: 500;
font-size: 15px;
letter-spacing: -0.01em;
background: ${sharedStyles.colors.background.card};
border: 1px solid ${sharedStyles.colors.border.default};
box-shadow: ${unsafeCSS(sharedStyles.shadows.sm)};
}
.statusbar-inner::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
transition: background ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
}
.statusbar-inner.operational::before {
background: ${sharedStyles.colors.status.operational};
}
.statusbar-inner.degraded::before {
background: ${sharedStyles.colors.status.degraded};
}
.statusbar-inner.partial_outage::before {
background: ${sharedStyles.colors.status.partial};
}
.statusbar-inner.major_outage::before {
background: ${sharedStyles.colors.status.major};
}
.statusbar-inner.maintenance::before {
background: ${sharedStyles.colors.status.maintenance};
}
.statusbar-inner:hover {
border-color: ${sharedStyles.colors.border.muted};
box-shadow: ${unsafeCSS(sharedStyles.shadows.base)};
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.status-indicator::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
opacity: 0.2;
}
.statusbar-inner.operational .status-indicator {
background: ${sharedStyles.colors.status.operational};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(22, 163, 74, 0.15)', 'rgba(34, 197, 94, 0.2)')};
}
.statusbar-inner.operational .status-indicator::after {
background: ${sharedStyles.colors.status.operational};
animation: pulse-ring 2s ease-out infinite;
}
.statusbar-inner.degraded .status-indicator {
background: ${sharedStyles.colors.status.degraded};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(217, 119, 6, 0.15)', 'rgba(251, 191, 36, 0.2)')};
}
.statusbar-inner.partial_outage .status-indicator {
background: ${sharedStyles.colors.status.partial};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(220, 38, 38, 0.15)', 'rgba(248, 113, 113, 0.2)')};
}
.statusbar-inner.major_outage .status-indicator {
background: ${sharedStyles.colors.status.major};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(185, 28, 28, 0.15)', 'rgba(239, 68, 68, 0.2)')};
animation: pulse-indicator 1s ease-in-out infinite;
}
.statusbar-inner.maintenance .status-indicator {
background: ${sharedStyles.colors.status.maintenance};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(37, 99, 235, 0.15)', 'rgba(96, 165, 250, 0.2)')};
}
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1); opacity: 0; }
}
@keyframes pulse-indicator {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.status-content {
display: flex;
align-items: center;
gap: ${unsafeCSS(sharedStyles.spacing.md)};
flex: 1;
padding-left: ${unsafeCSS(sharedStyles.spacing.sm)};
}
.status-main {
display: flex;
align-items: center;
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
color: ${sharedStyles.colors.text.primary};
}
.status-message {
font-weight: 600;
}
.status-details {
font-size: 13px;
font-weight: 400;
color: ${sharedStyles.colors.text.secondary};
}
.loading-skeleton {
background: ${sharedStyles.colors.background.card};
border: 1px solid ${sharedStyles.colors.border.default};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
height: 64px;
position: relative;
overflow: hidden;
}
.loading-skeleton::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: ${cssManager.bdTheme(
'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.04) 50%, transparent 100%)',
'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%)'
)};
animation: loading 1.5s ${unsafeCSS(sharedStyles.easings.default)} infinite;
}
@keyframes loading {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
.last-updated {
font-size: 12px;
color: ${sharedStyles.colors.text.muted};
white-space: nowrap;
padding: 4px 10px;
background: ${sharedStyles.colors.background.muted};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
}
.statusbar-inner:hover .last-updated {
background: ${cssManager.bdTheme('#e4e4e7', '#3f3f46')};
}
@media (max-width: 768px) {
.statusbar-container {
margin: auto;
max-width: 1200px;
padding: 24px 24px;
position: relative;
padding: ${unsafeCSS(sharedStyles.spacing.md)};
}
.statusbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 56px;
padding: 16px 20px;
border-radius: 6px;
cursor: ${cssManager.bdTheme('default', 'default')};
transition: all 0.2s ease;
position: relative;
overflow: hidden;
font-weight: 500;
font-size: 14px;
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
flex-direction: column;
align-items: flex-start;
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
min-height: auto;
padding: ${unsafeCSS(sharedStyles.spacing.md)};
}
.statusbar-inner:hover {
background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
.status-main {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.last-updated {
align-self: flex-start;
}
}
@media (max-width: 640px) {
.statusbar-inner {
font-size: 14px;
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.statusbar-inner.operational .status-indicator {
background: ${colors.status.operational};
}
.statusbar-inner.degraded .status-indicator {
background: ${colors.status.degraded};
}
.statusbar-inner.partial_outage .status-indicator {
background: ${colors.status.partial};
}
.statusbar-inner.major_outage .status-indicator {
background: ${colors.status.major};
}
.statusbar-inner.maintenance .status-indicator {
background: ${colors.status.maintenance};
}
.status-content {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.status-main {
display: flex;
align-items: center;
gap: 12px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
}
.status-details {
font-size: 13px;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
}
.loading-skeleton {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px;
height: 56px;
position: relative;
overflow: hidden;
}
.loading-skeleton::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: ${cssManager.bdTheme(
'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%)',
'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)'
)};
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.last-updated {
font-size: 12px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
white-space: nowrap;
}
@media (max-width: 640px) {
.statusbar-container {
padding: 16px 16px;
}
.statusbar-inner {
font-size: 13px;
padding: 12px 16px;
min-height: 48px;
}
.status-content {
gap: 10px;
}
.status-indicator {
width: 6px;
height: 6px;
}
.last-updated {
font-size: 11px;
}
font-size: 11px;
}
}
`,
]