From 42e928b95156607f6f91db4bec6a20c1b7136b8d Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Tue, 22 Oct 2024 16:54:12 +0300 Subject: [PATCH] feat: apply new header and footer styles --- iati_sphinx_theme/__init__.py | 1 + iati_sphinx_theme/footer.html | 90 ++++++++++++++++++ iati_sphinx_theme/header.html | 108 ++++++++++++++++++++++ iati_sphinx_theme/layout.html | 63 +------------ iati_sphinx_theme/static/header.js | 69 ++++++++++++++ iati_sphinx_theme/static/icon-info.svg | 5 + iati_sphinx_theme/static/icon-search.svg | 3 + iati_sphinx_theme/static/logo-colour.svg | 30 ++++++ iati_sphinx_theme/static/marque-white.svg | 59 ++++++++++++ styles/_layout.scss | 4 + 10 files changed, 371 insertions(+), 61 deletions(-) create mode 100644 iati_sphinx_theme/footer.html create mode 100644 iati_sphinx_theme/header.html create mode 100644 iati_sphinx_theme/static/header.js create mode 100644 iati_sphinx_theme/static/icon-info.svg create mode 100644 iati_sphinx_theme/static/icon-search.svg create mode 100644 iati_sphinx_theme/static/logo-colour.svg create mode 100644 iati_sphinx_theme/static/marque-white.svg diff --git a/iati_sphinx_theme/__init__.py b/iati_sphinx_theme/__init__.py index 1bb9d77..516e47c 100644 --- a/iati_sphinx_theme/__init__.py +++ b/iati_sphinx_theme/__init__.py @@ -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") diff --git a/iati_sphinx_theme/footer.html b/iati_sphinx_theme/footer.html new file mode 100644 index 0000000..82dc7af --- /dev/null +++ b/iati_sphinx_theme/footer.html @@ -0,0 +1,90 @@ + diff --git a/iati_sphinx_theme/header.html b/iati_sphinx_theme/header.html new file mode 100644 index 0000000..0f54e94 --- /dev/null +++ b/iati_sphinx_theme/header.html @@ -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/"}, +] %} + +
+
+ +
+ +
+ +
+
+ + + + +
+
+ +
+
+ +
+ +
+ + +
+ + + Help docs + + + + + Search + + + + +
+ +
+

IATI Tools

+

{{ _(project) }}

+
+ +
+ +
+
+
+ +
diff --git a/iati_sphinx_theme/layout.html b/iati_sphinx_theme/layout.html index 2e1f746..69dd5e1 100644 --- a/iati_sphinx_theme/layout.html +++ b/iati_sphinx_theme/layout.html @@ -7,26 +7,7 @@ {% endblock %} {%- block header %} -
-
-
- - - -
- -
-
- {{ _(project) }} -
-
+ {%- include "header.html" %} {% endblock %} {%- block relbar1 %}{% endblock %} @@ -49,45 +30,5 @@ {% endblock %} {%- block footer %} - + {%- include "footer.html" %} {%- endblock %} diff --git a/iati_sphinx_theme/static/header.js b/iati_sphinx_theme/static/header.js new file mode 100644 index 0000000..bc165da --- /dev/null +++ b/iati_sphinx_theme/static/header.js @@ -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)); + }); +})(); diff --git a/iati_sphinx_theme/static/icon-info.svg b/iati_sphinx_theme/static/icon-info.svg new file mode 100644 index 0000000..02f6aba --- /dev/null +++ b/iati_sphinx_theme/static/icon-info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/iati_sphinx_theme/static/icon-search.svg b/iati_sphinx_theme/static/icon-search.svg new file mode 100644 index 0000000..d7870d5 --- /dev/null +++ b/iati_sphinx_theme/static/icon-search.svg @@ -0,0 +1,3 @@ + + + diff --git a/iati_sphinx_theme/static/logo-colour.svg b/iati_sphinx_theme/static/logo-colour.svg new file mode 100644 index 0000000..b9a8b66 --- /dev/null +++ b/iati_sphinx_theme/static/logo-colour.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/iati_sphinx_theme/static/marque-white.svg b/iati_sphinx_theme/static/marque-white.svg new file mode 100644 index 0000000..d84543b --- /dev/null +++ b/iati_sphinx_theme/static/marque-white.svg @@ -0,0 +1,59 @@ + + + + + + + + + + + + + + + + diff --git a/styles/_layout.scss b/styles/_layout.scss index 0ac7a25..c272648 100644 --- a/styles/_layout.scss +++ b/styles/_layout.scss @@ -21,3 +21,7 @@ flex-grow: 1; padding: $padding-block; } + +.iati-brand-background { + --background-image: url("/_static/marque-white.svg"); +}