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

feat(statuspage-ui): improve styling and animations across status page components

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 19:16:17 +00:00
parent 213323073f
commit 183a1d0658
12 changed files with 1462 additions and 467 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,6 +73,12 @@ export class UplStatuspageStatusdetails extends DeesElement {
.graph-container {
position: relative;
animation: fadeIn 0.3s ${unsafeCSS(sharedStyles.easings.default)};
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.mainbox {
@@ -98,14 +104,29 @@ export class UplStatuspageStatusdetails extends DeesElement {
flex: 1;
height: 100%;
cursor: pointer;
transition: all 0.15s ease;
transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
position: relative;
border-radius: 2px;
border-radius: 3px;
animation: barGrow 0.4s ${unsafeCSS(sharedStyles.easings.default)} both;
animation-delay: calc(var(--bar-index, 0) * 8ms);
transform-origin: bottom;
}
@keyframes barGrow {
from {
transform: scaleY(0);
opacity: 0;
}
to {
transform: scaleY(1);
opacity: 1;
}
}
.mainbox .barContainer .bar:hover {
transform: scaleY(1.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transform: scaleY(1.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
z-index: 1;
}
.mainbox .barContainer .bar.operational {
@@ -149,20 +170,23 @@ export class UplStatuspageStatusdetails extends DeesElement {
position: absolute;
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
padding: 6px 10px;
border-radius: 4px;
padding: 8px 12px;
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
font-size: 11px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
transition: opacity ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)},
transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
z-index: 50;
white-space: nowrap;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
line-height: 1.4;
box-shadow: ${unsafeCSS(sharedStyles.shadows.lg)};
line-height: 1.5;
transform: translateY(4px);
}
.tooltip.visible {
opacity: 1;
transform: translateY(0);
}
.tooltip-time {
@@ -274,8 +298,9 @@ export class UplStatuspageStatusdetails extends DeesElement {
const responseTime = dataPoint?.responseTime || 0;
bars.push(html`
<div
<div
class="bar ${status}"
style="--bar-index: ${i}"
@mouseenter=${(e: MouseEvent) => this.showTooltip(e, timestamp, status, responseTime)}
@click=${() => this.handleBarClick(timestamp, status, responseTime)}
></div>