-
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.
feat: apply new header and footer styles
- Loading branch information
1 parent
acc3d07
commit 8c00929
Showing
10 changed files
with
371 additions
and
61 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <footer class="iati-footer iati-brand-background"> | ||
|
|
||
| {# TODO: 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">Useful links</h2> | ||
| <div class="iati-footer-block__content"> | ||
| {# TODO: Any links to include here? #} | ||
| <ul> | ||
| <li><a href="#">Useful link</a></li> | ||
| <li><a href="#">Translation FAQs</a></li> | ||
| <li><a href="#">Another useful link</a></li> | ||
| <li><a href="#">Another even more useful longer link</a></li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="iati-footer__section"> | ||
| <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 iati-footer-block__content--columns"> | ||
| <p>Part of the IATI Unified Platform Code licensed under the GNU AGPL.</p> | ||
| <p>Documentation licensed under CC by 3.0</p> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p> | ||
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> | ||
| <p>Web v2.8.2</p> | ||
| <p>Services v2.8.0</p> | ||
| <p>API v2.4.0</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"> | ||
| {# TODO: "Privacy" or "Privacy Policy"? #} | ||
| <li><a href="https://iatistandard.org/en/privacy-policy/">Privacy Policy</a></li> | ||
| {# TODO: Should "Data removal" be in this list? Where should it link to? #} | ||
| {# <li><a href="#">Data removal</a></li> #} | ||
| <li> | ||
| <span> | ||
| {# TODO: What should the copyright block say? #} | ||
| {# © Copyright IATI 2024. All rights reserved #} | ||
| {{ copyright_block() }} | ||
| Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}. | ||
| </span> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
| {# TODO: Include country switcher now? #} | ||
| <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"> | ||
| <option>English</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <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,108 @@ | ||
| {# TODO: What links do we want here for docs sites? #} | ||
| {% set tool_nav_items = [ | ||
| {"text": "Tool Home", "link": "/"}, | ||
| ] %} | ||
|
|
||
| {% set general_nav_items = [ | ||
| {"text": "IATI Home", "link": "https://iatistandard.org/"}, | ||
| {"text": "News", "link": "https://iatistandard.org/news/"}, | ||
| {"text": "Events", "link": "https://iatistandard.org/events/"}, | ||
| {"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> | ||
| {% for nav_item in tool_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> | ||
| <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 %} | ||
| {# TODO: Include "Help Docs" for docs sites or not? #} | ||
| <li class="iati-mobile-nav__item"> | ||
| <a href="#" class="iati-mobile-nav__link">Help Docs</a> | ||
| </li> | ||
| </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="/_static/logo-colour.svg"> | ||
| </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"> | ||
|
|
||
| <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"> | ||
| <option>English</option> | ||
| </select> | ||
| </div> | ||
|
|
||
| <a href="#" class="header-button header-button--hide-mobile"> | ||
| <span class="header-button__title">Help docs</span> | ||
| <img class="header-button__icon" alt="" src="/_static/icon-info.svg"> | ||
| </a> | ||
|
|
||
| <a href="{{ pathto('search') }}" class="header-button"> | ||
| <span class="header-button__title">Search</span> | ||
| <img class="header-button__icon" alt="" src="/_static/icon-search.svg"> | ||
| </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"> | ||
| {% for nav_item in tool_nav_items %} | ||
| <li> | ||
| <a href="{{ nav_item['link'] }}" class="iati-tool-nav-link">{{ nav_item["text"] }}</a> | ||
| </li> | ||
| {% endfor %} | ||
| </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
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.
Oops, something went wrong.