-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Nico Picchio <nico.picchio@digital.trade.gov.uk>
- Loading branch information
1 parent
95b8383
commit d5c82ce
Showing
5 changed files
with
181 additions
and
65 deletions.
There are no files selected for viewing
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
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
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 |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| {% load webpack_static from webpack_loader %} | ||
| {% if peoplefinder_profile %} | ||
| <a href="{% url 'profile-view' peoplefinder_profile.slug %}" | ||
| class="dwds-header-item dwds-header-profile"> | ||
| {% if peoplefinder_profile.profile_completion < 100 %} | ||
| <span>Your profile is {{ peoplefinder_profile.profile_completion|floatformat:0 }}% complete</span> | ||
| {% else %} | ||
| <span>Your profile</span> | ||
| {% endif %} | ||
| {% if peoplefinder_profile.photo %} | ||
| <img src="{{ peoplefinder_profile.photo_small.url }}" | ||
| alt="Profile image of {{ peoplefinder_profile.full_name }}"> | ||
| {% else %} | ||
| <img src="{% webpack_static 'no-photo.png' %}" alt="No photo"> | ||
| {% endif %} | ||
| </a> | ||
| {% endif %} |
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 |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <nav class="dwds-header-nav" aria-label="Top Level Navigation"> | ||
| {% for item in menu_items %} | ||
| <a class="dwds-header-item" | ||
| data-testid="main-menu-{{ item.text|lower }}" | ||
| href="{{ item.href }}" | ||
| {% if item.active_class %}data-active="true"{% endif %}>{{ item.text }}</a> | ||
| {% endfor %} | ||
| </nav> |
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,44 +1,138 @@ | ||
| // FIXME: Where should these styles live in the new design system? | ||
|
|
||
| .dwds-header-container { | ||
| border-bottom: 4px solid var(--dbt-red); | ||
| // Variables | ||
| --header-border-bottom: 4px solid var(--dbt-red); | ||
|
|
||
| background-color: var(--color-background); | ||
| border-bottom: var(--header-border-bottom); | ||
| } | ||
|
|
||
| .dwds-header, .dwds-header-menu { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| a { | ||
| color: black; | ||
| text-decoration: none; | ||
| } | ||
| } | ||
|
|
||
| .dwds-header { | ||
| display: grid; | ||
| grid-template-columns: min-content 1fr; | ||
| grid-template-rows: min-content min-content; | ||
| grid-template-areas: | ||
| "logo top" | ||
| "logo bottom"; | ||
|
|
||
| padding: var(--space) 0; | ||
| } | ||
|
|
||
| .dwds-header-logo { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: var(--s-4); | ||
| padding: var(--s-4) 0; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| &-logo { | ||
| grid-area: logo; | ||
| margin-right: 1rem; | ||
| .dwds-header-menu-toggle { | ||
| all: unset; | ||
| cursor: pointer; | ||
|
|
||
| &:focus, &:active { | ||
| background-color: var(--color-button-background-active); | ||
| } | ||
|
|
||
| &-top { | ||
| grid-area: top; | ||
| &::after { | ||
| content: " ⮟"; | ||
| } | ||
|
|
||
| &.is-open::after { | ||
| content: " ⮝"; | ||
| } | ||
| } | ||
|
|
||
| .dwds-header-menu { | ||
| display: none; | ||
|
|
||
| &.is-active { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| } | ||
|
|
||
| &-bottom { | ||
| grid-area: bottom; | ||
| .dwds-header-item { | ||
| vertical-align: middle; | ||
|
|
||
| padding: var(--s-3) 0; | ||
| } | ||
|
|
||
| .dwds-header-app-name { | ||
| display: none; | ||
| align-items: center; | ||
| font-size: var(--s2); | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .dwds-header-profile { | ||
| display: flex; | ||
| gap: var(--space); | ||
| align-items: center; | ||
|
|
||
| img { | ||
| width: 40px; | ||
| border-radius: 50%; | ||
| // display the profile image first | ||
| order: -1; | ||
| } | ||
| } | ||
|
|
||
| .dwds-header-nav { | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| a { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| padding: var(--s-3) 0; | ||
|
|
||
| font-weight: bold; | ||
| } | ||
|
|
||
| a[data-active] { | ||
| border-bottom: var(--header-border-bottom); | ||
| } | ||
| } | ||
|
|
||
| @media screen and (min-width: 770px) { | ||
| // hide the menu toggle | ||
| .dwds-header-menu-toggle { | ||
| display: none; | ||
| } | ||
|
|
||
| .dwds-header { | ||
| display: grid; | ||
| grid-template-columns: max-content 1fr; | ||
| padding: 0; | ||
| } | ||
|
|
||
| &-app-name { | ||
| flex-grow: 1; | ||
| .dwds-header-menu { | ||
| display: grid; | ||
| grid-template-columns: 1fr max-content; | ||
| grid-template-rows: min-content min-content; | ||
| } | ||
|
|
||
| &-nav-links { | ||
| flex-grow: 1; | ||
| .dwds-header-logo { | ||
| padding: var(--s-3); | ||
| } | ||
|
|
||
| .dwds-header-app-name { | ||
| display: flex; | ||
| } | ||
|
|
||
| .dwds-header-item { | ||
| padding: var(--s-3); | ||
| } | ||
|
|
||
| .dwds-header-nav { | ||
| flex-direction: row; | ||
|
|
||
| a { | ||
| padding: var(--s-3); | ||
| } | ||
| } | ||
| } |