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

fix: icon design better .div space occupation

Browse source
This commit is contained in:
Nathan FONTEYNE 2026-07-10 15:00:21 +02:00
parent 5e28345ed5
commit fea5c30d69
4 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/concerts.html
View file

@ -29,7 +29,7 @@
<button type="button" class="secondary" id="toggle-add-concert-btn">+ Proposer un concert</button> <button type="button" class="secondary" id="toggle-add-concert-btn">+ Proposer un concert</button>
</div> </div>
<div class="panel" id="add-concert-panel" style="display:none"> <div class="panel" id="add-concert-panel" style="display:none">
<form id="add-concert-form" class="stacked-form"> <form id="add-concert-form" class="inline-form">
<label>Nom <input name="name"></label> <label>Nom <input name="name"></label>
<label>Lieu <input name="venue"></label> <label>Lieu <input name="venue"></label>
<label>Date <input type="date" name="concertDate" required></label> <label>Date <input type="date" name="concertDate" required></label>

5
public/css/style.css
View file

@ -660,10 +660,15 @@ button.secondary {
} }
button.icon-btn { button.icon-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.35rem 0.55rem; padding: 0.35rem 0.55rem;
font-size: 0.85rem; font-size: 0.85rem;
} }
button.icon-btn svg { flex: 0 0 auto; }
button.danger { button.danger {
background: var(--danger); background: var(--danger);
color: #fff; color: #fff;

5
public/js/concerts.js
View file

@ -105,8 +105,8 @@ function upcomingConcertRowTemplate(c) {
<div class="card-subtitle">${escapeHtml(c.venue || '')} · ${formatDateShort(c.concert_date)}</div> <div class="card-subtitle">${escapeHtml(c.venue || '')} · ${formatDateShort(c.concert_date)}</div>
</div> </div>
<div class="concert-row-actions"> <div class="concert-row-actions">
<button type="button" class="secondary icon-btn edit-concert-btn" data-concert-id="${c.id}" title="Modifier">✏️<span class="btn-label"> Modifier</span></button> <button type="button" class="secondary icon-btn edit-concert-btn" data-concert-id="${c.id}" title="Modifier">${CONCERT_EDIT_ICON}<span class="btn-label"> Modifier</span></button>
<button type="button" class="danger icon-btn delete-concert-btn" data-concert-id="${c.id}" title="Supprimer">🗑️<span class="btn-label"> Supprimer</span></button> <button type="button" class="danger icon-btn delete-concert-btn" data-concert-id="${c.id}" title="Supprimer">${CONCERT_DELETE_ICON}<span class="btn-label"> Supprimer</span></button>
</div> </div>
</div> </div>
`; `;
@ -134,6 +134,7 @@ function renderUpcomingList() {
} }
async function onDeleteUpcoming(id) { async function onDeleteUpcoming(id) {
if (!confirm('Supprimer ce concert ? Cette action est irréversible.')) return;
try { try {
await api.del(`/api/setlists/${id}`); await api.del(`/api/setlists/${id}`);
await loadUpcoming(); await loadUpcoming();

10
public/js/setlistEditor.js
View file

@ -1,3 +1,8 @@
// Minimal line-art icons (same style as the theme-toggle icons in nav.js) —
// reused by concerts.js too, both loaded on the same page.
const CONCERT_EDIT_ICON = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg>';
const CONCERT_DELETE_ICON = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>';
// Shared setlist editor used by concerts.js for both the "prochain concert" // Shared setlist editor used by concerts.js for both the "prochain concert"
// tab and a past concert's detail view: choose songs from the repertoire, // tab and a past concert's detail view: choose songs from the repertoire,
// order them, add per-song notes, mark encore songs, save. Parameterized so // order them, add per-song notes, mark encore songs, save. Parameterized so
@ -41,8 +46,8 @@ function createSetlistEditor({
${playlistUrl ? `<div class="song-links"><a class="pill-link youtube" href="${playlistUrl}" target="_blank" rel="noopener">&#9658; Écouter la setlist sur YouTube</a></div>` : ''} ${playlistUrl ? `<div class="song-links"><a class="pill-link youtube" href="${playlistUrl}" target="_blank" rel="noopener">&#9658; Écouter la setlist sur YouTube</a></div>` : ''}
</div> </div>
<div class="concert-row-actions"> <div class="concert-row-actions">
<button id="edit-btn" type="button" class="secondary icon-btn" title="Modifier">✏️<span class="btn-label"> Modifier</span></button> <button id="edit-btn" type="button" class="secondary icon-btn" title="Modifier">${CONCERT_EDIT_ICON}<span class="btn-label"> Modifier</span></button>
${allowDelete ? '<button id="delete-btn" type="button" class="danger icon-btn" title="Supprimer">🗑️<span class="btn-label"> Supprimer</span></button>' : ''} ${allowDelete ? `<button id="delete-btn" type="button" class="danger icon-btn" title="Supprimer">${CONCERT_DELETE_ICON}<span class="btn-label"> Supprimer</span></button>` : ''}
</div> </div>
</div> </div>
<div class="setlist-section"> <div class="setlist-section">
@ -71,6 +76,7 @@ function createSetlistEditor({
} }
async function onDelete() { async function onDelete() {
if (!confirm('Supprimer ce concert ? Cette action est irréversible.')) return;
try { try {
await api.del(`/api/setlists/${setlist.id}`); await api.del(`/api/setlists/${setlist.id}`);
if (onDeleted) onDeleted(); if (onDeleted) onDeleted();