Eigenes Logo und Favicon je Installation
Beides ist optional und wird ueber Einstellungen -> Darstellung gesetzt. Ohne eigenes Bild bleibt alles wie bisher. Ablage bewusst in der Datenbank (Tabelle branding_assets) und nicht im Dateisystem: So liegt das Bild automatisch im Backup, und das Deployment braucht kein zusaetzliches Volume. Es geht um wenige Kilobyte; der Upload ist auf 512 KB und auf Bildformate begrenzt, die ein Browser auch wirklich darstellt. Das Abrufen ist ohne Anmeldung moeglich, weil der Browser das Favicon schon vor dem Login holt - hochladen und entfernen duerfen nur Administratoren. Das Logo ersetzt in der Seitenleiste und auf der Anmeldeseite Zeichen und Schriftzug zusammen. Damit ein zu grosses oder sehr breites Bild das Layout nicht auseinanderziehen kann, ist die Hoehe per CSS gedeckelt und die Breite auf den Container begrenzt; object-fit haelt das Seitenverhaeltnis. Faellt das Laden fehl, erscheint wieder das eingebaute Zeichen. Als Standard-Favicon dient derselbe Barcode-Glyph wie im App-Icon, damit Web und iOS-App zusammenpassen. Getestet: Die Endpunkte sind gegen die laufende API geprueft - hochladen, abrufen ohne Anmeldung, Abweisen von falschem Dateityp (400), zu grosser Datei (400), unbekannter Bildart (404) und fehlenden Rechten (401), entfernen und der Rueckfall auf 404 danach. Web-Build laeuft durch, 40 pytest-Tests gruen. Die Darstellung im Browser habe ich nicht selbst angesehen. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
31
web/src/branding.js
Normal file
31
web/src/branding.js
Normal file
@@ -0,0 +1,31 @@
|
||||
// Eigenes Logo und Favicon der Installation.
|
||||
// Beides ist optional: Ist nichts hinterlegt, antwortet das Backend mit 404
|
||||
// und die Oberfläche bleibt bei ihrem eingebauten Zeichen.
|
||||
|
||||
export const BRANDING_KINDS = ["logo", "favicon"];
|
||||
|
||||
export function brandingUrl(kind, version) {
|
||||
return `/api/branding/${kind}${version ? `?v=${version}` : ""}`;
|
||||
}
|
||||
|
||||
/** Prüft, ob ein eigenes Bild hinterlegt ist (ohne es zu laden). */
|
||||
export async function hasBranding(kind) {
|
||||
try {
|
||||
const resp = await fetch(brandingUrl(kind), { method: "HEAD" });
|
||||
return resp.ok;
|
||||
} catch {
|
||||
return false; // Server nicht erreichbar: eingebautes Zeichen genügt.
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setzt das Favicon auf das hinterlegte Bild.
|
||||
* Läuft bewusst schon vor dem Login – der Browser holt das Favicon sofort.
|
||||
*/
|
||||
export async function applyFavicon() {
|
||||
const link = document.querySelector("link[rel='icon']");
|
||||
if (!link) return;
|
||||
if (await hasBranding("favicon")) {
|
||||
link.href = brandingUrl("favicon", Date.now());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user