Roman/ohm_streaming
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: complete UI redesign with DaisyUI + Tailwind CSS v4

Browse Source 
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:
root
2026-04-11 19:46:52 +00:00
parent 87f245d3fc
commit 4101d98a41
28 changed files with 2534 additions and 2808 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/components/home_section.html
+36 -23
View File
@@ -1,36 +1,49 @@
<div id="tab-home" class="tab-content" x-show="activeTab === 'home'">
<!-- Home Tab -->
<div id="tab-home" x-show="activeTab === 'home'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
<div class="section-container">
<div class="section-header">
<h2><i class="fa-solid fa-bullseye"></i> Recommandé pour vous</h2>
<button class="btn btn-secondary btn-small"
hx-get="/api/recommendations"
<!-- Recommendations Section -->
<div class="mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold">
<i class="fa-solid fa-bullseye text-primary"></i> Recommandé pour vous
</h2>
<button class="btn btn-sm btn-ghost gap-1.5"
hx-get="/api/recommendations"
hx-target="#recommendationsList">
<i class="fas fa-sync-alt"></i> Actualiser
<i class="fa-solid fa-arrows-rotate text-xs"></i> Actualiser
</button>
</div>
<div id="recommendationsList"
hx-get="/api/recommendations"
hx-trigger="load delay:100ms"
class="home-row">
<div class="loading-placeholder"><div class="spinner"></div></div>
<div id="recommendationsList"
hx-get="/api/recommendations"
hx-trigger="load delay:100ms">
<div class="flex gap-4 overflow-x-auto pb-4">
<div class="flex items-center justify-center py-8 w-full">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="section-header">
<h2><i class="fa-solid fa-fire"></i> Dernières sorties</h2>
<button class="btn btn-secondary btn-small"
hx-get="/api/releases/latest"
<!-- Latest Releases Section -->
<div>
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold">
<i class="fa-solid fa-fire text-error"></i> Dernières sorties
</h2>
<button class="btn btn-sm btn-ghost gap-1.5"
hx-get="/api/releases/latest"
hx-target="#releasesList">
<i class="fas fa-sync-alt"></i> Actualiser
<i class="fa-solid fa-arrows-rotate text-xs"></i> Actualiser
</button>
</div>
<div id="releasesList"
hx-get="/api/releases/latest"
hx-trigger="load delay:300ms"
class="home-row">
<div class="loading-placeholder"><div class="spinner"></div></div>
<div id="releasesList"
hx-get="/api/releases/latest"
hx-trigger="load delay:300ms">
<div class="flex gap-4 overflow-x-auto pb-4">
<div class="flex items-center justify-center py-8 w-full">
<span class="loading loading-spinner loading-lg text-primary"></span>
</div>
</div>
</div>
</div>
</div>