Navigace

Header a footer jsou globální prvky a mají být napříč DIV.cz stejné – nejsou filmové, knižní ani herní. Rozdíly mezi moduly se projevují aktivním stavem, barvou nebo obsahem navigace, nikoliv změnou její konstrukce. Nadpis + sekční navigace a levé menu dodržují stejné pravidlo a jsou zdokumentované níže.

Nadpis + sekční navigace

Stejný princip jako u blog, forum a articles: velký nadpis sekce, hned pod ním vodorovný přehled všech sedmi dokumentačních skupin (Dokumentace, API, Data, Design, Editor, Nápověda, Infrastruktura). Aktuální skupina je zvýrazněná podtržením. Bez vyhledávání – to je jen v levém menu, nemá smysl mít dvě pole na jedné stránce. Vykresluje ji docs/_section_nav.html, includované s parametrem active_section, a pod sebou má vodorovnou čáru.

{% block docs_nav %}
{% include "docs/_section_nav.html" with active_section="design" %}
{% endblock %}

Levé menu

Levé menu zobrazuje pouze aktuální dokumentační skupinu (viz docs/_menu_design.html vlevo na této stránce) – nevkládáme celý strom všech dokumentací do každého sidebaru. Ikona vždy předchází textu a stejný význam používá stejnou ikonu.

Nepoužíváme <h3> nadpisy uvnitř menu – lámaly layout. Skupina uvnitř jednoho .sidebar-list se odděluje položkou <li><hr></li> a popisuje <li><strong></li> – stejný plochý vzor jako u filmů, knih a her.

<ul class="sidebar-list">
    <li>&#127912; <a href="/dokumentace/design/">Přehled</a></li>
    ...
    <li><hr></li>
    <li><strong>Dokumentace</strong></li>
    <li>&#128202; <a href="/dokumentace/data/">Data</a></li>
</ul>

Který soubor se vloží, řídí {% block docs_menu %} v docs_base_public.html – výchozí je docs/_menu_doc.html, tato stránka ho přebíjí na docs/_menu_design.html.

Vyhledávání

Vyhledávací formulář v dokumentaci je vždy součástí levého menu, pod jeho odkazy.

<form class="docs-search-form" action="{% url 'documentation_search' %}" method="get" role="search">
    <input type="search" name="q" placeholder="Hledat v dokumentaci">
    <button type="submit" class="add add-book">Hledat</button>
</form>