update
This commit is contained in:
@@ -53,160 +53,144 @@ export class UplStatuspageStatusbar extends DeesElement {
|
||||
.statusbar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 64px;
|
||||
padding: 16px 24px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
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: 16px;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
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')};
|
||||
}
|
||||
|
||||
.statusbar-inner:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
|
||||
}
|
||||
|
||||
.statusbar-inner:active {
|
||||
transform: translateY(0);
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statusbar-inner.operational {
|
||||
.statusbar-inner.operational .status-indicator {
|
||||
background: ${colors.status.operational};
|
||||
border-color: ${colors.status.operational};
|
||||
color: white;
|
||||
}
|
||||
|
||||
.statusbar-inner.degraded {
|
||||
.statusbar-inner.degraded .status-indicator {
|
||||
background: ${colors.status.degraded};
|
||||
border-color: ${colors.status.degraded};
|
||||
color: white;
|
||||
}
|
||||
|
||||
.statusbar-inner.partial_outage {
|
||||
.statusbar-inner.partial_outage .status-indicator {
|
||||
background: ${colors.status.partial};
|
||||
border-color: ${colors.status.partial};
|
||||
color: white;
|
||||
}
|
||||
|
||||
.statusbar-inner.major_outage {
|
||||
.statusbar-inner.major_outage .status-indicator {
|
||||
background: ${colors.status.major};
|
||||
border-color: ${colors.status.major};
|
||||
color: white;
|
||||
}
|
||||
|
||||
.statusbar-inner.maintenance {
|
||||
.statusbar-inner.maintenance .status-indicator {
|
||||
background: ${colors.status.maintenance};
|
||||
border-color: ${colors.status.maintenance};
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 14px;
|
||||
.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, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)',
|
||||
'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)'
|
||||
'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%)'
|
||||
)};
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
|
||||
.status-details {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.statusbar-inner {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
padding: 12px 16px;
|
||||
min-height: 56px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 12px;
|
||||
.status-content {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
const getStatusIcon = () => {
|
||||
switch (this.overallStatus.status) {
|
||||
case 'operational':
|
||||
return '✓';
|
||||
case 'degraded':
|
||||
return '!';
|
||||
case 'partial_outage':
|
||||
return '⚠';
|
||||
case 'major_outage':
|
||||
return '✕';
|
||||
case 'maintenance':
|
||||
return '🔧';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const formatLastUpdated = () => {
|
||||
const date = new Date(this.overallStatus.lastUpdated);
|
||||
return date.toLocaleString();
|
||||
};
|
||||
const now = new Date();
|
||||
const diff = now.getTime() - date.getTime();
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
|
||||
const handleClick = () => {
|
||||
if (this.expandable) {
|
||||
this.dispatchEvent(new CustomEvent('statusClick', {
|
||||
detail: { status: this.overallStatus },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
if (minutes < 1) return 'Just now';
|
||||
if (minutes < 60) return `${minutes}m ago`;
|
||||
const hours = Math.floor(minutes / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
return html`
|
||||
@@ -214,21 +198,21 @@ export class UplStatuspageStatusbar extends DeesElement {
|
||||
${this.loading ? html`
|
||||
<div class="loading-skeleton"></div>
|
||||
` : html`
|
||||
<div class="statusbar-inner ${this.overallStatus.status}" @click=${handleClick}>
|
||||
<div class="statusbar-inner ${this.overallStatus.status}">
|
||||
<div class="status-content">
|
||||
<div class="status-indicator"></div>
|
||||
<div class="status-main">
|
||||
<span class="status-icon">${getStatusIcon()}</span>
|
||||
<span>${this.overallStatus.message}</span>
|
||||
</div>
|
||||
${this.overallStatus.affectedServices > 0 ? html`
|
||||
<div class="status-details">
|
||||
${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
|
||||
</div>
|
||||
<span class="status-details">
|
||||
· ${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="last-updated">
|
||||
Last updated: ${formatLastUpdated()}
|
||||
${formatLastUpdated()}
|
||||
</div>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user