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

UI: Standardize buttons and design system across the application
CI / Test (Python 3.11) (push) Has been cancelled
Details
CI / Test (Python 3.12) (push) Has been cancelled
Details
CI / Lint (push) Has been cancelled
Details
CI / Type Check (push) Has been cancelled
Details
CI / Summary (push) Has been cancelled
Details

Browse Source 
- Created a unified button system in style.css with primary, secondary, and icon variants.
- Standardized cards, inputs, and layout components for a more premium look.
- Refactored header, login, anime/series cards, and watchlist/downloads sections to use the new design system.
- Cleaned up inline styles and redundant local style blocks in templates.
- Updated JS-generated buttons to follow the new global styling.
This commit is contained in:
root
2026-03-26 10:46:18 +00:00
parent 9f85908ff3
commit b6f12b2162
13 changed files with 635 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/anime-details.js
+4 -4
View File
@@ -268,10 +268,10 @@ function renderAnimeDetails(anime) {
` : ''}
<div class="anime-details-actions">
<a href="${escapeHtml(anime.url)}" target="_blank" class="btn-secondary btn-small">
<a href="${escapeHtml(anime.url)}" target="_blank" class="btn btn-secondary btn-small">
🔗 Voir sur MAL
</a>
<button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn-primary btn-small">
<button onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')" class="btn btn-primary btn-small">
📥 Télécharger
</button>
</div>
@@ -291,7 +291,7 @@ function renderAnimeDetails(anime) {
<div class="anime-details-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
<h3 style="margin: 0;">📖 Synopsis</h3>
<button onclick="translateSynopsis('${synopsisId}', this)" class="btn-secondary btn-small" style="font-size: 12px;">
<button onclick="translateSynopsis('${synopsisId}', this)" class="btn btn-secondary btn-small" style="font-size: 12px;">
🌐 Traduire en français
</button>
</div>
@@ -405,7 +405,7 @@ function renderStreamingResult(result, query) {
${episodes.length > 20 ? `<option disabled>... et ${episodes.length - 20} autres</option>` : ''}
</select>
<button class="btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
<button class="btn btn-primary btn-small streaming-download-btn" onclick="downloadSelectedEpisode(this)">
📥 Télécharger
</button>
</div>
static/js/recommendations.js
+8 -8
View File
@@ -26,7 +26,7 @@ async function loadRecommendations() {
<p style="font-size: 12px; margin-top: 10px; color: #888;">
Soit l'API MyAnimeList est inaccessible, soit vous n'avez pas encore de téléchargements.
</p>
<button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
@@ -40,7 +40,7 @@ async function loadRecommendations() {
<div class="no-results">
<p>❌ Erreur lors du chargement des recommandations.</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-small" onclick="loadRecommendations()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
@@ -75,7 +75,7 @@ async function loadLatestReleases() {
<p style="font-size: 12px; margin-top: 10px; color: #888;">
L'API MyAnimeList pourrait être temporairement inaccessible.
</p>
<button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
@@ -89,7 +89,7 @@ async function loadLatestReleases() {
<div class="no-results">
<p>❌ Erreur lors du chargement des sorties.</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-small" onclick="loadLatestReleases()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>
@@ -180,10 +180,10 @@ function renderRecommendationCard(anime) {
` : ''}
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
🔗 MAL
</button>
<button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
📥 Télécharger
</button>
</div>
@@ -233,10 +233,10 @@ function renderReleaseCard(anime) {
` : ''}
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(anime.url)}', '_blank')">
🔗 MAL
</button>
<button class="btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
<button class="btn btn-primary btn-small" onclick="searchAnimeOnProviders('${escapeHtml(anime.title)}')">
📥 Télécharger
</button>
</div>
static/js/series-search.js
+3 -3
View File
@@ -54,10 +54,10 @@ async function handleSeriesSearch() {
</div>
` : ''}
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(s.url)}', '_blank')">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(s.url)}', '_blank')">
🔗 Voir sur FS7
</button>
<button class="btn-primary btn-small" onclick="loadSeriesEpisodesDirect('${escapeHtml(s.url)}', '${escapeHtml(s.title)}')">
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodesDirect('${escapeHtml(s.url)}', '${escapeHtml(s.title)}')">
📥 Voir les épisodes
</button>
</div>
@@ -111,7 +111,7 @@ async function loadSeriesEpisodesDirect(url, title) {
<option value="${escapeHtml(ep.url)}">Épisode ${escapeHtml(ep.episode)}</option>
`).join('')}
</select>
<button class="btn-primary" style="margin-top: 10px; width: 100%;" onclick="downloadSeriesEpisode('${escapeHtml(url)}', '${escapeHtml(title)}')">
<button class="btn btn-primary" style="margin-top: 10px; width: 100%;" onclick="downloadSeriesEpisode('${escapeHtml(url)}', '${escapeHtml(title)}')">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
</svg>
static/js/tabs.js
+9 -9
View File
@@ -36,10 +36,10 @@ function renderSeriesRecommendationCard(series) {
</div>
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
🔗 Voir sur FS7
</button>
<button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
📥 Voir les épisodes
</button>
</div>
@@ -98,10 +98,10 @@ function renderSeriesReleaseCard(series) {
</div>
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
<button class="btn btn-secondary btn-small" onclick="window.open('${escapeHtml(series.url)}', '_blank')">
🔗 Voir sur FS7
</button>
<button class="btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
<button class="btn btn-primary btn-small" onclick="loadSeriesEpisodes('${escapeHtml(series.url)}', '${escapeHtml(series.title)}')">
📥 Voir les épisodes
</button>
</div>
@@ -238,7 +238,7 @@ async function loadSeriesReleases() {
<div class="no-results">
<p>❌ Erreur lors du chargement des séries</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-small" onclick="loadSeriesReleases()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>`;
@@ -280,11 +280,11 @@ async function loadProvidersGrid() {
` : ''}
<div class="anime-card-actions">
${domains.length > 0 ? `
<button class="btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
<button class="btn btn-primary btn-small" onclick="window.open('https://${domains[0]}', '_blank')">
🔗 Visiter le site
</button>
` : ''}
<button class="btn-secondary btn-small" onclick="showProviderSearch('${id}')">
<button class="btn btn-secondary btn-small" onclick="showProviderSearch('${id}')">
🔍 Rechercher
</button>
</div>
@@ -310,7 +310,7 @@ async function loadProvidersGrid() {
<div class="anime-card-title">${host.icon} ${host.name}</div>
</div>
<div class="anime-card-actions">
<button class="btn-secondary btn-small" onclick="showDownloadInfo()">
<button class="btn btn-secondary btn-small" onclick="showDownloadInfo()">
📥 Télécharger un fichier
</button>
</div>
@@ -332,7 +332,7 @@ async function loadProvidersGrid() {
<div class="no-results">
<p>❌ Erreur lors du chargement des fournisseurs</p>
<p style="font-size: 12px; margin-top: 10px; color: #ff6b6b;">${error.message}</p>
<button class="btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
<button class="btn btn-secondary btn-small" onclick="loadProvidersGrid()" style="margin-top: 10px;">
🔄 Réessayer
</button>
</div>