jfork/octane-website
1
0
Fork 0
mirror of https://github.com/nfonteyne/octane-website.git synced 2026-09-03 23:24:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

update: better view concert history

Browse source
This commit is contained in:
Nathan FONTEYNE 2026-07-08 16:16:51 +02:00
parent 0773f39763
commit a09d16238b
7 changed files with 80 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

34
public/css/style.css
View file

@ -675,24 +675,40 @@ button:disabled {
.timeline-concert { margin-bottom: 1.5rem; }
.timeline-songs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.9rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: 0.5rem;
}
.timeline-song-card {
.timeline-song-row {
display: flex;
align-items: flex-start;
gap: 0.9rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.7rem;
padding: 0.7rem 0.9rem;
}
.timeline-song-row .row-index { margin-top: 0.15rem; }
.timeline-song-main { flex: 1 1 auto; min-width: 0; }
.timeline-song-title { font-weight: 600; }
.timeline-embed {
max-width: none;
margin-top: 0.5rem;
width: 200px;
max-width: 200px;
flex: 0 0 auto;
margin-top: 0;
}
.timeline-no-embed {
flex: 0 0 auto;
width: 200px;
text-align: center;
margin: 0;
}
/* ---------- Setlist ---------- */
@ -1060,4 +1076,8 @@ a.back-link:hover { color: var(--accent); }
.calendar-header-row span:nth-child(n) { font-size: 0.7rem; }
.cal-cell { min-height: 64px; font-size: 0.7rem; }
.timeline-song-row { flex-wrap: wrap; }
.timeline-embed,
.timeline-no-embed { width: 100%; max-width: none; }
}

2
public/js/calendar.js
View file

@ -210,7 +210,7 @@ function pollWorkflowStatus(btn, maxMs = 180000, intervalMs = 4000) {
const data = await api.get('/api/calendar/workflow-status');
if (data.status === 'success') {
clearInterval(timer);
showToast('Calendrier mis à jour !');
showToast('Calendrier mis à jour !' + (data.message ? ' ' + data.message : ''), false, 10000);
resetRefreshButton(btn);
await loadSlots();
await loadLastChecked();

21
public/js/history.js
View file

@ -11,17 +11,20 @@ function formatDateShort(dateStr) {
return d.toLocaleDateString('fr-FR', { year: 'numeric', month: 'long', day: 'numeric' });
}
function timelineSongCard(song) {
function timelineSongRow(song) {
const embed = youtubeEmbedUrl(song.youtube_url);
return `
<div class="timeline-song-card">
<div class="timeline-song-title">${escapeHtml(song.title)}</div>
<div class="card-subtitle">${escapeHtml(song.artist)}</div>
<div class="timeline-song-row">
<div class="row-index">${song.position}</div>
<div class="timeline-song-main">
<div class="timeline-song-title">${escapeHtml(song.title)}</div>
<div class="card-subtitle">${escapeHtml(song.artist)}</div>
${song.note ? `<p class="note">${escapeHtml(song.note)}</p>` : ''}
${song.spotify_url ? `<div class="song-links"><a class="pill-link spotify" href="${escapeHtml(song.spotify_url)}" target="_blank" rel="noopener">&#9835; Spotify</a></div>` : ''}
</div>
${embed
? `<div class="youtube-embed timeline-embed"><iframe src="${embed}" loading="lazy" allowfullscreen></iframe></div>`
: `<p class="empty">Pas de lien YouTube</p>`}
${song.spotify_url ? `<div class="song-links"><a class="pill-link spotify" href="${escapeHtml(song.spotify_url)}" target="_blank" rel="noopener">&#9835; Spotify</a></div>` : ''}
${song.note ? `<p class="note">${escapeHtml(song.note)}</p>` : ''}
: `<p class="empty timeline-no-embed">Pas de lien YouTube</p>`}
</div>
`;
}
@ -37,14 +40,14 @@ function timelineConcertBlock(concert) {
<div class="setlist-section">
<h3>Setlist</h3>
${main.length
? `<div class="timeline-songs">${main.map(timelineSongCard).join('')}</div>`
? `<div class="timeline-songs">${main.map(timelineSongRow).join('')}</div>`
: '<p class="empty">Aucun morceau enregistré.</p>'}
</div>
${encore.length ? `
<div class="setlist-section">
<h3>Rappel</h3>
<div class="timeline-songs">${encore.map(timelineSongCard).join('')}</div>
<div class="timeline-songs">${encore.map(timelineSongRow).join('')}</div>
</div>` : ''}
<a class="back-link" href="/history-detail.html?id=${concert.id}">Voir / modifier ce concert &rarr;</a>