Commit 3ca2b87c authored by Emma's avatar Emma 🏳🌈

redesign site nav w/search, no-js accessible

parent d5b222d1
Pipeline #54151202 passed with stages
in 8 minutes and 49 seconds
@import '../_variables';
.dropdown {
position: relative;
@media not screen and (min-width: @desktop-min-width) {
position: static;
}
&__arrow::after {
border-left: 0.5ch solid transparent;
border-right: 0.5ch solid transparent;
......@@ -23,30 +17,44 @@
border-top: none;
}
&__menu {
display: none;
.dropdown-menu() {
position: absolute;
left: 0;
right: auto;
z-index: 100;
}
@media not screen and (min-width: @desktop-min-width) {
width: 100%;
// desktop menus
@media screen and (min-width: @desktop-min-width) {
&:not(&--mobile-only) {
position: relative;
}
}
&--right > &__menu {
left: unset;
right: 0;
}
.js &:not(&--mobile-only):not(&--expanded) > &__menu,
.no-js &:not(&--mobile-only):not(:hover) > &__menu {
display: none;
}
// js toggle
&--expanded > &__menu {
display: block;
&:not(&--mobile-only) > &__menu {
.dropdown-menu();
}
&--right:not(&--mobile-only) > &__menu {
left: auto;
right: 0;
}
}
// toggle dropdown by hovering when JS isn't available
.no-js &:hover > &__menu {
display: block;
// mobile menus
@media not screen and (min-width: @desktop-min-width) {
&__menu {
.dropdown-menu();
width: 100%;
}
.js &:not(&--expanded) > &__menu,
.no-js &:not(:hover) > &__menu {
display: none;
}
}
}
@import (reference) '../_mixins';
@import (reference) '../_variables';
.site-nav {
background-color: var(--primary);
display: flex;
flex-direction: column;
margin-bottom: 1rem;
@media screen and (min-width: @desktop-min-width) {
flex-direction: row;
padding: 0 1rem;
&__container {
display: flex;
width: 100%;
}
&__logo,
&__mobile-toggle,
&__link {
.unbuttonize();
color: var(--primary-fg);
display: block;
cursor: pointer;
display: inline-block;
font-size: @nav-font-size;
white-space: nowrap;
padding: 0.875em 1em;
position: relative;
&--active::after {
background-color: var(--primary-fg);
bottom: 1px;
content: '';
height: 2px;
left: 0;
position: absolute;
width: 100%;
}
}
&__logo {
font-weight: bold;
padding: 1rem;
&__has-notifications {
background-color: var(--notification);
}
&__mobile-toggle {
padding: 1rem;
&--has-notifications {
background-color: var(--notification);
}
&__search-input {
border-color: transparent !important;
border-radius: 8rem !important;
padding-left: 2.5rem !important;
width: 100% !important;
@media screen and (min-width: @desktop-min-width) {
display: none;
&:not(:focus) {
background-color: transparent !important;
border-color: var(--primary-fg) !important;
color: var(--primary-fg) !important;
}
}
&__link {
padding: 0.5rem 1rem;
&__search-label {
cursor: text;
padding: 0.5rem 0.75rem;
position: absolute;
z-index: 1;
}
@media screen and (min-width: @desktop-min-width) {
padding: 1rem;
}
&__search-row:not(:focus-within) &__search-label {
color: var(--primary-fg);
}
// holds logo and mobile toggle
&__header {
display: flex;
justify-content: space-between;
.no-js &__mobile-toggle:hover,
.js &__mobile-hidden.dropdown--extended > &__mobile-toggle {
background-color: var(--primary-alt);
}
// holds the menus, hidden on mobile until toggled
&__inner {
display: none;
// desktop styles
@media screen and (min-width: @desktop-min-width) {
&__container {
padding: 0 1rem;
}
&--mobile-visible {
&__menu {
display: flex;
flex-direction: column;
}
@media screen and (min-width: @desktop-min-width) {
&__search {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 0.5rem;
}
}
// one on each side
&__menu {
display: flex;
flex-direction: column;
// mobile styles
@media not screen and (min-width: @desktop-min-width) {
&__container > * {
flex: 1 0 auto;
}
@media screen and (min-width: @desktop-min-width) {
flex-direction: row;
&__link {
padding-left: 0;
padding-right: 0;
text-align: center;
width: 100%;
}
}
// menu item
&__item {
display: block;
.no-js &__mobile-hidden:hover,
.js &__mobile-hidden.dropdown--extended {
background-color: var(--primary-alt);
}
&__mobile-toggle + * {
background-color: var(--primary-alt);
position: absolute;
left: 0;
right: 0;
}
&__header {
order: 1;
}
&__search {
display: block;
order: 2;
}
&__user-menu {
display: flex;
flex: 3 0 auto;
order: 3;
> * {
flex: 1 0 auto;
}
}
&__main-menu-container {
order: 4;
}
&__main-menu {
flex-direction: column;
}
&__main-menu &__link {
padding: 0.5rem 1rem;
text-align: left;
&--active::after {
top: 0;
left: 2px;
bottom: unset;
width: 2px;
height: 100%;
}
}
&__link {
display: block;
}
&--has-notifications {
background-color: var(--notification);
&__search-row {
padding: 0.5rem 1rem;
}
}
.no-js &__item.dropdown:hover > .dropdown__toggle,
.js &__item.dropdown--expanded > .dropdown__toggle {
.no-js :hover > &__link.dropdown__toggle,
.js .dropdown--expanded > &__link.dropdown__toggle {
background-color: var(--primary-alt);
}
}
......@@ -9,7 +9,8 @@
&[type="text"],
&[type="password"],
&[type="email"],
&[type="url"] {
&[type="url"],
&[type="search"] {
-webkit-appearance: none; // disable ugly shade on iOS
border-radius: 0; // disable rounded corners on iOS
max-width: 100%;
......
@import (reference) '../_variables';
.no-desktop {
@media screen and (min-width: @desktop-min-width) {
display: none !important;
}
}
// remove bottom margin that is applied to many block elements
.no-margin {
margin-bottom: 0 !important;
}
@import (reference) '../_variables';
.no-mobile {
@media not screen and (min-width: @desktop-min-width) {
display: none !important;
}
}
@import '../_mixins';
.menu-link {
.unbuttonize();
cursor: pointer; // for buttons
color: var(--text);
display: block;
......
......@@ -36,6 +36,8 @@
@import '_form/required-indicator';
@import '_utilities/break-text';
@import '_utilities/no-desktop';
@import '_utilities/no-mobile';
@import '_utilities/no-underline';
@import '_utilities/no-wrap';
@import '_utilities/text-align';
......
......@@ -191,6 +191,18 @@
"css": "filter",
"code": 61616,
"src": "fontawesome"
},
{
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
"css": "search",
"code": 59410,
"src": "fontawesome"
},
{
"uid": "d7271d490b71df4311e32cdacae8b331",
"css": "home",
"code": 59411,
"src": "fontawesome"
}
]
}
\ No newline at end of file
......@@ -16,6 +16,7 @@
<symbol id="forward" viewBox="0 0 1000 1000"><path d="M1000 357q0 15-11 25L704 668q-11 11-25 11t-25-11-11-25V500H518q-55 0-98 3t-86 12-74 24-59 39-45 56-27 77-10 101q0 31 3 69 0 4 2 13t1 15q0 8-5 14t-13 6q-9 0-15-10-4-5-8-12t-7-17-6-13Q0 718 0 625q0-111 30-186 90-225 488-225h125V71q0-14 11-25t25-10 25 10l285 286q11 11 11 25z"/></symbol>
<symbol id="hammer" viewBox="0 0 1000 1000"><path d="M988 857q0 30-20 50l-60 61q-22 20-51 20t-50-20L604 764q-21-20-21-50 0-29 24-53L464 518l-70 70q-8 8-19 8t-19-8l7 7 7 7 6 6q5 5 5 8t4 8 3 9 0 10q0 21-15 38-2 1-9 10t-11 11-10 9-13 9-12 5-14 3q-23 0-38-16L38 484q-16-15-16-38 0-7 3-14t5-12 9-13 9-10 11-11 10-9q17-15 38-15h10q4 0 9 3t8 4 8 5 6 6 7 7 7 7q-8-8-8-19t8-19l194-194q8-8 19-8t19 8l-7-7-7-7q-1-1-6-7t-5-7-3-8-4-9 0-10q0-21 15-38 2-2 9-10t11-11 10-10 13-8 12-5 14-3q23 0 38 16l228 228q16 15 16 38 0 7-3 14t-5 12-8 13-10 10-11 11-10 9q-17 15-38 15h-10q-4 0-9-4t-8-3-7-5-7-6-7-7-7-7q8 8 8 19t-8 19l-70 70 143 143q24-24 53-24t51 21l203 202q20 22 20 51z"/></symbol>
<symbol id="hashtag" viewBox="0 0 1000 1000"><path d="M553 571l36-142H447l-36 142h142zm429-281l-32 125q-4 14-17 14H751l-36 142h173q9 0 14 7 6 8 4 16l-32 125q-2 13-17 13H675l-45 183q-4 14-18 14H487q-9 0-14-7t-4-16l44-174H371l-45 183q-4 14-17 14H183q-8 0-14-7-5-7-3-16l43-174H36q-9 0-14-7-5-6-4-15l32-125q4-14 17-14h182l36-142H112q-9 0-14-7-6-8-4-16l32-125q2-13 17-13h182l46-183q3-14 17-14h125q9 0 14 7t4 16l-44 174h142l45-183q4-14 18-14h125q8 0 14 7 5 7 3 16l-43 174h173q9 0 14 7 5 6 4 15z"/></symbol>
<symbol id="home" viewBox="0 0 928.6 1000"><path d="M786 554v267q0 15-11 25t-25 11H536V643H393v214H179q-15 0-25-11t-11-25V554v-2-2l321-264 321 264q1 1 1 4zm124-39l-34 41q-5 5-12 6h-2q-7 0-12-3L464 237 78 559q-7 4-13 3-7-1-12-6l-35-41q-4-6-3-13t6-12l401-334q18-15 42-15t43 15l136 113V161q0-8 5-13t13-5h107q8 0 13 5t5 13v227l122 102q6 4 6 12t-4 13z"/></symbol>
<symbol id="link" viewBox="0 0 928.6 1000"><path d="M813 679q0-23-16-38L681 525q-16-16-38-16-24 0-40 18l10 10 12 12q3 3 9 11t7 14 2 15q0 23-16 38t-38 16q-8 0-15-2t-14-7-11-9-12-12-10-10q-19 17-19 40t16 38l115 116q15 15 38 15 22 0 38-15l82-81q16-16 16-37zM420 285q0-22-15-38L290 132q-16-16-38-16t-38 15l-82 82q-16 15-16 37t16 38l116 116q15 15 38 15t40-17l-11-11-12-12q-3-3-8-10t-7-14-2-16q0-22 15-38t38-15q9 0 16 2t14 7 11 8 12 12 10 11q18-17 18-41zm500 394q0 66-48 113l-82 81q-46 47-113 47-68 0-114-48L448 757q-46-47-46-114 0-68 49-116l-49-49q-48 49-116 49-67 0-114-47L56 364Q9 317 9 250t47-113l82-82Q185 9 252 9t114 47l115 116q46 46 46 113 0 69-49 117l49 49q48-49 116-49 67 0 114 47l116 116q47 47 47 114z"/></symbol>
<symbol id="lock-open" viewBox="0 0 928.6 1000"><path d="M929 321v143q0 15-11 25t-25 11h-36q-14 0-25-11t-11-25V321q0-59-41-101t-101-41-101 41-42 101v108h53q23 0 38 15t16 38v322q0 22-16 37t-38 16H54q-23 0-38-16T0 804V482q0-22 16-38t38-15h375V321q0-103 73-176t177-74 176 74 74 176z"/></symbol>
<symbol id="lock" viewBox="0 0 642.9 1000"><path d="M179 429h285V321q0-59-42-101t-101-41-101 41-41 101v108zm464 53v322q0 22-16 37t-38 16H54q-23 0-38-16T0 804V482q0-22 16-38t38-15h17V321q0-102 74-176t176-74 177 74 73 176v108h18q23 0 38 15t16 38z"/></symbol>
......@@ -25,6 +26,7 @@
<symbol id="pencil" viewBox="0 0 857.1 1000"><path d="M203 857l50-51-131-131-51 51v60h72v71h60zm291-518q0-12-12-12-5 0-9 4L170 633q-4 4-4 10 0 12 13 12 5 0 9-4l303-302q3-4 3-10zm-30-107l232 232-464 465H0V696zm381 54q0 29-20 50l-93 93-232-233 93-92q20-21 50-21 29 0 51 21l131 131q20 22 20 51z"/></symbol>
<symbol id="pin" viewBox="0 0 834 1000"><path d="M573 813q0 23-15 38t-37 15q-21 0-37-16L315 681 0 917l236-315L68 433q-24-23-12-56 14-32 48-32 157 0 270-57 90-45 151-171 9-24 36-32t50 13l208 209q21 23 14 50t-32 36q-127 63-172 152-56 110-56 268z"/></symbol>
<symbol id="plus" viewBox="0 0 785.7 1000"><path d="M786 411v107q0 22-16 38t-38 15H500v233q0 22-16 37t-38 16H339q-22 0-38-16t-15-37V571H54q-23 0-38-15T0 518V411q0-23 16-38t38-16h232V125q0-22 15-38t38-16h107q23 0 38 16t16 38v232h232q23 0 38 16t16 38z"/></symbol>
<symbol id="search" viewBox="0 0 928.6 1000"><path d="M643 464q0-103-73-176t-177-74-177 74-73 176 73 177 177 73 177-73 73-177zm286 465q0 29-22 50t-50 21q-30 0-50-21L616 788q-100 69-223 69-80 0-153-31t-125-84-84-125T0 464t31-152 84-126 125-84 153-31 153 31 125 84 84 126 31 152q0 123-69 223l191 191q21 21 21 51z"/></symbol>
<symbol id="settings" viewBox="0 0 1071.4 1000"><path d="M500 500q0-59-42-101t-101-42-101 42-42 101 42 101 101 42 101-42 42-101zm429 286q0-29-22-51t-50-21-50 21-21 51q0 29 21 50t50 21 51-21 21-50zm0-572q0-29-22-50t-50-21-50 21-21 50q0 30 21 51t50 21 51-21 21-51zM714 449v103q0 6-4 11t-8 6l-87 14q-6 19-18 42 19 27 50 64 4 6 4 11 0 7-4 11-12 17-46 50t-43 33q-7 0-12-4l-64-50q-21 11-43 17-6 60-13 87-4 13-17 13H305q-6 0-11-4t-5-10l-13-85q-19-6-42-18l-66 50q-4 4-11 4-6 0-12-4-80-75-80-90 0-5 4-10 5-8 23-30t26-34q-13-24-20-46l-85-13q-5-1-9-5t-4-11V447q0-5 4-10t9-6l86-14q7-19 18-42-19-27-50-64-4-6-4-11 0-7 4-12 12-16 46-49t44-33q6 0 12 4l64 50q19-10 43-18 6-60 13-86 3-13 16-13h104q6 0 11 4t6 10l13 85q19 6 42 17l65-49q5-4 12-4 6 0 11 4 81 75 81 90 0 4-4 10-7 9-24 30t-25 34q13 27 19 46l85 12q6 2 9 6t4 11zm357 298v78q0 9-83 17-6 15-16 29 28 63 28 77 0 2-2 4-68 40-69 40-5 0-26-27t-29-37q-11 1-17 1t-17-1q-7 11-29 37t-25 27q-1 0-69-40-3-2-3-4 0-14 29-77-10-14-17-29-83-8-83-17v-78q0-9 83-18 7-16 17-29-29-63-29-77 0-2 3-4 2-1 19-11t33-19 17-9q4 0 25 26t29 38q12-1 17-1t17 1q28-40 51-63l4-1q2 0 69 39 2 2 2 4 0 14-28 77 9 13 16 29 83 9 83 18zm0-572v78q0 9-83 18-6 15-16 29 28 63 28 77 0 2-2 4-68 39-69 39-5 0-26-26t-29-38q-11 1-17 1t-17-1q-7 12-29 38t-25 26q-1 0-69-39-3-2-3-4 0-14 29-77-10-14-17-29-83-9-83-18v-78q0-9 83-17 7-16 17-29-29-63-29-77 0-2 3-4 2-1 19-11t33-19 17-9q4 0 25 26t29 37q12-1 17-1t17 1q28-39 51-62l4-1q2 0 69 39 2 2 2 4 0 14-28 77 9 13 16 29 83 8 83 17z"/></symbol>
<symbol id="sitemap" viewBox="0 0 1000 1000"><path d="M1000 696v179q0 22-16 38t-38 16H768q-22 0-38-16t-16-38V696q0-22 16-38t38-15h53V536H536v107h53q23 0 38 15t16 38v179q0 22-16 38t-38 16H411q-23 0-38-16t-16-38V696q0-22 16-38t38-15h53V536H179v107h53q23 0 38 15t16 38v179q0 22-16 38t-38 16H54q-23 0-38-16T0 875V696q0-22 16-38t38-15h53V536q0-29 21-51t51-21h285V357h-53q-23 0-38-16t-16-37V125q0-22 16-38t38-16h178q23 0 38 16t16 38v179q0 22-16 37t-38 16h-53v107h285q29 0 51 21t21 51v107h53q23 0 38 15t16 38z"/></symbol>
<symbol id="sort" viewBox="0 0 571.4 1000"><path d="M571 607q0 15-10 25L311 882q-11 11-25 11t-25-11L11 632Q0 622 0 607t11-25 25-11h500q14 0 25 11t10 25zm0-214q0 14-10 25t-25 11H36q-15 0-25-11T0 393t11-25l250-250q10-11 25-11t25 11l250 250q10 10 10 25z"/></symbol>
......
......@@ -10,23 +10,22 @@ const KEY_DOWN = 40;
const FOCUSABLE_ELEMENTS = `> .dropdown__toggle,
> .dropdown__menu a[href],
> .dropdown__menu button:not([disabled])
> .dropdown__menu button:not([disabled]),
> .dropdown__menu input:not([disabled])`;
const MENU_ACTIONS = `.dropdown__menu a[href],
.dropdown__menu input[type="button"],
.dropdown__menu button[type="submit"],
.dropdown__menu button:not([type])`;
function toggle($dropdown) {
// close all other dropdowns
toggleAttributes($('.dropdown--expanded').not($dropdown));
const $toClose = $dropdown.add($dropdown.parents('.dropdown--expanded'));
// close all open dropdowns that are not self or a parent of self
toggleAttributes($('.dropdown--expanded').not($toClose));
// toggle the current dropdown
toggleAttributes($dropdown);
$(document).off('keydown', globalKeyDownHandler);
$(document).off('click', globalHtmlClickHandler);
if ($dropdown.hasClass('dropdown--expanded')) {
$(document).on('keydown', globalKeyDownHandler);
$(document).one('click', globalHtmlClickHandler);
}
}
function toggleAttributes($dropdowns) {
......@@ -62,11 +61,12 @@ function globalKeyDownHandler(event) {
const $dropdown = $('.dropdown--expanded');
if ($dropdown.length == 0) {
return;
}
switch (event.which) {
case KEY_ESC:
event.originalEvent.preventDefault();
event.originalEvent.stopPropagation();
toggle($dropdown);
// give focus back to toggle
......@@ -74,34 +74,26 @@ function globalKeyDownHandler(event) {
break;
case KEY_DOWN:
event.originalEvent.preventDefault();
event.originalEvent.stopPropagation();
moveInList($dropdown, 1);
break;
case KEY_UP:
event.originalEvent.preventDefault();
event.originalEvent.stopPropagation();
moveInList($dropdown, -1);
break;
case KEY_HOME:
event.originalEvent.preventDefault();
event.originalEvent.stopPropagation();
moveInList($dropdown, Infinity);
break;
case KEY_END:
event.originalEvent.preventDefault();
event.originalEvent.stopPropagation();
moveInList($dropdown, -Infinity);
break;
default:
return;
}
}
function globalHtmlClickHandler() {
toggle($('.dropdown--expanded'));
event.preventDefault();
}
// init
......@@ -109,10 +101,25 @@ function globalHtmlClickHandler() {
$('.dropdown').addClass('dropdown-container').addClass('js'); // BC
$('.dropdown__toggle').attr('aria-haspopup', true).attr('aria-expanded', false);
$(document).on('keydown', globalKeyDownHandler);
// close the menu upon clicking a link or button or similar inside it
$(document).on('click', MENU_ACTIONS, () => {
event.stopPropagation();
toggle($('.dropdown--expanded'));
});
// prevent closing the menu when clicking on things in it that aren't buttons or
// links or anything
$(document).on('click', '.dropdown__menu', event => event.stopPropagation());
// make the toggles work
$(document).on('click', '.dropdown__toggle', function (event) {
event.stopPropagation();
toggle($(this).parent('.dropdown'));
return false;
});
// close the menu when clicking elsewhere on a page
$(document).on('click', () => toggle($('.dropdown--expanded')));
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment