Changeset 3188dfe in Klonkt

Timestamp:

08/13/2026 01:26:21 PM (4 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

0824351

Parents:

c3e736c

Message:

Kandidaten als kaartje, regel voor regel (shaer-mbz)

Een keuze en geen opsomming. Alles op een rij duwen maakte de toelichting --
juist het veld dat twee gelijknamige bands uit elkaar houdt -- tot bijzin achter
de naam. Nu: naam, toelichting, feiten, en een voet met de link en de knop.

Alleen wat er IS. Een lege bullet tussen twee punten leest als ontbrekende
informatie in plaats van als afwezige, dus soort, land en jaren worden pas
samengevoegd nadat de lege eruit zijn.

De zoekscore komt er alleen bij als hij ZWAK is (< 70). Bij een goede treffer is
een getal ruis; bij een zwakke is het een waarschuwing. Dat veld haalden we al
op met precies die bedoeling en het werd nog nergens gebruikt.

Co-Authored-By: Claude Opus 5 <noreply@…>

Location:

src

Files:

• assets/js/mod/admin-seo.js (modified) (1 diff)
• views/pages/admin-seo.ejs (modified) (1 diff)

src/assets/js/mod/admin-seo.js

@@ -121 +121 @@
     for (const k of kandidaten) {
       const li = el('li', 'mb-kandidaat');
-      li.appendChild(el('strong', null, k.naam));
+
+      // Regel voor regel, want dit is een KEUZE en geen opsomming. Alles op een
+      // rij duwen maakt de toelichting -- juist het veld dat de bands uit
+      // elkaar houdt -- tot bijzin achter de naam.
+      li.appendChild(el('span', 'mb-naam', k.naam));
+
       // De toelichting is het hele punt: er zijn drie bands die Nirvana heten,
-      // en zonder dit veld kiest iemand de verkeerde.
-      const bij = [k.toelichting, k.soort, k.land, k.jaren].filter(Boolean).join(' · ');
-      if (bij) li.appendChild(el('small', 'mb-bij', bij));
+      // en zonder dit veld kiest iemand de verkeerde. Eigen regel dus.
+      if (k.toelichting) li.appendChild(el('span', 'mb-toelichting', k.toelichting));
+
+      // De feiten eronder, en alleen wat er IS. Een lege bullet tussen twee
+      // punten leest als ontbrekende informatie in plaats van als afwezige.
+      const feiten = [k.soort, k.land, k.jaren].filter(Boolean).join(' · ');
+      if (feiten) li.appendChild(el('span', 'mb-feiten', feiten));
+
+      const voet = el('div', 'mb-voet');
       const open = el('a', 'mb-open', T.mb_open || 'Bekijk op MusicBrainz');
       open.href = k.url; open.target = '_blank'; open.rel = 'noopener';
-      li.appendChild(open);
-      const b = el('button', 'btn', T.mb_pick || 'Dit ben ik');
+      voet.appendChild(open);
+      // Hun eigen score. Alleen tonen als hij ZWAK is: bij een goede treffer is
+      // een getal ruis, bij een zwakke is het een waarschuwing.
+      if (k.score && k.score < 70) voet.appendChild(el('span', 'mb-zwak', `${k.score}%`));
+      const b = el('button', 'btn mb-kies', T.mb_pick || 'Dit ben ik');
       b.type = 'button';
       b.addEventListener('click', () => zet(k.mbid, k.naam));
-      li.appendChild(b);
+      voet.appendChild(b);
+      li.appendChild(voet);
+
       lijst.appendChild(li);
     }

src/views/pages/admin-seo.ejs

@@ -149 +149 @@
 
 <style>
+/* ── MusicBrainz-kandidaten: een kaartje per artiest ──────────────
+   Meerdere regels en geen opsomming op een rij: dit is een KEUZE, en de
+   toelichting die twee gelijknamige bands uit elkaar houdt hoort niet als
+   bijzin achter de naam weg te vallen. */
+.mb-uit { margin-top: 0.5rem; }
+.mb-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
+.mb-kandidaat {
+  display: flex; flex-direction: column; gap: 0.2rem;
+  border: 1px solid var(--rule); border-radius: 8px;
+  padding: 0.7rem 0.85rem; background: var(--paper);
+  min-width: 0;
+}
+.mb-naam { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
+.mb-toelichting { font-size: 0.85rem; color: var(--ink); }
+.mb-feiten { font-size: 0.8rem; color: var(--ink-muted); }
+.mb-voet { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; flex-wrap: wrap; }
+.mb-open { font-size: 0.8rem; }
+/* Een zwakke treffer als zwak tonen; bij een goede is een getal ruis. */
+.mb-zwak { font-size: 0.75rem; color: var(--ink-muted); }
+.mb-kies { margin-left: auto; }
+.mb-huidig { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; }
+.mb-zoek { display: flex; gap: 0.5rem; min-width: 0; }
+.mb-zoek input { flex: 1 1 auto; min-width: 0; }
+/* De terug-weg: eenzijdig is geen fout, maar het mag ook niet als klaar lezen. */
+.mb-terugweg { font-size: 0.82rem; margin: 0.2rem 0 0; }
+.mb-terugweg.is-ok { color: var(--ok, #2e7d32); }
+.mb-terugweg.is-eenzijdig { color: var(--ink-muted); }
+
 .admin-site-edit-page { max-width: 760px; margin: 3rem auto; padding: 0 1rem; }
 .admin-site-edit-page h1 { font-family: var(--font-display, serif); font-size: 1.8rem; margin: 0 0 0.4rem; }