Branding

Značku určenou zákazníkem lze nastavit v aplikaci LogMan.io WebUI.

Statický branding

Příklad:

let ConfigDefaults = {
    title: "App Title",
    brand_image: {
        full: "media/logo/header-full.svg",
        minimized: "media/logo/header-minimized.svg",
    }
};

Dynamická značka

Branding lze nakonfigurovat pomocí dynamické konfigurace.

Dynamická konfigurace je injektována pomocí ngx_http_sub_module, protože nahrazuje předdefinovaný obsah index.html (v našem případě).

Více informací o ngx_http_sub_module

Existují 3 možnosti dynamického brandingu - logo v záhlaví, nadpis a vlastní styly CSS.

Logo záhlaví

Chcete-li nahradit výchozí logo záhlaví, je třeba v konfiguraci sub_filter systému nginx dodržet pravidla pro nahrazení <meta name="header-logo-full"> a <meta name="header-logo-minimized"> s konkrétním názvem. Náhrada musí mít rekvizitu content, jinak se obsah náhrady nepropaguje. content musí obsahovat řetězec s cestou k logu.

Velikost obrázků značky naleznete zde.

Full

Příklad importu loga v plné velikosti (když není sbalen postranní panel aplikace).

sub_filter '<meta name="header-logo-full">' '<meta name="header-logo-full" content="/<location>/<path>/<to>/<custom_branding>/<logo-full>.svg">';

Minimalizováno

Příklad importu loga minimalizované velikosti (při sbaleném postranním panelu aplikace)

sub_filter '<meta name="header-logo-minimized">' '<meta name="header-logo-minimized" content="/<location>/<path>/<to>/<custom_branding>/<logo-minimized>.svg">';

Název

Příklad nahrazení názvu aplikace, konfigurace se musí řídit pravidly pro nahrazení <meta name="title"> s konkrétním name. Nahrazení musí mít rekvizitu content, jinak se obsah nahrazení nebude propagovat. content musí obsahovat řetězec s názvem aplikace.

sub_filter '<meta name="title">' '<meta name="title" content="Custom app title">';

Vlastní styly CSS

Příklad importu vlastních stylů CSS, konfigurace se musí řídit pravidly pro nahrazení <meta name="custom-css-file"> s konkrétním name. Náhrada musí mít rekvizitu content, jinak nebude obsah náhrady propagován. content musí obsahovat řetězec s cestou k souboru CSS.

sub_filter '<meta name="custom-css-file">' '<meta name="custom-css-file" content="/<location>/<path>/<to>/<custom_branding>/<custom-file>.css">';

Příklad vlastního souboru CSS

.card .card-header-login .card-header-title h2 {
    color: violet !important;
}

.text-primary {
    color: yellowgreen !important;
}

Definujte cestu nginxu k dynamickému obsahu značky

Aby bylo možné umístit dynamický (vlastní) brandingový obsah, je třeba jej definovat v nastavení nginx.

# Cesta k umístění (adresáři) s vlastním obsahem
location /<location>/<path>/<to>/<custom_branding> {
    alias /<path>/<to>/<custom_branding>;
}

Úplný příklad

Úplný příklad konfigurace nginx s vlastní značkou

...

location /<location> {
    root /<path>/<to>/<build>;
    index index.html;
    sub_filter '<meta name="header-logo-full">' '<meta name="header-logo-full" content="/<location>/<path>/<to>/<custom_branding>/<logo-full>.svg">';
    sub_filter '<meta name="header-logo-minimized">' '<meta name="header-logo-minimized" content="/<location>/<path>/<to>/<custom_branding>/<logo-minimized>.svg">';
    sub_filter '<meta name="title">' '<meta name="title" content="Custom app title">';
    sub_filter '<meta name="custom-css-file">' '<meta name="custom-css-file" content="/<location>/<path>/<to>/<custom_branding>/<custom-file>.css">';
    sub_filter_once on;
}

# Cesta k umístění (adresáři) s vlastním obsahem
location /<location>/<path>/<to>/<custom_branding> {
    alias /<path>/<to>/<custom_branding>;
}

...

Průvodce stylováním

Každý obrázek MUSÍ být ve formátu SVG (vektorový). Použití pixelových formátů (PNG, JPG, ...) se důrazně nedoporučuje. Při vytváření obrázků značky používejte plnou šířku/výšku plátna (poměr 3:1 u plné a 1:1 u minimalizované verze). Pro optimální zobrazení není vyžadováno žádné vyplňování.

Obrázky značky

formát: SVG

Plné znění: * vykreslovaný poměr: 3:1 * vykreslená velikost: 150x50 px

Minimalizováno: * vykreslený poměr: 1:1 * vykreslená velikost: 50x50 px

Branding je na velkých obrazovkách umístěn v levém horním rohu. Obrázek značky Plné velikosti se používá, když je postranní panel rozbalený, a při sbalení je nahrazen zmenšenou verzí. Na menších obrazovkách (<768px) branding v postranním panelu zmizí a zobrazí se pouze obrázek brandingu v plné velikosti v pozici nahoře uprostřed stránky.

Logo by mělo být vhodné pro použití ve světlém i tmavém režimu.

Logo na postranním panelu je vždy umístěno v dole postranního panelu. Minimalizovaná verze se objeví po sbalení postranního panelu.

Úplné: * vykreslená velikost: 90x30 px

Minimalizovaná: * vykreslená velikost: 30x30 px

Poznámka: Na úvodní obrazovce je také použit celý obrázek, 30 % šířky obrazovky.