-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #346 from torchbox/feature/twe-17-primary-nav-and-…
…header TWE-17 | FE | Primary nav and header
- Loading branch information
Showing
20 changed files
with
296 additions
and
498 deletions.
There are no files selected for viewing
43 changes: 12 additions & 31 deletions
43
tbx/project_styleguide/templates/patterns/navigation/components/primary-nav-mobile.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,16 @@ | ||
| {% load wagtailcore_tags %} | ||
|
|
||
| {% comment %} | ||
| The `child_display` has 3 possible values: | ||
| - hide_children - do not show a subnavigation | ||
| - show_up_to_level1 - show level one child pages | ||
| - show_up_to_level2 - show level one and level two child pages | ||
| {% endcomment %} | ||
|
|
||
| {% for item in primarynav %} | ||
| {% with children=item.value.page.get_children.live.public.in_menu.specific child_display=item.value.child_display_behaviour %} | ||
| <li class="primary-nav-mobile__item {% if children and child_display != 'hide_children' %}primary-nav-mobile__item--is-parent{% endif %}"> | ||
| {% with link=item.value %} | ||
| <a | ||
| class="primary-nav-mobile__link {% if children and child_display != 'hide_children' %}primary-nav-mobile__link--has-children{% else %}primary-nav-mobile__link--no-children{% endif %}" | ||
| {% if children and child_display != 'hide_children' %} | ||
| data-open-subnav aria-haspopup="true" aria-expanded="false" | ||
| {% endif %} | ||
| href="{% if link.page %}{% pageurl link.page %}{% elif link.external_link %}{{ link.external_link }}{% endif %}" | ||
| {% if forloop.last %}data-last-menu-item-mobile{% endif %} | ||
| > | ||
| <span class="primary-nav-mobile__text">{{ link.text }}</span> | ||
| {% if children and child_display != 'hide_children' %} | ||
| {# mobile arrow #} | ||
| {% include "patterns/atoms/icons/icon.html" with name="arrow" classname="primary-nav-mobile__icon-mobile" only %} | ||
| {% endif %} | ||
| </a> | ||
|
|
||
| {% if children and child_display != 'hide_children' %} | ||
| {% include "patterns/navigation/components/includes/subnav-menu-mobile.html" with links=children parent=link only %} | ||
| {% endif %} | ||
| {% endwith %} | ||
| </li> | ||
| {% endwith %} | ||
| <li class="primary-nav-mobile__item"> | ||
| {% with link=item.value %} | ||
| <a | ||
| class="primary-nav-mobile__link" | ||
| href="{% if link.page %}{% pageurl link.page %}{% elif link.external_link %}{{ link.external_link }}{% endif %}" | ||
| {% if forloop.last %}data-last-menu-item-primary-mobile{% endif %} | ||
| > | ||
| <span class="primary-nav-mobile__text">{{ link.text }}</span> | ||
| </a> | ||
| {% endwith %} | ||
| </li> | ||
| {% endfor %} | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 10 additions & 39 deletions
49
tbx/project_styleguide/templates/patterns/navigation/components/primary-nav.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,14 @@ | ||
| {% load wagtailcore_tags %} | ||
|
|
||
| {% comment %} | ||
| The `child_display` has 3 possible values: | ||
| - hide_children - do not show a subnavigation | ||
| - show_up_to_level1 - show level one child pages | ||
| - show_up_to_level2 - show level one and level two child pages | ||
| {% endcomment %} | ||
|
|
||
| {% for item in primarynav %} | ||
| {% with children=item.value.page.get_children.live.public.in_menu.specific child_display=item.value.child_display_behaviour %} | ||
| <li class="primary-nav-desktop__item {% if children and child_display != 'hide_children' %}primary-nav-desktop__item--is-parent{% endif %}" | ||
| {% if children and child_display != 'hide_children' %}data-has-subnav{% endif %} | ||
| > | ||
| {% with link=item.value %} | ||
| <a | ||
| class="primary-nav-desktop__link {% if children and child_display != 'hide_children' %}primary-nav-desktop__link--has-children{% else %}primary-nav-desktop__link--no-children{% endif %}" | ||
| {% if children and child_display != 'hide_children' %} | ||
| data-open-subnav aria-haspopup="true" aria-expanded="false" | ||
| {% endif %} | ||
| href="{% if link.page %}{% pageurl link.page %}{% elif link.external_link %}{{ link.external_link }}{% endif %}" | ||
| > | ||
| <span class="primary-nav-desktop__text">{{ link.text }}</span> | ||
| {% if children and child_display != 'hide_children' %} | ||
| {# desktop arrows #} | ||
| <div class="primary-nav-desktop__icon-wrapper"> | ||
| {% include "patterns/atoms/icons/icon.html" with name="chevron" classname="primary-nav-desktop__icon-closed" only %} | ||
| {% include "patterns/atoms/icons/icon.html" with name="arrow-short" classname="primary-nav-desktop__icon-hover" only %} | ||
| {% include "patterns/atoms/icons/icon.html" with name="arrow-tall" classname="primary-nav-desktop__icon-open" only %} | ||
| </div> | ||
| {% endif %} | ||
| </a> | ||
| {% if children and child_display == 'show_up_to_level1' %} | ||
| {# if we are only showing up to level 1, show a small dropdown #} | ||
| {% include "patterns/navigation/components/includes/subnav-menu-mini.html" with links=children last=forloop.last revcounter=forloop.revcounter only %} | ||
| {% elif children and child_display == 'show_up_to_level2' %} | ||
| {# if we are showing level 1 and level 2 children, show a wide dropdown #} | ||
| {% include "patterns/navigation/components/includes/subnav-menu.html" with links=children number=children|length only %} | ||
| {% endif %} | ||
| {% endwith %} | ||
| </li> | ||
| {% endwith %} | ||
| <li class="primary-nav-desktop__item"> | ||
| {% with link=item.value %} | ||
| <a | ||
| class="primary-nav-desktop__link" | ||
| href="{% if link.page %}{% pageurl link.page %}{% elif link.external_link %}{{ link.external_link }}{% endif %}" | ||
| > | ||
| {{ link.text }} | ||
| </a> | ||
| {% endwith %} | ||
| </li> | ||
| {% endfor %} |
93 changes: 1 addition & 92 deletions
93
tbx/project_styleguide/templates/patterns/navigation/components/primary-nav.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.