diff --git a/opentech/public/navigation/templates/navigation/primarynav.html b/opentech/public/navigation/templates/navigation/primarynav.html
index 8059ec4de2b390df18751a5704ed9e1a879d6de4..dad11caff2ccf5859618dbd877aed59e7bd9b9d2 100644
--- a/opentech/public/navigation/templates/navigation/primarynav.html
+++ b/opentech/public/navigation/templates/navigation/primarynav.html
@@ -2,24 +2,12 @@
<nav role="navigation" aria-label="Primary">
<ul class="nav nav--primary" role="menubar">
{% for link in primarynav %}
- {% with children=link.value.page.get_children.live.public.in_menu %}
- {% include_block link with has_children=children.exists class="primary" %}
- {% if children.exists %}
- <ul class="nav nav--subnav" role="menu">
- <li class="nav__item nav__item--back js-subnav-back">‹ Back</li>
- {% include_block link %}
- {% for child in children.all %}
- {% include "navigation/includes/menu_item.html" with page=child class="secondary" %}
- {% endfor %}
- </ul>
- {% endif %}
- {% endwith %}
+ {% include_block link with class="primary" %}
{% endfor %}
</ul>
</nav>
-<a href="/apply" class="link link--button-transparent link--mobile-standout">
+<a href="#" class="link link--button-transparent link--mobile-standout">
<svg class="icon"><use xlink:href="#person-icon"></use></svg>
Log in
</a>
-<a href="/apply" class="link link--button-secondary link--mobile-standout">Apply</a>
-
+<a href="#" class="link link--button-secondary link--mobile-standout">Apply</a>
diff --git a/opentech/static_src/.babelrc b/opentech/static_src/.babelrc
new file mode 100644
index 0000000000000000000000000000000000000000..c51dbfb2796621bf77859cc0bf76d080a1f286e9
--- /dev/null
+++ b/opentech/static_src/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ [ "es2015", { "modules": false } ]
+ ],
+ "plugins": ["external-helpers"]
+}
diff --git a/opentech/static_src/src/.babelrc b/opentech/static_src/src/.babelrc
deleted file mode 100644
index 97bccc635bfb23a6287cacdd8a7442c0dfef3653..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/.babelrc
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "presets": [
- [ "es2015", { "modules": false } ]
- ],
- "plugins": ["external-helpers"]
-}
diff --git a/opentech/static_src/src/javascript/components/mobile-menu.js b/opentech/static_src/src/javascript/components/mobile-menu.js
index 3c01a858d4da328331185a40c02c893a7650e6a7..56de75c65b265ae429dbad33bca81c7f35063f9b 100644
--- a/opentech/static_src/src/javascript/components/mobile-menu.js
+++ b/opentech/static_src/src/javascript/components/mobile-menu.js
@@ -21,9 +21,6 @@ class MobileMenu {
// toggle mobile menu
this.mobileMenu[0].classList.toggle('is-visible');
- // toggle modifier to change position of the search div when the mobile menu is open
- this.search[0].classList.toggle('header__search--mobile-menu-open');
-
// reset the search whenever the mobile menu is toggled
if(this.search[0].classList.contains('is-visible')){
this.search[0].classList.toggle('is-visible');
@@ -32,8 +29,6 @@ class MobileMenu {
// reset the search show/hide icons
if(this.mobileMenu[0].classList.contains('is-visible')){
- document.querySelector('.header__icon--open-search-menu-open').classList.remove('is-hidden');
- document.querySelector('.header__icon--close-search-menu-open').classList.remove('is-unhidden');
document.querySelector('.header__icon--open-search-menu-closed').classList.remove('is-hidden');
document.querySelector('.header__icon--close-search-menu-closed').classList.remove('is-unhidden');
}
diff --git a/opentech/static_src/src/javascript/components/mobile-search.js b/opentech/static_src/src/javascript/components/mobile-search.js
new file mode 100644
index 0000000000000000000000000000000000000000..b72e2d83a5a2ed2c375eafba6cb7f2d3c055abc8
--- /dev/null
+++ b/opentech/static_src/src/javascript/components/mobile-search.js
@@ -0,0 +1,34 @@
+class MobileSearch {
+ static selector() {
+ return '.js-mobile-search-toggle';
+ }
+
+ constructor(node, mobileMenu, searchForm, searchToggleButton) {
+ this.node = node;
+ this.mobileMenu = mobileMenu[0];
+ this.searchForm = searchForm[0];
+ this.searchToggleButton = searchToggleButton[0];
+ this.bindEventListeners();
+ }
+
+ bindEventListeners() {
+ this.node.click(this.toggle.bind(this));
+ }
+
+ toggle() {
+ // hide the mobile menu
+ this.mobileMenu.classList.remove('is-visible');
+
+ // wait for the mobile menu to close
+ setTimeout(() => {
+ // open the search
+ this.searchForm.classList.add('is-visible');
+
+ // swap the icons
+ this.searchToggleButton.querySelector('.header__icon--open-search').classList.add('is-hidden');
+ this.searchToggleButton.querySelector('.header__icon--close-search').classList.add('is-unhidden');
+ }, 250);
+ }
+}
+
+export default MobileSearch;
diff --git a/opentech/static_src/src/javascript/components/search.js b/opentech/static_src/src/javascript/components/search.js
index b36fff10f5c4da79c1ecee2f8edde1ec815da2f6..bd67e2da511ddb471e0ca5833c28742f88ec7652 100644
--- a/opentech/static_src/src/javascript/components/search.js
+++ b/opentech/static_src/src/javascript/components/search.js
@@ -21,9 +21,6 @@ class Search {
this.node[0].querySelector('.header__icon--open-search').classList.toggle('is-hidden');
this.node[0].querySelector('.header__icon--close-search').classList.toggle('is-unhidden');
- // add modifier to header__inner when the menu is open to style search element
- document.querySelector('.header__inner--menu-open').classList.toggle('header__inner--search-open');
-
// add modifier to header to be able to change header icon colours
document.querySelector('.header').classList.toggle('search-open');
}
diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 743ab06f115464241b2deac4872de0bb7b7da5d2..a3d4f3a4a7accbdb5dd50d3c8b8b67e32e87a145 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -1,6 +1,7 @@
import $ from './globals';
import MobileMenu from './components/mobile-menu';
import Search from './components/search';
+import MobileSearch from './components/mobile-search';
$(function () {
$(MobileMenu.selector()).each((index, el) => {
@@ -10,4 +11,8 @@ $(function () {
$(Search.selector()).each((index, el) => {
new Search($(el), $('.header__search'));
});
+
+ $(MobileSearch.selector()).each((index, el) => {
+ new MobileSearch($(el), $('.header__menus--mobile'), $('.header__search'), $('.js-search-toggle'));
+ });
});
diff --git a/opentech/static_src/src/sass/base/_base.scss b/opentech/static_src/src/sass/base/_base.scss
index 59ca2a341f5dda54427ede10628eb308433606be..e2b5f673df1b6a4e0b7d72c065d227dece8de76a 100755
--- a/opentech/static_src/src/sass/base/_base.scss
+++ b/opentech/static_src/src/sass/base/_base.scss
@@ -83,3 +83,15 @@ ol {
%is-unhidden {
display: block;
}
+
+.overlay,
+%overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 5;
+ width: 100%;
+ background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.72) 0%, rgba(116, 116, 118, 0) 96%);
+ content: '';
+ opacity: 0.3;
+}
diff --git a/opentech/static_src/src/sass/components/_button.scss b/opentech/static_src/src/sass/components/_button.scss
index 19e7322e6f5e92c2044a7288973317b443105ae8..5d59d72e8990be7775d9ceaf8ddef2d151a4091c 100644
--- a/opentech/static_src/src/sass/components/_button.scss
+++ b/opentech/static_src/src/sass/components/_button.scss
@@ -27,24 +27,36 @@
}
&--narrow {
- padding: 5px 15px;
+ padding: 5px;
font-size: 15px;
+
+ @include media-query(tablet-landscape) {
+ padding: 5px 15px;
+ }
}
// cannot conform to BEM here in order to be able to override google button styles
&--google-translate {
- width: 180px;
+ width: 160px;
margin-left: 10px;
+ @include media-query(tablet-landscape) {
+ width: 180px;
+ }
+
.goog-te-gadget-simple {
@include button(transparent, $color--white);
- padding: 5px 15px;
+ padding: 5px;
font-family: $font--primary;
font-size: 15px;
font-weight: $weight--bold;
border: 1px solid $color--white;
transition: background, color, $transition;
+ @include media-query(tablet-landscape) {
+ padding: 5px 15px;
+ }
+
&:hover {
.goog-te-menu-value {
span {
diff --git a/opentech/static_src/src/sass/components/_nav.scss b/opentech/static_src/src/sass/components/_nav.scss
index b4d94ecacce52a5dd8491c4ce88a46b7fe2f9f6b..1cc45182ec616825a5533a89a919307b45b5e674 100644
--- a/opentech/static_src/src/sass/components/_nav.scss
+++ b/opentech/static_src/src/sass/components/_nav.scss
@@ -144,7 +144,7 @@
&__link {
display: inline-block;
- padding: 20px 15px;
+ padding: 20px 10px;
color: $color--white;
border-bottom: 1px solid transparent;
transition: color, border $transition;
diff --git a/opentech/static_src/src/sass/components/_wrapper.scss b/opentech/static_src/src/sass/components/_wrapper.scss
index 91d02d6555ef754288dc69452a427259cb86f16b..3280f6f37cd6bae9a1b5b8404cd8b37dc2ecf460 100644
--- a/opentech/static_src/src/sass/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/components/_wrapper.scss
@@ -70,7 +70,7 @@
&--dark-bg {
padding: 2rem 20px;
color: $color--white;
- background-color: $color--mustard;
+ background-color: $color--dark-grey;
@include media-query(tablet-portrait) {
padding: 4rem 20px;
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index 9fed8c40fc5dcab5fd8a493d06a03a1f3da3bf46..6642e28a1f81ca8344f7b225c253ef57201b3395 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/opentech/static_src/src/sass/layout/_header.scss
@@ -1,8 +1,14 @@
.header {
position: relative;
+ min-height: 300px;
padding: 10px;
background-color: $color--primary;
+ &::before {
+ @extend %overlay;
+ height: 300px;
+ }
+
@include media-query(tablet-portrait) {
height: 410px;
padding: 20px;
@@ -21,7 +27,9 @@
}
&__title {
+ margin: 0;
color: $color--white;
+ text-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
@@ -46,10 +54,6 @@
background: transparent;
transition: background $transition;
}
-
- &--search-open {
- background: $color--dark-blue;
- }
}
&__menus {
@@ -162,12 +166,6 @@
height: 180px;
padding-bottom: 50px;
background: $color--dark-blue;
-
- &--mobile-menu-open {
- top: 80px;
- z-index: 12;
- height: 120px;
- }
}
&__button-container {
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 7b16d2cf96d14c1f3f02997d37bd9d8b43b744de..e2699382f6746b87218a6f5c22d40b4f73d177b0 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -1,5 +1,5 @@
{% load static wagtailuserbar wagtailcore_tags wagtailimages_tags navigation_tags util_tags %}<!doctype html>
-<html class="no-js" lang="">
+<html class="no-js" lang="en">
<head>
{# TODO fallbacks if page is not defined e.g. for 404 page #}
<meta charset="utf-8" />
@@ -77,7 +77,7 @@
<a href="#" class="link link--fixed-apply">Apply</a>
<div class="header__inner wrapper wrapper--large">
- <a href="{% slugurl 'home' %}">
+ <a href="{% slugurl 'home' %}" aria-label="Home link">
<svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop"></use></svg>
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
@@ -95,7 +95,7 @@
<section class="header__menus header__menus--desktop">
{% primarynav %}
- <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true">
+ <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true" aria-label="Toggle desktop search">
<svg class="header__icon header__icon--open-search icon"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search icon"><use xlink:href="#cross"></use></svg>
</button>
@@ -103,13 +103,12 @@
<section class="header__menus header__menus--mobile">
<div class="header__inner header__inner--menu-open">
- <a href="{% slugurl 'home' %}">
+ <a href="{% slugurl 'home' %}" aria-label="Home link">
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
<div class="header__inner header__inner--mobile-buttons">
- <button class="button js-search-toggle" aria-haspopup="true">
+ <button class="button js-mobile-search-toggle" aria-haspopup="true" aria-label="Toggle mobile search">
<svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
- <svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
<button class="button button--left-space js-mobile-menu-close">
<svg class="header__icon header__icon--cross icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
@@ -118,6 +117,7 @@
</div>
{% primarynav %}
</section>
+
<div class="header__button-container">
<a href="#" class="button button--transparent button--narrow button--contains-icons">
<svg class="icon icon--person"><use xlink:href="#person-icon"></use></svg>
@@ -129,10 +129,10 @@
<div class="header__search">
<form action="{% url 'search' %}" method="get" role="search" class="form form--header-search-desktop">
- <button class="button" type="submit">
+ <button class="button" type="submit" aria-label="Search">
<svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
</button>
- <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
+ <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}" aria-label="Search input">
</form>
</div>
@@ -208,11 +208,11 @@
<a class="link link--button link--button-transparent" href="https://run.ooni.io/nettest?tn=web_connectivity&ta=%7B%22urls%22%3A%5B%22https%3A%2F%2Fwww.opentech.fund%2F%22%5D%7D&mv=1.2.0">Run OONI!</a>
<div class="footer__credits">
- <a href="https://www.bbg.gov/">
+ <a href="https://www.bbg.gov/" aria-label="Link to the Broadcasting Board of Governors website">
<svg class="icon icon--footer-credit"><use xlink:href="#bbg-logo"></use></svg>
</a>
- <a href="http://www.rfa.org/english/">
+ <a href="http://www.rfa.org/english/" aria-label="Link to the Radio Free Asia website">
<img src="{% static 'images/radio-free-asia-logo.svg' %}" alt="logo fo radio free asia">
</a>
</div>