Files
ohm_streaming/templates/components/series_card.html
T
root 4101d98a41 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)
2026-04-11 19:46:52 +00:00

23 lines
1.6 KiB
HTML

{% macro series_card(series) %}
<div class="card card-compact bg-base-200 shadow-lg hover:shadow-xl transition-all cursor-pointer w-40 shrink-0 group"
@click="activeTab = 'series'; window.dispatchEvent(new CustomEvent('set-tab', { detail: { tab: 'series' } })); $nextTick(() => { const input = document.getElementById('seriesSearchInput'); if (input) { input.value = '{{ series.title | e }}'; htmx.trigger(input, 'keyup'); } });">
<figure class="relative overflow-hidden rounded-t-lg aspect-[2/3]">
<img src="{{ series.cover_image or 'https://placehold.co/400x600/202327/FF9F1C?text=No+Image' }}" alt="{{ series.title }}" loading="lazy" referrerpolicy="no-referrer"
class="w-full h-full object-cover"
onerror="this.src='https://placehold.co/400x600/202327/FF9F1C?text=Error'; this.onerror=null;">
{% if series.lang %}
<span class="badge badge-secondary badge-sm absolute top-2 left-2" style="text-transform: uppercase;">{{ series.lang }}</span>
{% endif %}
<div class="absolute inset-0 bg-secondary/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<div class="btn btn-circle btn-sm bg-secondary/80 border-secondary text-secondary-content">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</figure>
<div class="card-body p-3">
<span class="badge badge-outline badge-xs">{{ series.provider_id or 'FS7' }}</span>
<p class="text-xs font-semibold truncate mt-1">{{ series.title }}</p>
</div>
</div>
{% endmacro %}