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

fix: resolve all DaisyUI audit issues

Browse Source 
- settings.js: replace broken CSS vars with getThemeColor() helper
- base.html: add bg-primary text-primary-content active state to drawer
- All templates: btn-small -> btn-sm (DaisyUI standard)
- Delete orphan templates/components/header.html
- auth-utils.js: fix .show class -> use hidden (Tailwind)
- login.html: remove redundant auth-* classes, keep DaisyUI only
- auth-ui.js: update form selector for cleanup
- watchlist.html: fix nav active class styling
- 4 JS files (series-search, tabs, recommendations, anime-details):
  - Replace all old CSS classes with DaisyUI/Tailwind
  - Remove hardcoded colors, use theme-aware classes
  - loading-spinner -> DaisyUI loading component
  - no-results/search-results -> Tailwind utility layout
  - All badges -> DaisyUI badge variants
This commit is contained in:
root
2026-04-11 20:20:26 +00:00
parent 4101d98a41
commit 535005b3d5
12 changed files with 375 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/settings.js
+38 -12
View File
@@ -4,6 +4,16 @@
* the settings section is dynamically loaded via HTMX.
*/
/**
* Read a DaisyUI theme color from computed CSS custom properties.
* Falls back to sensible defaults if the theme variable is not found.
*/
function getThemeColor(varName, fallback) {
const style = getComputedStyle(document.documentElement);
const value = style.getPropertyValue(varName).trim();
return value || fallback;
}
function saveSettings() {
const data = {
default_lang: document.getElementById('default_lang')?.value,
@@ -108,8 +118,14 @@ async function loadAutoWeights() {
const sc = data.series_count;
const total = data.total || 0;
const primary = getThemeColor('--color-primary', '#6366f1');
const secondary = getThemeColor('--color-secondary', '#a3a3a3');
const accent = getThemeColor('--color-accent', '#38bdf8');
const error = getThemeColor('--color-error', '#f43f5e');
const muted = getThemeColor('--color-base-content', '#999');
if (total === 0) {
details.innerHTML = '<span style="color: var(--text-dim);">Aucun telechargement detecte. Ratio par defaut : ' + aw + ' anime / ' + sw + ' serie.</span>';
details.innerHTML = `<span style="color: ${muted}; opacity: 0.6;">Aucun telechargement detecte. Ratio par defaut : ${aw} anime / ${sw} serie.</span>`;
} else {
const pctA = total > 0 ? Math.round(ac / total * 100) : 50;
const pctS = total > 0 ? Math.round(sc / total * 100) : 50;
@@ -117,17 +133,20 @@ async function loadAutoWeights() {
<div style="margin-bottom: 8px;">
<strong>${ac}</strong> anime${ac > 1 ? 's' : ''} (${pctA}%) &mdash; <strong>${sc}</strong> serie${sc > 1 ? 's' : ''} (${pctS}%)
</div>
<div style="height: 8px; background: var(--secondary); border-radius: 4px; overflow: hidden; display: flex;">
<div style="width: ${pctA}%; background: var(--primary);"></div>
<div style="width: ${pctS}%; background: #6CB4EE;"></div>
<div class="progress w-full" style="height: 8px;">
<div class="progress-bar" style="width: 100%; display: flex; border-radius: 4px; overflow: hidden;">
<div style="width: ${pctA}%; background: ${primary};"></div>
<div style="width: ${pctS}%; background: ${accent};"></div>
</div>
</div>
<div style="margin-top: 8px; font-size: 12px;">
Ratio applique : <strong style="color: var(--primary);">${aw}</strong> anime / <strong style="color: #6CB4EE;">${sw}</strong> serie
Ratio applique : <strong style="color: ${primary};">${aw}</strong> anime / <strong style="color: ${accent};">${sw}</strong> serie
</div>
`;
}
} catch (e) {
details.innerHTML = '<span style="color: var(--danger);">Erreur de chargement</span>';
const error = getThemeColor('--color-error', '#f43f5e');
details.innerHTML = `<span style="color: ${error};">Erreur de chargement</span>`;
}
}
@@ -141,8 +160,13 @@ function updateWeightPreview() {
const sw = parseInt(swEl.value) || 0;
const total = aw + sw;
const primary = getThemeColor('--color-primary', '#6366f1');
const secondary = getThemeColor('--color-secondary', '#a3a3a3');
const accent = getThemeColor('--color-accent', '#38bdf8');
const error = getThemeColor('--color-error', '#f43f5e');
if (total === 0) {
preview.innerHTML = '<span style="color: var(--danger);">Les deux poids ne peuvent pas etre a 0</span>';
preview.innerHTML = `<span style="color: ${error};">Les deux poids ne peuvent pas etre a 0</span>`;
return;
}
@@ -151,12 +175,14 @@ function updateWeightPreview() {
preview.innerHTML = `
<div style="margin-bottom: 6px;">
<span style="color: var(--primary); font-weight: 700;">${pctA}%</span> animes &nbsp;/&nbsp;
<span style="color: #6CB4EE; font-weight: 700;">${pctS}%</span> series
<span style="color: ${primary}; font-weight: 700;">${pctA}%</span> animes &nbsp;/&nbsp;
<span style="color: ${accent}; font-weight: 700;">${pctS}%</span> series
</div>
<div style="height: 8px; background: var(--secondary); border-radius: 4px; overflow: hidden; display: flex;">
<div style="width: ${pctA}%; background: var(--primary); transition: width 0.2s;"></div>
<div style="width: ${pctS}%; background: #6CB4EE; transition: width 0.2s;"></div>
<div class="progress w-full" style="height: 8px;">
<div class="progress-bar" style="width: 100%; display: flex; border-radius: 4px; overflow: hidden;">
<div style="width: ${pctA}%; background: ${primary}; transition: width 0.2s;"></div>
<div style="width: ${pctS}%; background: ${accent}; transition: width 0.2s;"></div>
</div>
</div>
`;
}