forked from Rockachopa/Timmy-time-dashboard
polish: extract inline CSS, add connection status, panel macro, favicon, ollama cache, toast system (#164)
Major:
- Extract all inline <style> blocks from 22 Jinja2 templates into
static/css/mission-control.css — single cacheable stylesheet
- Add tox lint check that fails on inline <style> in templates
Minor:
1. Connection status indicator in topbar (green/amber/red dot) reflecting
WebSocket + Ollama reachability, with auto-reconnect
2. Jinja2 {% macro panel(title) %} in macros.html — eliminates repeated
.card.mc-panel markup; index.html converted as example
3. SVG favicon (purple T + orange dot)
4. 30-second TTL cache on _check_ollama() to avoid blocking the event loop
on every health poll (asyncio.to_thread was already in place)
5. Toast notification system (McToast.show) for transient status messages —
wired into connection status for Ollama/WebSocket state changes
Enforcement:
- CLAUDE.md updated with conventions 11-14 (no inline CSS, use panel macro,
use toasts, never block the event loop)
- tox lint + pre-push environments now fail on inline <style> blocks
https://claude.ai/code/session_014FQ785MQdyJQ4BAXrRSo9w
Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
committed by
GitHub
parent
07f2c1b41e
commit
622a6a9204
@@ -2,6 +2,8 @@
|
||||
|
||||
{% block title %}Hands — Timmy Time{% endblock %}
|
||||
|
||||
{% block extra_styles %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
<!-- Header -->
|
||||
@@ -87,48 +89,4 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hand-card {
|
||||
transition: all 0.2s ease;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.hand-card:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.hand-card.running {
|
||||
border-left-color: #0dcaf0;
|
||||
}
|
||||
|
||||
.hand-card.scheduled {
|
||||
border-left-color: #198754;
|
||||
}
|
||||
|
||||
.hand-card.paused {
|
||||
border-left-color: #ffc107;
|
||||
}
|
||||
|
||||
.hand-card.error {
|
||||
border-left-color: #dc3545;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.status-dot.running { background-color: #0dcaf0; animation: pulse 1.5s infinite; }
|
||||
.status-dot.scheduled { background-color: #198754; }
|
||||
.status-dot.paused { background-color: #ffc107; }
|
||||
.status-dot.error { background-color: #dc3545; }
|
||||
.status-dot.idle { background-color: #6c757d; }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user