DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Badges kräftiger für bessere Lesbarkeit + Admin-Install-Icon endlich zuverlässig

Browse Source 
Badges ("NEU", "HANDGEMACHT" ...) sitzen direkt auf Produktfotos mit
unterschiedlichsten Hintergründen — die alte, sehr transparente Pille
ging auf manchen Fotos optisch unter. Gleiche Farben/gleicher Stil,
aber kräftigerer (deutlich weniger transparenter) Hintergrund + eigener
Rand + dezenter Schlagschatten hinterm Text für Kontrast auf jedem
Untergrund.

Den eigentlichen Grund für das wacklige Verhalten beim Installieren des
Admin-Bereichs gefunden: Sveltia CMS liest selbst den "logo"-Eintrag in
config.yml (eigentlich nur fürs Branding IN der CMS-Oberfläche gedacht)
und fügt daraus automatisch EIGENE Icon-/Manifest-Verknüpfungen in den
<head> ein — u.a. ein live generiertes, eigenes Manifest als blob:-URL
— NACH unseren eigenen. Zwei "rel=manifest"-Links gleichzeitig sind
technisch erlaubt, aber welcher beim Installieren gewinnt, war nicht
zuverlässig vorhersagbar. Das erklärt, warum es mal geklappt hat und
mal nicht, unabhängig vom Icon-Inhalt selbst.

Fix: ein MutationObserver entfernt Sveltias eigene, automatisch
eingefügte Icon-/Manifest-Verknüpfungen sofort wieder, sobald sie
auftauchen — übrig bleiben ausschließlich unsere eigenen (Favicon =
echtes Logo, Install-Icon = lila V). Verifiziert: nach vollständigem
Laden inkl. Sveltia sind nur noch unsere 5 eigenen Verknüpfungen im
<head> vorhanden, 0 Installability-Errors.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 01:24:40 +02:00
co-authored by Claude Sonnet 5
parent 8da322699b
commit 1b55604cba
2 changed files with 35 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/index.html
+26
View File
@@ -99,6 +99,32 @@
<button type="button" id="install-btn" title="Admin als App installieren">⬇️ Installieren</button> <button type="button" id="install-btn" title="Admin als App installieren">⬇️ Installieren</button>
<script> <script>
// WICHTIG gefundener Grund für das wacklige Installations-Icon bisher: Sveltia CMS liest
// selbst den "logo"-Eintrag oben in config.yml (der eigentlich nur fürs Branding IN der
// CMS-Oberfläche gedacht ist) und fügt daraus automatisch EIGENE <link rel="icon">,
// <link rel="apple-touch-icon"> und sogar ein eigenes, live generiertes
// <link rel="manifest"> (als blob:-URL) in den <head> ein — NACH unseren eigenen, fest
// im HTML stehenden Verknüpfungen. Zwei "rel=manifest"-Links gleichzeitig sind erlaubt,
// aber welcher davon beim Installieren gewinnt, ist nicht zuverlässig vorhersagbar —
// genau das erklärt, warum es mal geklappt hat und mal nicht. Fix: ein MutationObserver
// entfernt Sveltias eigene Icon-/Manifest-Verknüpfungen SOFORT wieder, sobald sie
// auftauchen, damit ausschließlich unsere eigenen (mit dem lila "V") übrig bleiben.
(function () {
var eigeneManifestUrl = location.origin + "/admin/manifest.webmanifest";
var beobachter = new MutationObserver(function (mutationen) {
mutationen.forEach(function (mutation) {
mutation.addedNodes.forEach(function (node) {
if (node.nodeName !== "LINK") return;
var rel = node.getAttribute("rel");
if (rel === "manifest" && node.href !== eigeneManifestUrl) node.remove();
if (rel === "icon" && node.href.indexOf("/logo.png") !== -1) node.remove();
if (rel === "apple-touch-icon" && node.href.indexOf("data:") === 0) node.remove();
});
});
});
beobachter.observe(document.head, { childList: true });
})();
// Gleiches Prinzip wie auf der Hauptseite: Button nur zeigen, wenn der Browser die // Gleiches Prinzip wie auf der Hauptseite: Button nur zeigen, wenn der Browser die
// Installation wirklich anbietet, und nicht mehr, sobald bereits als App installiert. // Installation wirklich anbietet, und nicht mehr, sobald bereits als App installiert.
(function () { (function () {
src/styles/global.css
+9 -4
View File
@@ -189,7 +189,10 @@ a.card:hover {
.product-slot { display: flex; } .product-slot { display: flex; }
.product-slot > a { flex: 1; } .product-slot > a { flex: 1; }
/* Badges */ /* Badges — sitzen direkt auf Produktfotos (unterschiedlichste Hintergründe/Farben), deshalb
braucht die Pille genug eigene Kraft, um immer lesbar zu bleiben: kräftigerer (weniger
transparenter) Hintergrund + eigener Rand in derselben Farbe + dezenter Schlagschatten hinterm
Text. Farbton und Grundstil bleiben exakt gleich, nur die Durchsetzungskraft ist höher. */
.badge { .badge {
display: inline-block; display: inline-block;
font-size: 0.72rem; font-size: 0.72rem;
@@ -198,11 +201,13 @@ a.card:hover {
text-transform: uppercase; text-transform: uppercase;
padding: 0.3em 0.75em; padding: 0.3em 0.75em;
border-radius: 999px; border-radius: 999px;
background: rgba(95, 211, 236, 0.14); background: rgba(95, 211, 236, 0.34);
border: 1px solid rgba(95, 211, 236, 0.6);
color: var(--c-accent); color: var(--c-accent);
text-shadow: 0 1px 3px rgba(10, 9, 16, 0.65);
} }
.badge-sale { background: rgba(231, 135, 154, 0.16); color: var(--c-sale); } .badge-sale { background: rgba(231, 135, 154, 0.36); border-color: rgba(231, 135, 154, 0.6); color: var(--c-sale); }
.badge-sold-out { background: rgba(183, 174, 196, 0.16); color: var(--c-text-muted); } .badge-sold-out { background: rgba(183, 174, 196, 0.32); border-color: rgba(183, 174, 196, 0.55); color: var(--c-text-muted); }
/* Placeholder art (kein echtes Produktfoto vorhanden) */ /* Placeholder art (kein echtes Produktfoto vorhanden) */
.img-placeholder { .img-placeholder {