Při použití doplňku Breadcrumbs můžeme narazit na to, že nám základní formátování obsažené ve stylech šablony webu nebude zcela vyhovovat. V dnešním článku si ukážeme, jak docílit lepšího formátování drobečkové navigace, aby více odpovídalo našim požadavkům.

V předchozím článku jsme si představili doplněk Breadcrumbs, který je jedním z nejdůležitějších navigačních prvků na stránce, protože nám poskytuje informace o tom, v které části webu se aktuálně nacházíme, a současně nám umožňuje přesunout se do vyšších úrovní webu (všech předků aktuálně zobrazené stránky), obvykle až na úvodní stránku.

Přestože lze doplněk Breadrumbs použít přímo po jeho instalaci (potažmo umístění příslušného kódu do šablon stránek, v nichž se má drobečková navigace zobrazovat), může někoho překvapit jeho zvláštní chování, respektive „nedotažené“ formátování, což je dáno několika faktory. Jak jsme si řekli v předchozím příspěvku, zobrazení doplňku závisí jednak na stylech použitého frameworku, dále na stylech šablony webu a v neposlední řadě na stylech samotného doplňku.

Kterákoliv z uvedených částí může pochopitelně scházet, nicméně uvedené můžeme považovat za obecné pravidlo. Rovněž to, v jakém pořadí se styly, resp. soubory se styly načítají je dáno jejich prioritou určenou v rámci základní šablony base.html.twig, potažmo pak prioritou selektorů a v neposlední řadě i pravidlem !important. Ale to je nad rámec tohoto článku.

Podstatné je, že veškeré použité styly je možné přebít styly vlastními, a to v souboru custom.css umístěném ve složce /user/themes/quark/css, kde místo části quark použijete název příslušné šablony webu, kterou máte aktivně nastavenou, resp. v níž chcete změny stylů provést. Samostatnou kapitolou je používání dědičných témat, které zajistí bezpečné změny všech souborů, aniž by hrozilo jejich přepsání při nově vydané aktualizaci šablony webu.

Shora uvedené chování je dáno univerzálností doplňku, který se nesnaží nabídnout jedinou správnou variantu, ale jde cestou maximální flexibility, přičemž je na uživateli, aby se našel nejvhodnější řešení. Nelze popsat všechny možnosti nastavení, zaměříme se proto na dva zásadní nedostatky, se kterými se můžeme setkat při implementaci doplňku do šablony webu Quark. I zde ale záleží na tom, zda je aktivována volba použití vlastních stylů doplňku nebo jsou použity pouze výchozí ze šablony webu (vyzkoušejte zobrazení při aktivovaných stylech doplňku a bez nich).

Základním problémem, který se projevuje v mobilním – nebo chcete-li v responsivním – zobrazení je, že se drobečková navigace rozsype, konkrétně se dlouhé názvy zformátují pod sebe do sloupců a mezi nimi zůstávají v samostatných sloupcích nastavené separátory, typicky > nebo /. Uvedené je dáno tím, že celá navigace a současně i její jednotlivé položky jsou stylovány jako flexibilní objekty, tj. mají nastavenou hodnotu vlastnosti display na flex. Zde existuje jednoduché řešení, a to změnit hodnotu prvku navigace na block nebo inline-block (podle toho, jak chceme, aby se zobrazovala – rozdíl je patrný pouze tehdy, pokud je nastaveno pozadí, popř. rámeček navigace) a hodnotu separátorů na inline-block nebo inline (opět záleží na tom, jaké chování očekáváme). Tím docílíme toho, že se drobečková navigace začne chovat jako odstavcové, resp. řádkové prvky a bude se rovnat pod sebe na jednotlivé řádky. Ani to ale nemusí být ideální řešení. Pokud někomu nevyhovuje žádné z uvedených, nabízí se ještě možnost použít různé zkracovače (vím, že existují, ale zatím jsem nezkoušel), které drobečkovou navigaci udrží na úrovni jednoho řádku i na velmi úzkém displeji.

Původní drobečková navigace vypadá nějak takto (simulováno, ve skutečnosti je daleko více rozsypaná, zejména jsou výrazně odsunuty separátory >):

Po úpravách nějak takto (s nastavenou vlastností display: inline, viz ukázka kódu níže):

Ale třeba i nějak takto (s ponecháním dědičné hodnoty block objektu breadcrumbs):

A v případě použití zkracovače nějak takto:

Druhým problémem je, že se nám v drobečkové navigaci objeví dva separátory, a to / (definovaný styly šablony webu) a > (nebo jiný, nastavený v doplňku). Zde se nabízí opět jednoduché řešení, a to deaktivovat styly šablony webu, resp. je nahradit vlastními.

Nežádoucí zobrazení dvou separátorů:

Zde nabízím kompletní upravený styl drobečkové navigace, který řeší oba uvedené problémy:

/** Breadcrumbs styling **/
#breadcrumbs {
    display: block;
    font-size: 0.8rem;
}

#breadcrumbs i {
    display: inline-block;
}

#breadcrumbs span, #breadcrumbs a {
    padding: 0 0.1rem;
    text-decoration: none;
}

#breadcrumbs span:not(:first-child)::before, #breadcrumbs a:not(:first-child)::before {
    content: "";
    padding-right: 0;
}

S drobnými obměnami používám jej pro weby postavené na základu šablony webu Quark. Typicky nad rámec uvedeného styluji pozadí objektů, upravuji odsazení (vnější, popř. vnitřní okraje) objektů apod., což souvisí zejména s celkovým vzhledem stránky, resp. se začleněním drobečkové navigace do stránky tak, aby byla v souladu i s ostatními objekty.

Objekt breadrumbs lze pak vylepšit následovně:

#breadcrumbs {
    display: block;
    font-size: 0.8rem;
    background-color: rgba(255, 128, 0, 0.5);
    padding: 0.2rem;
    height: auto;
    line-height: 1.2rem;
}

Objektům span a a, které jsou potomky objektu breadrumbs můžeme nastavit řádkové zobrazení (záleží, zda chceme, aby se – jako v tomto případě – posouval text plynule po řádcích):

#breadcrumbs span, #breadcrumbs a {
    padding: 0 0.1rem;
    text-decoration: none;
    display: inline;
}

Pokud máte praktické zkušenosti s uvedeným tématem, budu rád, pokud se o ně s ostatními podělíte. Informace zveřejním jako samostatný článek, popř. jako dodatek k tomuto příspěvku.