From 51c83849f711f2a2d7f68767e60c394438704db9 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 6 May 2020 19:37:07 +0000 Subject: [PATCH] WIP #3617 @6 --- wp-content/themes/physioassist/app/setup.php | 3 +- .../resources/assets/images/icons/academy.svg | 7 +++ .../assets/images/icons/teleconsultation.svg | 8 +++ .../resources/assets/scripts/routes/common.js | 8 ++- .../styles/components/navigation-mobile.styl | 8 +++ .../assets/styles/components/navigation.styl | 61 +++++++++++++++++-- .../assets/styles/layouts/header.styl | 34 +++++++++-- .../resources/views/partials/header.blade.php | 18 +++++- 8 files changed, 132 insertions(+), 15 deletions(-) create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/academy.svg create mode 100644 wp-content/themes/physioassist/resources/assets/images/icons/teleconsultation.svg diff --git a/wp-content/themes/physioassist/app/setup.php b/wp-content/themes/physioassist/app/setup.php index a3d4b45c..54c82152 100644 --- a/wp-content/themes/physioassist/app/setup.php +++ b/wp-content/themes/physioassist/app/setup.php @@ -42,7 +42,8 @@ add_action('after_setup_theme', function () { * @link https://developer.wordpress.org/reference/functions/register_nav_menus/ */ register_nav_menus([ - 'primary_navigation' => __('Primary Navigation', 'sage') + 'primary_navigation' => __('Primary Navigation', 'sage'), + 'secondary_navigation' => __('Header Buttons', 'cube'), ]); /** diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/academy.svg b/wp-content/themes/physioassist/resources/assets/images/icons/academy.svg new file mode 100644 index 00000000..de6894ba --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/academy.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/wp-content/themes/physioassist/resources/assets/images/icons/teleconsultation.svg b/wp-content/themes/physioassist/resources/assets/images/icons/teleconsultation.svg new file mode 100644 index 00000000..01520923 --- /dev/null +++ b/wp-content/themes/physioassist/resources/assets/images/icons/teleconsultation.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js b/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js index 2ac428b0..aef18863 100644 --- a/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js +++ b/wp-content/themes/physioassist/resources/assets/scripts/routes/common.js @@ -9,8 +9,14 @@ export default { var menu = $('#mobileMenu'), menuOpener = $('#menuOpener'); - // Copy main menu + // Copy main menu + secondary nav + locales $('.nav-primary').clone().appendTo(menu); + $('.nav-buttons li').each(function() { + let item = $(this).clone(); + item.addClass('secondary-item'); // Add extra class so these items can be styled differently + $(menu).find('.nav').append(item); + }); + $('.navigation .locales').clone().appendTo(menu); menuOpener.on('click', function() { $(this).toggleClass('open'); diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl index 766b737f..518334b5 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation-mobile.styl @@ -33,12 +33,20 @@ display: block text-align: center padding: 20px 5% + margin: 0 li display: block padding: 0.5em 0 margin: 0 + // Links from the secondary button nav get a different colour + &.secondary-item + color: $colors.light-blue + + a:hover + color: #fff + a border: none diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl index 749b831f..0cb90980 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/components/navigation.styl @@ -11,12 +11,14 @@ .nav inline-list() -.menu-item //:not(:last-child) - margin-right: 2.5em +.menu-item position: relative padding-bottom: 1em // To give space between menu and dropdown but keep them touching padding-top: @padding-bottom // Matches bottom padding so menu stays vertically aligned in the centre + &:not(:last-child) + margin-right: 2.5em + &:hover, &.current_page_parent, &.current_page_item, &.current-page-ancestor a border-color: currentColor @@ -82,16 +84,17 @@ .locales list-style-type: none padding: 0 - margin: 0 + margin: 1rem 0 display: flex color: #1888ca font-size: 14px + font-weight: 600 text-transform: capitalize a, span box-sizing: content-box display: inline-block - width: r(35px) + width: 2.5em line-height: @width text-align: center @@ -107,3 +110,53 @@ .locale-active border-radius: 50% border: 2px solid currentColor + + +// Secondary header nav (buttons) +.nav-buttons + inline-list() + margin-right: 1em + + li + &:not(:last-child) + margin-right: 0.8em + + a + font-smoothing-reset() + display: flex + align-items: center + background-color: $colors.blue + color: #fff + text-transform: uppercase + font-size: 12px + font-weight: 600 + padding: 0.75em 1.75em + border: none + border-radius: 999px + transition: background-color 0.15s ease-out + + &:hover + background-color: $colors.dark-blue + + li.icon + a + line-height: 2 + + &:before + content: '' + display: inline-block + background-size: contain + background-repeat: no-repeat + background-position: center + height: 2em + width: @height + margin-right: 0.75em + + &.icon-academy + a:before + background-image: url('../images/icons/academy.svg'); + + &.icon-teleconsultation + a:before + background-image: url('../images/icons/teleconsultation.svg'); + diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl index 0a9b6c16..e5fb0167 100644 --- a/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl +++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/header.styl @@ -17,7 +17,11 @@ header.site .inner center() - horizontal-spacing() + constrain(padding-left, 5vw) + padding-right: 1rem + display: flex + justify-content: space-between + align-items: flex-end position: relative !important height: 100% @@ -45,14 +49,32 @@ header.site .navigation - position: absolute - constrain(right, $horizontal-gutter) - bottom: 50% - transform: translateY(50%) + overflow: hidden +below($breakpoint-menu) display: none +// Main menu +.nav-primary + margin-right: 72px // Space for phone icon + + // Once we go above the max width, the phone icon will sit + // in the gutter so we don't need to reserve space for it + +above($content-max-width + 72px) + margin-right: 0.5em + +// CTA buttons + locale switcher (only visible on hero headers) +.nav-secondary + opacity: 0 + margin-top: -74px // Pull out of view + remove space taken by element (animated by transition) + display: flex + align-items: center + justify-content: flex-end + transition: all 0.2s linear + + .template-transparent-header & + opacity: 1 + margin-top: 0 //==== Phone widget $phone-widget-width = 3.5em // 1em padding + 1.5em icon width + 1em padding @@ -65,7 +87,6 @@ $phone-widget-width = 3.5em // 1em padding + 1.5em icon width + 1em padding height: 100% .template-transparent-header & - bottom: 0.5em height: auto +below($breakpoint-menu) @@ -80,6 +101,7 @@ $phone-widget-width = 3.5em // 1em padding + 1.5em icon width + 1em padding white-space: nowrap transition: transform 0.5s ease transform: translateX(- $phone-widget-width) + border-radius: 999px 0 0 999px // Rounded only on the left side &:hover transform: translateX(-100%) diff --git a/wp-content/themes/physioassist/resources/views/partials/header.blade.php b/wp-content/themes/physioassist/resources/views/partials/header.blade.php index 4794c0df..7e0c685c 100644 --- a/wp-content/themes/physioassist/resources/views/partials/header.blade.php +++ b/wp-content/themes/physioassist/resources/views/partials/header.blade.php @@ -2,9 +2,12 @@
@include('partials/logo')
-
-- 2.39.5