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/downloads_list.html
+33 -24
View File
@@ -1,52 +1,61 @@
{% if tasks %}
<div class="downloads-grid">
<div class="flex flex-col gap-3">
{% for task in tasks %}
<div class="download-item status-{{ task.status }}">
<div class="download-info">
<span class="download-name" title="{{ task.filename }}">{{ task.filename }}</span>
<span class="badge badge-{{ task.status }}">{{ task.status | upper }}</span>
<div class="card bg-base-200 border border-base-300 p-4">
<!-- Top row: filename + status badge -->
<div class="flex justify-between items-center mb-3">
<span class="font-medium truncate mr-2" title="{{ task.filename }}">{{ task.filename }}</span>
<span class="badge
{% if task.status == 'downloading' %}badge-info
{% elif task.status == 'completed' %}badge-success
{% elif task.status == 'failed' %}badge-error
{% elif task.status == 'paused' %}badge-warning
{% else %}badge-ghost{% endif %}">
{{ task.status | upper }}
</span>
</div>
<div class="progress-container">
<div class="progress-bar" style="width: {{ task.progress }}%"></div>
</div>
<div class="download-meta">
<!-- Progress bar -->
<progress class="progress progress-primary w-full mb-3" value="{{ task.progress }}" max="100"></progress>
<!-- Meta row: speed, percentage, ETA -->
<div class="flex gap-4 text-xs text-base-content/50 mb-3">
<span>{{ task.progress | round(1) }}%</span>
<span>{{ task.speed or '0' }} KB/s</span>
<span>{{ task.eta or '' }}</span>
</div>
<div class="download-actions">
<!-- Action buttons -->
<div class="flex gap-1 justify-end">
{% if task.status == 'downloading' or task.status == 'pending' %}
<button class="btn-icon" hx-post="/api/downloads/{{ task.id }}/pause" hx-swap="none"
<button class="btn btn-circle btn-sm btn-ghost" hx-post="/api/downloads/{{ task.id }}/pause" hx-swap="none"
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Pause">
<i class="fas fa-pause"></i>
</button>
{% elif task.status == 'paused' %}
<button class="btn-icon success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none"
<button class="btn btn-circle btn-sm btn-success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none"
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Reprendre">
<i class="fas fa-play"></i>
</button>
{% endif %}
{% if task.status == 'failed' or task.status == 'cancelled' %}
<button class="btn-icon warning" hx-post="/api/downloads/{{ task.id }}/retry" hx-swap="none"
<button class="btn btn-circle btn-sm btn-warning" hx-post="/api/downloads/{{ task.id }}/retry" hx-swap="none"
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Relancer">
<i class="fas fa-redo"></i>
</button>
{% endif %}
{% if task.status == 'completed' %}
<a href="/api/downloads/video/{{ task.id }}" class="btn-icon success" title="Streamer">
<a href="/api/downloads/video/{{ task.id }}" class="btn btn-circle btn-sm btn-success" title="Streamer">
<i class="fas fa-play-circle"></i>
</a>
<a href="/downloads/{{ task.filename }}" class="btn-icon" download title="Telecharger">
<a href="/downloads/{{ task.filename }}" class="btn btn-circle btn-sm btn-ghost" download title="Telecharger">
<i class="fas fa-file-download"></i>
</a>
{% endif %}
<button class="btn-icon danger"
<button class="btn btn-circle btn-sm btn-error"
hx-delete="/api/downloads/{{ task.id }}"
hx-confirm="Supprimer ce telechargement ?"
hx-swap="none"
@@ -59,8 +68,8 @@
{% endfor %}
</div>
{% else %}
<div class="empty-state" style="text-align: center; padding: 60px 20px; color: var(--text-dim);">
<i class="fas fa-cloud-download-alt" style="font-size: 3rem; margin-bottom: 20px; opacity: 0.1; display: block;"></i>
<div class="text-center py-16 text-base-content/30">
<i class="fas fa-cloud-download-alt text-5xl mb-5 block"></i>
<p>Aucun telechargement en cours</p>
</div>
{% endif %}