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

feat(elements): add upladmin-option-card component and migrate option/status UIs to use it; refactor monitor form multitoggle subscriptions and event handling; improve theme color handling and dark-mode styles; add demos, Playwright snapshots, and migration plan

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-26 18:04:55 +00:00
parent e667370079
commit 6a7c69bad1
16 changed files with 869 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
.nogit/theme-test.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>Theme Test</title>
<script type="module" src="../dist_bundle/bundle.js"></script>
<style>
body {
margin: 0;
padding: 24px;
font-family: system-ui, sans-serif;
}
.section {
margin-bottom: 32px;
}
.title {
font-size: 16px;
font-weight: 600;
margin-bottom: 16px;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
#theme-toggle {
position: fixed;
top: 16px;
right: 16px;
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="theme-toggle">Toggle Theme</button>
<div class="section">
<div class="title">Severity Variants</div>
<div class="grid">
<upladmin-option-card variant="critical" icon="lucide:AlertCircle" label="Critical" description="Severe impact"></upladmin-option-card>
<upladmin-option-card variant="major" icon="lucide:AlertTriangle" label="Major" description="Significant impact"></upladmin-option-card>
<upladmin-option-card variant="minor" icon="lucide:Info" label="Minor" description="Limited impact"></upladmin-option-card>
<upladmin-option-card variant="maintenance" icon="lucide:Wrench" label="Maintenance" description="Scheduled work" selected></upladmin-option-card>
</div>
</div>
<div class="section">
<div class="title">Status Variants</div>
<div class="grid">
<upladmin-option-card variant="investigating" icon="lucide:Search" label="Investigating" description="Looking into it"></upladmin-option-card>
<upladmin-option-card variant="identified" icon="lucide:Target" label="Identified" description="Root cause found"></upladmin-option-card>
<upladmin-option-card variant="monitoring" icon="lucide:Eye" label="Monitoring" description="Fix applied" selected></upladmin-option-card>
<upladmin-option-card variant="resolved" icon="lucide:CheckCircle" label="Resolved" description="Issue fixed"></upladmin-option-card>
<upladmin-option-card variant="postmortem" icon="lucide:FileText" label="Postmortem" description="Analysis complete"></upladmin-option-card>
</div>
</div>
<script>
document.getElementById('theme-toggle').addEventListener('click', () => {
const isDark = document.documentElement.style.colorScheme === 'dark';
document.documentElement.style.colorScheme = isDark ? 'light' : 'dark';
document.body.style.background = isDark ? '#ffffff' : '#09090b';
document.body.style.color = isDark ? '#09090b' : '#fafafa';
});
</script>
</body>
</html>