sneakygeek/SneakyScan
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI design system and fix notification positioning

Browse Source 
- Overhaul CSS with comprehensive design tokens (shadows, transitions, radii)
- Add hover effects and smooth transitions to cards, buttons, tables
- Improve typography hierarchy and color consistency
- Remove inline styles from 10 template files for better maintainability
- Add global notification container to ensure toasts appear above modals
- Update showNotification/showAlert functions to use centralized container
- Add accessibility improvements (focus states, reduced motion support)
- Improve responsive design and mobile styling
- Add print styles
This commit is contained in:
Phillip Tarrant
2025-11-19 21:45:36 -06:00
parent fdf689316f
commit 0fc51eb032
13 changed files with 1004 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/web/templates/scans.html
View File

@@ -5,7 +5,7 @@
{% block content %}
<div class="row mt-4">
<div class="col-12 d-flex justify-content-between align-items-center mb-4">
<h1 style="color: #60a5fa;">All Scans</h1>
<h1>All Scans</h1>
<button class="btn btn-primary" onclick="showTriggerScanModal()">
<span id="trigger-btn-text">Trigger New Scan</span>
<span id="trigger-btn-spinner" class="spinner-border spinner-border-sm ms-2" style="display: none;"></span>
@@ -54,7 +54,7 @@
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="mb-0" style="color: #60a5fa;">Scan History</h5>
<h5 class="mb-0">Scan History</h5>
</div>
<div class="card-body">
<div id="scans-loading" class="text-center py-5">
@@ -105,9 +105,9 @@
<!-- Trigger Scan Modal -->
<div class="modal fade" id="triggerScanModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content" style="background-color: #1e293b; border: 1px solid #334155;">
<div class="modal-header" style="border-bottom: 1px solid #334155;">
<h5 class="modal-title" style="color: #60a5fa;">Trigger New Scan</h5>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Trigger New Scan</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
@@ -132,7 +132,7 @@
<div id="trigger-error" class="alert alert-danger" style="display: none;"></div>
</form>
</div>
<div class="modal-footer" style="border-top: 1px solid #334155;">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="trigger-scan-btn" onclick="triggerScan()">
<span id="modal-trigger-text">Trigger Scan</span>
@@ -510,24 +510,5 @@
}
}
// Custom pagination styles
const style = document.createElement('style');
style.textContent = `
.pagination {
--bs-pagination-bg: #1e293b;
--bs-pagination-border-color: #334155;
--bs-pagination-hover-bg: #334155;
--bs-pagination-hover-border-color: #475569;
--bs-pagination-focus-bg: #334155;
--bs-pagination-active-bg: #3b82f6;
--bs-pagination-active-border-color: #3b82f6;
--bs-pagination-disabled-bg: #0f172a;
--bs-pagination-disabled-border-color: #334155;
--bs-pagination-color: #e2e8f0;
--bs-pagination-hover-color: #e2e8f0;
--bs-pagination-disabled-color: #64748b;
}
`;
document.head.appendChild(style);
</script>
{% endblock %}