-
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.
Merge pull request #18 from IATI/design-system-upgrade
New header and footer
Showing
17 changed files
with
394 additions
and
73 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
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,55 @@ | ||
| <footer class="iati-footer iati-brand-background"> | ||
| <div class="iati-brand-background__content"> | ||
|
|
||
| <div class="iati-footer__section iati-footer__section--first"> | ||
| <div class="iati-footer__container"> | ||
| <div class="iati-footer-block"> | ||
| <h2 class="iati-footer-block__title">Additional information</h2> | ||
| <div class="iati-footer-block__content"> | ||
| <p>Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.</p> | ||
| {% if theme_github_repository %} | ||
| <p>Source code on <a href="{{ theme_github_repository }}">GitHub</a>.</p> | ||
| {% endif %} | ||
| <p>Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="iati-footer__section iati-footer__section--last"> | ||
| <div class="iati-footer__container"> | ||
| <nav> | ||
| <ul class="iati-piped-list iati-footer__legal-nav"> | ||
| <li><a href="https://iatistandard.org/en/privacy-policy/">Privacy Policy</a></li> | ||
| <li> | ||
| <span> | ||
| {{ copyright_block() }} | ||
| </span> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| {%- include "language-switcher.html" %} | ||
|
|
||
| <div class="iati-footer__social"> | ||
| <a | ||
| href="https://www.linkedin.com/company/international-aid-transparency-initiative/" | ||
| aria-label="LinkedIn" | ||
| > | ||
| <i class="iati-icon iati-icon--linkedin"></i> | ||
| </a> | ||
| <a href="https://twitter.com/IATI_aid" aria-label="Twitter"> | ||
| <i class="iati-icon iati-icon--twitter"></i> | ||
| </a> | ||
| <a | ||
| href="https://www.youtube.com/channel/UCAVH1gcgJXElsj8ENC-bDQQ" | ||
| aria-label="YouTube" | ||
| > | ||
| <i class="iati-icon iati-icon--youtube"></i> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </footer> |
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,85 @@ | ||
| {% set general_nav_items = [ | ||
| {"text": "About IATI", "link": "https://iatistandard.org/en/about/"}, | ||
| {"text": "Use Data", "link": "https://iatistandard.org/en/using-data/"}, | ||
| {"text": "Publish Data", "link": "https://iatistandard.org/en/guidance/publishing-data/"}, | ||
| {"text": "Contact", "link": "https://iatistandard.org/guidance/get-support/"}, | ||
| ] %} | ||
|
|
||
| <div class="iati-mobile-nav js-iati-mobile-nav"> | ||
| <div class="iati-mobile-nav__overlay js-iati-mobile-overlay"></div> | ||
| <nav class="iati-mobile-nav__menu"> | ||
| <div class="iati-mobile-nav__header"> | ||
| <h2 class="iati-mobile-nav__label">Menu</h2> | ||
| <button class="iati-menu-toggle iati-menu-toggle--close js-iati-menu-toggle-close"> | ||
| <span>Close</span> | ||
| </button> | ||
| </div> | ||
| <ul> | ||
| <li class="iati-mobile-nav__item"> | ||
| <a href="/" class="iati-mobile-nav__link">{{ _(project) }}</a> | ||
| </li> | ||
| </ul> | ||
| <ul> | ||
| {% for nav_item in general_nav_items %} | ||
| <li class="iati-mobile-nav__item"> | ||
| <a href="{{ nav_item['link'] }}" class="iati-mobile-nav__link">{{ nav_item["text"] }}</a> | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
|
|
||
| <header class="iati-header"> | ||
|
|
||
| <div class="iati-header__section iati-header__section--first"> | ||
| <div class="iati-header__container"> | ||
| <a href="https://iatistandard.org/" aria-label="Go to IATI homepage"> | ||
| <img class="iati-header__logo" alt="" src="{{ pathto('_static/logo-colour.svg', 1) }}"> | ||
| </a> | ||
| <nav class="iati-header__general-nav"> | ||
| <ul class="iati-piped-list"> | ||
| {% for nav_item in general_nav_items %} | ||
| <li> | ||
| <a href="{{ nav_item['link'] }}">{{ nav_item["text"] }}</a> | ||
| </li> | ||
| {% endfor %} | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="iati-header__section iati-header__section--last iati-brand-background"> | ||
| <div class="iati-header__container iati-brand-background__content"> | ||
|
|
||
| <div class="iati-header__actions"> | ||
|
|
||
| {%- include "language-switcher.html" %} | ||
|
|
||
| <a href="{{ pathto('search') }}" class="iati-button iati-button--light"> | ||
| <span>Search</span> | ||
| <img class="iati-button__icon" alt="" src="{{ pathto('_static/icon-search.svg', 1) }}"> | ||
| </a> | ||
|
|
||
| <button class="iati-menu-toggle iati-menu-toggle--open js-iati-menu-toggle-open"> | ||
| <span class="iati-menu-toggle__label">Menu</span> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="iati-header-title"> | ||
| <p class="iati-header-title__eyebrow">IATI Tools</p> | ||
| <p class="iati-header-title__heading">{{ _(project) }}</p> | ||
| </div> | ||
|
|
||
| <div class="iati-header__nav"> | ||
| <nav> | ||
| <ul class="iati-tool-nav"> | ||
| <li> | ||
| <a href="/" class="iati-tool-nav-link">{{ _(project) }}</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </header> |
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,10 @@ | ||
| <div class="iati-country-switcher"> | ||
| <label for="iati-country-switcher" class="iati-country-switcher__label">Choose your language</label> | ||
| <select id="iati-country-switcher" class="iati-country-switcher__control"> | ||
| {% for language_code in theme_languages %} | ||
| <option value="{{ language_code }}" {% if language_code == language %}selected{% endif %}> | ||
| {{- theme_languages[language_code] -}} | ||
| </option> | ||
| {% endfor %} | ||
| </select> | ||
| </div> |
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,69 @@ | ||
| (function () { | ||
| /** | ||
| * @param {Object} container DOM element, which will be hidden\displayed (required) | ||
| * @param {string} options the class to be toggled. | ||
| */ | ||
| class IatiMobileNav { | ||
| constructor(wrapper, openClass) { | ||
| this.wrapper = wrapper; | ||
| this.openClass = openClass; | ||
| const focusableElements = this.wrapper.querySelectorAll("a, button"); | ||
| this.firstElement = focusableElements[0]; | ||
| this.lastElement = focusableElements[focusableElements.length - 1]; | ||
| } | ||
|
|
||
| show = () => { | ||
| this.wrapper.removeAttribute("hidden"); | ||
| const reflow = this.wrapper.offsetHeight; | ||
| document.addEventListener("keydown", (e) => this.handleKeyDown(e)); | ||
| this.wrapper.classList.add(this.openClass); | ||
| setTimeout(() => { | ||
| this.firstElement.focus(); | ||
| }, 500); | ||
| }; | ||
|
|
||
| hide = (closeCallBack) => { | ||
| this.wrapper.classList.remove(this.openClass); | ||
| document.removeEventListener("keydown", (e) => this.handleKeyDown(e)); | ||
| setTimeout(() => { | ||
| this.wrapper.setAttribute("hidden", "hidden"); | ||
| closeCallBack(); | ||
| }, 500); | ||
| }; | ||
|
|
||
| handleKeyDown(event) { | ||
| if (event.key === "Tab") { | ||
| if (document.activeElement === this.firstElement && event.shiftKey) { | ||
| this.lastElement.focus(); | ||
| event.preventDefault(); | ||
| } | ||
| if (document.activeElement === this.lastElement && !event.shiftKey) { | ||
| this.firstElement.focus(); | ||
| event.preventDefault(); | ||
| } | ||
| } | ||
| if (event.key == "Escape") { | ||
| this.hide(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const iatiMobileNav = new IatiMobileNav( | ||
| document.querySelector(".js-iati-mobile-nav"), | ||
| "iati-mobile-nav--open" | ||
| ); | ||
|
|
||
| const overlay = document.querySelector(".js-iati-mobile-overlay"); | ||
| const menuOpenBtn = document.querySelector(".js-iati-menu-toggle-open"); | ||
| const menuCloseBtn = document.querySelector(".js-iati-menu-toggle-close"); | ||
| const restoreFocus = () => { | ||
| menuOpenBtn.focus(); | ||
| }; | ||
| menuOpenBtn.addEventListener("click", iatiMobileNav.show); | ||
| menuCloseBtn.addEventListener("click", () => | ||
| iatiMobileNav.hide(restoreFocus) | ||
| ); | ||
| overlay.addEventListener("click", () => iatiMobileNav.hide(restoreFocus)); | ||
| }); | ||
| })(); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,20 @@ | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const handleChange = (event) => { | ||
| const { value } = event.target; | ||
| const currentPath = window.location.pathname; | ||
| const countryCodeRegex = /^\/[a-z]{2}\//; | ||
| const currentPathWithoutCountryCode = currentPath.replace( | ||
| countryCodeRegex, | ||
| "/" | ||
| ); | ||
| const newPath = "/" + value + currentPathWithoutCountryCode; | ||
| event.target.selectedIndex = Array.from(event.target.options).findIndex( | ||
| (option) => option.hasAttribute("selected") | ||
| ); | ||
| window.location.pathname = newPath; | ||
| }; | ||
| const languageSwitchers = document.querySelectorAll("#iati-country-switcher"); | ||
| languageSwitchers.forEach((languageSwitcher) => { | ||
| languageSwitcher.addEventListener("change", handleChange); | ||
| }); | ||
| }); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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.
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