Skip to content

Commit

Permalink
feat: apply new header and footer styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@tillywoodfield
tillywoodfield committed Oct 24, 2024
1 parent 6fd52b3 commit 7f8b74a
Show file tree
Hide file tree
Showing 9 changed files with 372 additions and 61 deletions.
1 change: 1 addition & 0 deletions iati_sphinx_theme/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ def setup(app: sphinx.application.Sphinx) -> None:
app.add_html_theme("iati_sphinx_theme", path.abspath(path.dirname(__file__)))
app.config["html_permalinks_icon"] = "#"
app.config["html_favicon"] = "static/favicon-16x16.png"
app.add_js_file("header.js")
90 changes: 90 additions & 0 deletions iati_sphinx_theme/footer.html
View file
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>
108 changes: 108 additions & 0 deletions iati_sphinx_theme/header.html
View file
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="{{ 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">

<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="iati-button iati-button--light hide display--sm">
<span>Help docs</span>
<img class="iati-button__icon" alt="" src="{{ pathto('_static/icon-info.svg', 1) }}">
</a>

<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">
{% 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>
68 changes: 7 additions & 61 deletions iati_sphinx_theme/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,15 @@
{% if theme_plausible_domain %}
<script defer data-domain="{{ theme_plausible_domain }}" src="https://plausible.io/js/script.js"></script>
{% endif %}
<style>
.iati-brand-background {
--background-image: url("{{ pathto('marque-white.svg', 1) }}");
}
</style>
{% endblock %}

{%- block header %}
<div class="iati-title-bar">
<header class="iati-header">
<div>
<a href="https://iatistandard.org/">
<img
src="http://styles.iatistandard.org/assets/svg/source/logo-colour.svg"
class="iati-header__logo"
/>
</a>
</div>
<ul class="iati-header__nav">
<li class="iati-header__nav-item">
<a href="{{ pathto('search') }}">Search</a>
</li>
</ul>
</header>
<div class="iati-title-bar__title">
{{ _(project) }}
</div>
</div>
{%- include "header.html" %}
{% endblock %}

{%- block relbar1 %}{% endblock %}
Expand All @@ -49,45 +35,5 @@
{% endblock %}

{%- block footer %}
<footer class="iati-footer" role="contentinfo">
<div>
<a href="https://iatistandard.org/">
<img
src="http://styles.iatistandard.org/assets/svg/source/logo-white.svg"
class="iati-footer__logo"
/>
</a>
<div class="iati-footer__list">
<span class="iati-footer__list-title">Useful Links</span>
<ul>
<li><a href="https://iatistandard.org/en/contact/">Contact</a></li>
<li><a href="https://iatistandard.org/en/privacy-policy/">Privacy Policy</a></li>
</ul>
</div>
</div>
<hr />
<div>
<div>
{{- copyright_block() -}}
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> {{ sphinx_version }}.
</div>
<div class="iati-footer__social-icons">
<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>
<a
href="https://www.linkedin.com/company/international-aid-transparency-initiative/"
aria-label="LinkedIn"
>
<i class="iati-icon iati-icon--linkedin"></i>
</a>
</div>
</div>
</footer>
{%- include "footer.html" %}
{%- endblock %}
69 changes: 69 additions & 0 deletions iati_sphinx_theme/static/header.js
View file
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));
});
})();
5 changes: 5 additions & 0 deletions iati_sphinx_theme/static/icon-info.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions iati_sphinx_theme/static/icon-search.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7f8b74a

Please sign in to comment.