feat: complete UI redesign with DaisyUI + Tailwind CSS v4
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
This commit is contained in:
+12
-8
@@ -104,19 +104,23 @@ function switchTab(tab) {
|
||||
const tabs = document.querySelectorAll('.auth-tab');
|
||||
const forms = document.querySelectorAll('.auth-form');
|
||||
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
forms.forEach(f => f.classList.remove('active'));
|
||||
// Remove active states — DaisyUI uses tab-active on tabs, hidden on forms
|
||||
tabs.forEach(t => t.classList.remove('tab-active'));
|
||||
forms.forEach(f => f.classList.add('hidden'));
|
||||
|
||||
if (tab === 'login') {
|
||||
tabs[0].classList.add('active');
|
||||
document.getElementById('loginForm').classList.add('active');
|
||||
tabs[0].classList.add('tab-active');
|
||||
document.getElementById('loginForm').classList.remove('hidden');
|
||||
} else {
|
||||
tabs[1].classList.add('active');
|
||||
document.getElementById('registerForm').classList.add('active');
|
||||
tabs[1].classList.add('tab-active');
|
||||
document.getElementById('registerForm').classList.remove('hidden');
|
||||
}
|
||||
|
||||
document.getElementById('authError').classList.remove('show');
|
||||
document.getElementById('authSuccess').classList.remove('show');
|
||||
// Hide alerts on tab switch
|
||||
const authError = document.getElementById('authError');
|
||||
const authSuccess = document.getElementById('authSuccess');
|
||||
if (authError) authError.classList.add('hidden');
|
||||
if (authSuccess) authSuccess.classList.add('hidden');
|
||||
}
|
||||
|
||||
window.authUi = {
|
||||
|
||||
Reference in New Issue
Block a user