From 4dff7a9a1251ffbcc1df1a39641aa7b9f864be42 Mon Sep 17 00:00:00 2001 From: Anna Sidwell Date: Thu, 14 Nov 2019 02:58:10 +0000 Subject: [PATCH] Remove burger menu, replace with responsive row of links --- src/_includes/header.html | 39 +-- src/assets/js/main.js | 19 +- src/assets/js/util.js | 296 ---------------------- src/assets/styles/components/_header.scss | 159 +++++------- src/assets/styles/components/_menu.scss | 82 ------ 5 files changed, 91 insertions(+), 504 deletions(-) diff --git a/src/_includes/header.html b/src/_includes/header.html index b64bb9f..55ab067 100644 --- a/src/_includes/header.html +++ b/src/_includes/header.html @@ -1,20 +1,21 @@ +
+

Autonomic

+ +
+
- diff --git a/src/assets/js/main.js b/src/assets/js/main.js index ffb4a90..3b50c15 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -18,7 +18,7 @@ $body = $("body"), $wrapper = $("#page-wrapper"), $banner = $("#banner"), - $header = $("#header"); + $header = $(".header"); // Disable animations/transitions until the page has loaded. $body.addClass("is-loading"); @@ -51,23 +51,6 @@ ); }); - $("#menu").show(); - - // Menu. - $("#menu") - .append('') - .appendTo($body) - .panel({ - delay: 500, - hideOnClick: true, - hideOnSwipe: true, - resetScroll: true, - resetForms: true, - side: "right", - target: $body, - visibleClass: "is-menu-visible" - }); - // Header. if (skel.vars.IEVersion < 9) $header.removeClass("alt"); diff --git a/src/assets/js/util.js b/src/assets/js/util.js index 7076ec9..d284053 100644 --- a/src/assets/js/util.js +++ b/src/assets/js/util.js @@ -1,301 +1,5 @@ (function($) { - /** - * Generate an indented list of links from a nav. Meant for use with panel(). - * @return {jQuery} jQuery object. - */ - $.fn.navList = function() { - - var $this = $(this); - $a = $this.find('a'), - b = []; - - $a.each(function() { - - var $this = $(this), - indent = Math.max(0, $this.parents('li').length - 1), - href = $this.attr('href'), - target = $this.attr('target'); - - b.push( - '' + - '' + - $this.text() + - '' - ); - - }); - - return b.join(''); - - }; - - /** - * Panel-ify an element. - * @param {object} userConfig User config. - * @return {jQuery} jQuery object. - */ - $.fn.panel = function(userConfig) { - - // No elements? - if (this.length == 0) - return $this; - - // Multiple elements? - if (this.length > 1) { - - for (var i=0; i < this.length; i++) - $(this[i]).panel(userConfig); - - return $this; - - } - - // Vars. - var $this = $(this), - $body = $('body'), - $window = $(window), - id = $this.attr('id'), - config; - - // Config. - config = $.extend({ - - // Delay. - delay: 0, - - // Hide panel on link click. - hideOnClick: false, - - // Hide panel on escape keypress. - hideOnEscape: false, - - // Hide panel on swipe. - hideOnSwipe: false, - - // Reset scroll position on hide. - resetScroll: false, - - // Reset forms on hide. - resetForms: false, - - // Side of viewport the panel will appear. - side: null, - - // Target element for "class". - target: $this, - - // Class to toggle. - visibleClass: 'visible' - - }, userConfig); - - // Expand "target" if it's not a jQuery object already. - if (typeof config.target != 'jQuery') - config.target = $(config.target); - - // Panel. - - // Methods. - $this._hide = function(event) { - - // Already hidden? Bail. - if (!config.target.hasClass(config.visibleClass)) - return; - - // If an event was provided, cancel it. - if (event) { - - event.preventDefault(); - event.stopPropagation(); - - } - - // Hide. - config.target.removeClass(config.visibleClass); - - // Post-hide stuff. - window.setTimeout(function() { - - // Reset scroll position. - if (config.resetScroll) - $this.scrollTop(0); - - // Reset forms. - if (config.resetForms) - $this.find('form').each(function() { - this.reset(); - }); - - }, config.delay); - - }; - - // Vendor fixes. - $this - .css('-ms-overflow-style', '-ms-autohiding-scrollbar') - .css('-webkit-overflow-scrolling', 'touch'); - - // Hide on click. - if (config.hideOnClick) { - - $this.find('a') - .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); - - $this - .on('click', 'a', function(event) { - - var $a = $(this), - href = $a.attr('href'), - target = $a.attr('target'); - - if (!href || href == '#' || href == '' || href == '#' + id) - return; - - // Cancel original event. - event.preventDefault(); - event.stopPropagation(); - - // Hide panel. - $this._hide(); - - // Redirect to href. - window.setTimeout(function() { - - if (target == '_blank') - window.open(href); - else - window.location.href = href; - - }, config.delay + 10); - - }); - - } - - // Event: Touch stuff. - $this.on('touchstart', function(event) { - - $this.touchPosX = event.originalEvent.touches[0].pageX; - $this.touchPosY = event.originalEvent.touches[0].pageY; - - }) - - $this.on('touchmove', function(event) { - - if ($this.touchPosX === null - || $this.touchPosY === null) - return; - - var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, - diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, - th = $this.outerHeight(), - ts = ($this.get(0).scrollHeight - $this.scrollTop()); - - // Hide on swipe? - if (config.hideOnSwipe) { - - var result = false, - boundary = 20, - delta = 50; - - switch (config.side) { - - case 'left': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); - break; - - case 'right': - result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); - break; - - case 'top': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); - break; - - case 'bottom': - result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); - break; - - default: - break; - - } - - if (result) { - - $this.touchPosX = null; - $this.touchPosY = null; - $this._hide(); - - return false; - - } - - } - - // Prevent vertical scrolling past the top or bottom. - if (($this.scrollTop() < 0 && diffY < 0) - || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { - - event.preventDefault(); - event.stopPropagation(); - - } - - }); - - // Event: Prevent certain events inside the panel from bubbling. - $this.on('click touchend touchstart touchmove', function(event) { - event.stopPropagation(); - }); - - // Event: Hide panel if a child anchor tag pointing to its ID is clicked. - $this.on('click', 'a[href="#' + id + '"]', function(event) { - - event.preventDefault(); - event.stopPropagation(); - - config.target.removeClass(config.visibleClass); - - }); - - // Body. - - // Event: Hide panel on body click/tap. - $body.on('click touchend', function(event) { - $this._hide(event); - }); - - // Event: Toggle. - $body.on('click', 'a[href="#' + id + '"]', function(event) { - - event.preventDefault(); - event.stopPropagation(); - - config.target.toggleClass(config.visibleClass); - - }); - - // Window. - - // Event: Hide on ESC. - if (config.hideOnEscape) - $window.on('keydown', function(event) { - - if (event.keyCode == 27) - $this._hide(event); - - }); - - return $this; - - }; - /** * Apply "placeholder" attribute polyfill to one or more forms. * @return {jQuery} jQuery object. diff --git a/src/assets/styles/components/_header.scss b/src/assets/styles/components/_header.scss index 014a2f1..0f113cc 100644 --- a/src/assets/styles/components/_header.scss +++ b/src/assets/styles/components/_header.scss @@ -1,105 +1,86 @@ /* Header */ -#header { - @include vendor('transition', 'background-color #{_duration(transitions)} ease'); - background: _palette(bg); - height: 3em; - left: 0; - line-height: 3em; +.header { position: fixed; top: 0; + left: 0; width: 100%; + + @include vendor('transition', 'background-color #{_duration(transitions)} ease'); + background: _palette(bg); z-index: _misc(z-index-base); + height: 3em; + line-height: 3em; + + padding-left: 1.5rem; + + display: flex; + justify-content: space-between; + align-items: center; + + @include breakpoint(small) { + position: initial; + height: auto; + line-height: inherit; + + display: block; + margin: 0 auto; + text-align: center + } +} + +.header.alt { + background: transparent; + h1 { - @include vendor('transition', 'opacity #{_duration(transitions)} ease'); - height: inherit; - left: 1.25em; - line-height: inherit; - position: absolute; - top: 0; - - a { - border: 0; - display: block; - height: inherit; - line-height: inherit; - - @include breakpoint(small) { - font-size: 0.8em; - } - } + @include vendor('pointer-events', 'none'); + opacity: 0; } +} - nav { +.header-home { + @include vendor('transition', 'opacity #{_duration(transitions)} ease'); + margin: 0; + padding: 0; + + a { + border: 0; + display: block; height: inherit; line-height: inherit; - position: absolute; - right: 0; - top: 0; - - > ul { - list-style: none; - margin: 0; - padding: 0; - white-space: nowrap; - - > li { - display: inline-block; - padding: 0; - - > a { - border: 0; - color: _palette(fg-bold); - display: block; - font-size: 0.8em; - letter-spacing: _size(letter-spacing-alt); - padding: 0 1.5em; - text-transform: uppercase; - - &.menuToggle { - outline: 0; - position: relative; - - &:after { - background-image: url('images/bars.svg'); - background-position: right center; - background-repeat: no-repeat; - content: ''; - display: inline-block; - height: 3.75em; - vertical-align: top; - width: 2em; - } - - @include breakpoint(small) { - padding: 0 1.5em; - - span { - display: none; - } - } - } - - @include breakpoint(small) { - padding: 0 0 0 1.5em; - } - } - - &:first-child { - margin-left: 0; - } - } - } } - &.alt { - background: transparent; - - h1 { - @include vendor('pointer-events', 'none'); - opacity: 0; - } + @include breakpoint(small) { + padding: 1rem 0; } -} \ No newline at end of file +} + +.header-nav { + display: flex; + list-style: none; + margin: 0; + padding: 0; + + li { padding: 0; } + + + @include breakpoint(small) { + justify-content: space-around; + padding-bottom: 0.5rem; + } +} + +.header-link { + border: 0; + color: _palette(fg-bold); + font-size: 0.8em; + letter-spacing: _size(letter-spacing-alt); + padding: 0 1.5rem; + text-transform: uppercase; + + @include breakpoint(small) { + padding: 0 0.75rem; + } +} diff --git a/src/assets/styles/components/_menu.scss b/src/assets/styles/components/_menu.scss index 095d7d8..3ba656d 100644 --- a/src/assets/styles/components/_menu.scss +++ b/src/assets/styles/components/_menu.scss @@ -20,85 +20,3 @@ } } -#menu { - display:none; - @include vendor('transform', 'translateX(20em)'); - @include vendor('transition', 'transform #{_duration(menu)} ease'); - -webkit-overflow-scrolling: touch; - background: _palette(accent1, bg); - color: _palette(accent1, fg-bold); - height: 100%; - max-width: 80%; - overflow-y: auto; - padding: 3em 2em; - position: fixed; - right: 0; - top: 0; - width: 20em; - z-index: _misc(z-index-base) + 2; - - ul { - list-style: none; - padding: 0; - - > li { - border-top: solid 1px _palette(accent1, border); - margin: 0.5em 0 0 0; - padding: 0.5em 0 0 0; - - &:first-child { - border-top: 0 !important; - margin-top: 0 !important; - padding-top: 0 !important; - } - - > a { - border: 0; - color: black; - display: block; - font-size: 0.8em; - letter-spacing: _size(letter-spacing-alt); - outline: 0; - text-decoration: none; - text-transform: uppercase; - - @include breakpoint(small) { - line-height: 3em; - } - } - } - } - - .close { - background-image: url('images/close.svg'); - background-position: 4.85em 1em; - background-repeat: no-repeat; - border: 0; - cursor: pointer; - display: block; - height: 3em; - position: absolute; - right: 0; - top: 0; - vertical-align: middle; - width: 7em; - } - - @include breakpoint(small) { - padding: 3em 1.5em; - } -} - -body.is-menu-visible { - #page-wrapper { - opacity: 0.35; - - &:before { - display: block; - } - } - - #menu { - @include vendor('transform', 'translateX(0)'); - } -} \ No newline at end of file