+ 
+
+
+ Mobile workers' activity and form submissions can be monitored in the Reports section of this CommCare HQ project space.
+
+ Read more about managing mobile workers on our
+
+ Help Site
+ .
+
+ Users should always know where they are and how to get back where they came from. +
+{% endblock intro %} + +{% block toc %} +
+ These standard navigation elements should be present on almost every page. The following assumes
+ that the page descends from hqwebapp/bootstrap5/base_section.html, which virtually all pages should.
+
+ The top navigation should always be visible to users. Individual tabs are defined in
+ tabclasses.py.
+ Which tab is highlighted depends on the url_prefix_formats defined for each tab. Which items
+ appear in a tab's dropdown is determined by dropdown_items.
+
+ The side navigation appears almost everywhere. Major exceptions are the dashboard, + which has no navigation, and app manager, which has a custom sidebar corresponding to the app's structure. + Other pages should almost certainly have a sidebar. +
+
+ The sidebar is also defined in
+ tabclasses.py,
+ controlled by the sidebar_items class methods.
+
+ Temporary sub-items that appear only when on a specific page, such as the "Create Form Data Export" item that
+ appears under the main "Export Form Data" item only when you're creating a new export, can be added using
+ the subpages property.
+
+ Dynamic item names, such as displaying the username when editing a web user, can be enabled by passing a
+ function to the menu item's title.
+
+ Breadcrumbs are defined by the parent_pages class method in a class-based view.
+ Standard pages should have a breadcrumb for the top nav section (e.g., "Data"), for the left sidebar section
+ if there is one (e.g., "Edit Data"), and for the page itself. Multi-step workflows such as case import should
+ also be reflected in breadcrumbs. All items in the breadcrumbs should be links, except for the last
+ (the current page).
+
+ A few pages override the page_breadcrumbs block defined in the template:
+ hqwebapp/bootstrap5/base_section.html. This should only be done in exceptional circumstances.
+
+ A page header at the top of the page's main content helps the user stay oriented, and this is a good place to + briefly introduce the user to the page and link to documentation. +
+
+ This is an area where the technical implementation isn't well-standardized. When possible, make sure you
+ page_title attribute is defined if using a class-based view
+ (see this example)
+ or passed into the template context if using a functional view.
+
+ For a class-based view, you would then (ideally) set the page_title block this way:
+ {% include 'styleguide/bootstrap5/code_html_non_working.html' with content=examples.page_title_block %}
+
+ Otherwise, you can set the page header manually with the following bit of HTML at the beginning of
+ {% verbatim %}{% block page_content %}{% endverbatim %}:
+
+ If a page has multiple sections, you have a few options to visually separate them: +
+tab (see docs).
+ Please avoid using pills for navigation as they look similar to
+ select toggles used in forms.
+ card (see docs).
+ + Below is an example of sectioning a page with tabs. This is the most preferred method of sectioning a page in HQ. +
+ {% include 'styleguide/bootstrap5/code_example.html' with content=examples.navs_tabs %} ++ Below is an example of sectioning a page with cards. +
+ {% include 'styleguide/bootstrap5/code_example.html' with content=examples.navs_cards %} +{% endblock content %} diff --git a/corehq/apps/styleguide/urls.py b/corehq/apps/styleguide/urls.py index 18ff354590ae..4e9a6b84d12a 100644 --- a/corehq/apps/styleguide/urls.py +++ b/corehq/apps/styleguide/urls.py @@ -80,4 +80,6 @@ name="styleguide_organisms_forms_b5"), url(r'^b5/organisms/tables/$', bootstrap5.styleguide_organisms_tables, name="styleguide_organisms_tables_b5"), + url(r'^b5/pages/navigation/$', bootstrap5.styleguide_pages_navigation, + name="styleguide_pages_navigation_b5"), ] diff --git a/corehq/apps/styleguide/views/bootstrap5.py b/corehq/apps/styleguide/views/bootstrap5.py index 5a671630b246..71a208085ab1 100644 --- a/corehq/apps/styleguide/views/bootstrap5.py +++ b/corehq/apps/styleguide/views/bootstrap5.py @@ -310,3 +310,17 @@ def styleguide_organisms_tables(request): }, }) return render(request, 'styleguide/bootstrap5/organisms/tables.html', context) + + +@use_bootstrap5 +def styleguide_pages_navigation(request): + context = get_navigation_context("styleguide_pages_navigation_b5") + context.update({ + 'examples': { + 'page_title_block': get_example_context('styleguide/bootstrap5/examples/page_title_block.html'), + 'page_header': get_example_context('styleguide/bootstrap5/examples/page_header.html'), + 'navs_cards': get_example_context('styleguide/bootstrap5/examples/navs_cards.html'), + 'navs_tabs': get_example_context('styleguide/bootstrap5/examples/navs_tabs.html'), + }, + }) + return render(request, 'styleguide/bootstrap5/pages/navigation.html', context)