feat(statuspage): refactor shared styles and modernize components for consistent theming, spacing and APIs
This commit is contained in:
175
test-shadcn-spacing.html
Normal file
175
test-shadcn-spacing.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>shadcn-Aligned Spacing Test</title>
|
||||
<script type="module" src="./dist_bundle/bundle.js"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #fafafa;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #09090b;
|
||||
}
|
||||
}
|
||||
.demo-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px; /* Using consistent spacing between components */
|
||||
}
|
||||
.spacing-info {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
font-size: 13px;
|
||||
max-width: 300px;
|
||||
z-index: 1000;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.spacing-info {
|
||||
background: rgba(18, 18, 18, 0.9);
|
||||
border-color: #27272a;
|
||||
}
|
||||
}
|
||||
.spacing-info h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.spacing-info ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.spacing-info code {
|
||||
background: #f3f4f6;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.spacing-info code {
|
||||
background: #27272a;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-wrapper">
|
||||
<upl-statuspage-header
|
||||
page-title="CloudFlow"
|
||||
show-report-button="true"
|
||||
show-subscribe-button="true"
|
||||
></upl-statuspage-header>
|
||||
|
||||
<upl-statuspage-pagetitle
|
||||
page-title="Service Status"
|
||||
page-subtitle="Current operational status of CloudFlow Infrastructure services"
|
||||
></upl-statuspage-pagetitle>
|
||||
|
||||
<upl-statuspage-statusbar id="statusbar"></upl-statuspage-statusbar>
|
||||
|
||||
<upl-statuspage-statsgrid
|
||||
current-status="operational"
|
||||
uptime="99.95"
|
||||
avg-response-time="125"
|
||||
total-incidents="2"
|
||||
></upl-statuspage-statsgrid>
|
||||
|
||||
<upl-statuspage-assetsselector id="assets"></upl-statuspage-assetsselector>
|
||||
|
||||
<upl-statuspage-statusdetails id="details"></upl-statuspage-statusdetails>
|
||||
|
||||
<upl-statuspage-statusmonth id="month"></upl-statuspage-statusmonth>
|
||||
|
||||
<upl-statuspage-incidents id="incidents"></upl-statuspage-incidents>
|
||||
|
||||
<upl-statuspage-footer
|
||||
company-name="CloudFlow Infrastructure"
|
||||
enable-subscribe="true"
|
||||
subscriber-count="1234"
|
||||
></upl-statuspage-footer>
|
||||
</div>
|
||||
|
||||
<div class="spacing-info">
|
||||
<h3>shadcn Spacing Improvements</h3>
|
||||
<ul>
|
||||
<li>Page title padding reduced from <code>48px</code> to <code>24px</code></li>
|
||||
<li>Mini-heading padding reduced from <code>16px</code> to <code>8px</code></li>
|
||||
<li>All arbitrary values replaced with spacing scale</li>
|
||||
<li>Consistent <code>24px</code> gap between components</li>
|
||||
<li>More compact, professional layout</li>
|
||||
<li>Follows shadcn's minimal spacing approach</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const statusbar = document.getElementById('statusbar');
|
||||
const assets = document.getElementById('assets');
|
||||
const details = document.getElementById('details');
|
||||
const month = document.getElementById('month');
|
||||
const incidents = document.getElementById('incidents');
|
||||
|
||||
// Configure status bar
|
||||
statusbar.overallStatus = {
|
||||
status: 'operational',
|
||||
message: 'All systems operational',
|
||||
lastUpdated: Date.now()
|
||||
};
|
||||
|
||||
// Configure services
|
||||
const services = [
|
||||
{
|
||||
id: 'api',
|
||||
name: 'API Gateway',
|
||||
displayName: 'API Gateway',
|
||||
currentStatus: 'operational',
|
||||
uptime30d: 99.99,
|
||||
category: 'Core Services',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 'database',
|
||||
name: 'Database Cluster',
|
||||
displayName: 'Database Cluster',
|
||||
currentStatus: 'operational',
|
||||
uptime30d: 99.95,
|
||||
category: 'Core Services',
|
||||
selected: true
|
||||
}
|
||||
];
|
||||
|
||||
assets.services = services;
|
||||
details.services = services;
|
||||
|
||||
// Configure monthly data
|
||||
month.monthlyData = [{
|
||||
month: '2024-01',
|
||||
days: Array(31).fill(null).map((_, i) => ({
|
||||
date: `2024-01-${String(i + 1).padStart(2, '0')}`,
|
||||
uptime: 100,
|
||||
incidents: 0
|
||||
})),
|
||||
overallUptime: 100,
|
||||
totalIncidents: 0
|
||||
}];
|
||||
|
||||
// Configure incidents
|
||||
incidents.currentIncidents = [];
|
||||
incidents.pastIncidents = [];
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user