From 0bdba4baece2d32a63bfd2af544250816fd0bb2d Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 17:41:17 -0700 Subject: [PATCH 01/10] Add 'hamburger' menu icon to SVG icon set. --- classes/class-newspack-svg-icons.php | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/classes/class-newspack-svg-icons.php b/classes/class-newspack-svg-icons.php index 4298f62bf..2b743de5c 100755 --- a/classes/class-newspack-svg-icons.php +++ b/classes/class-newspack-svg-icons.php @@ -171,6 +171,11 @@ public static function get_social_link_svg( $uri, $size ) { ', + 'menu' => /* material-design - menu */ ' + + + +', 'close' => /* material-design - close */ ' From df81536b1a3d073146631a3befbd4f5ad87f9553 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 17:45:16 -0700 Subject: [PATCH 02/10] Add initial pass of new files for mobile navigation and the mobile sidebar. --- sass/navigation/_menu-mobile-navigation.scss | 49 ++++++++++++ template-parts/header/mobile-sidebar.php | 78 ++++++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 sass/navigation/_menu-mobile-navigation.scss create mode 100644 template-parts/header/mobile-sidebar.php diff --git a/sass/navigation/_menu-mobile-navigation.scss b/sass/navigation/_menu-mobile-navigation.scss new file mode 100644 index 000000000..ec59e3b4a --- /dev/null +++ b/sass/navigation/_menu-mobile-navigation.scss @@ -0,0 +1,49 @@ +.mobile-menu-toggle { + background-color: transparent; + color: $color__text-main; + padding: 0; + + &:hover, + &:focus { + background-color: transparent; + } + + .svg-icon { + position: relative; + top: 4px; + } + + @include media(tablet) { + display: none; + } +} + +.top-header-contain, +.bottom-header-contain, +.site-header .tertiary-menu { + display: none; +} + +@include media( tablet ) { + .top-header-contain, + .bottom-header-contain { + display: block; + } + + .site-header .tertiary-menu { + display: flex; + } +} + +#mobile-sidebar { + padding: $size__spacing-unit; + ul { + list-style: none; + margin: 0 0 $size__spacing-unit; + padding: 0; + + ul { + margin-left: $size__spacing-unit; + } + } +} diff --git a/template-parts/header/mobile-sidebar.php b/template-parts/header/mobile-sidebar.php new file mode 100644 index 000000000..2848b6307 --- /dev/null +++ b/template-parts/header/mobile-sidebar.php @@ -0,0 +1,78 @@ + + + + + + + +
    %3$s
', + 'depth' => 1, + ) + ); + ?> + + + + + + + + + + + + + + + + + + From deaa3fa15bf557052d7f26fc10cfdd41ebcf2fdf Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 17:46:05 -0700 Subject: [PATCH 03/10] Add sidebar menu toggle, and menu sidebar template part. --- header.php | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/header.php b/header.php index 0af9d5858..ccc4cf172 100755 --- a/header.php +++ b/header.php @@ -18,6 +18,9 @@ > + + +
@@ -78,6 +81,13 @@ ?> + + + +
From 8d79833ca536fbea81788b26ce2014bb119bc82e Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 17:47:25 -0700 Subject: [PATCH 04/10] Make social menu styles more general so they can be picked up by the mobile menu; add new mobile menu styles to the Sass build. --- sass/navigation/_menu-social-navigation.scss | 64 +++++++++----------- sass/navigation/_navigation.scss | 1 + 2 files changed, 31 insertions(+), 34 deletions(-) diff --git a/sass/navigation/_menu-social-navigation.scss b/sass/navigation/_menu-social-navigation.scss index 82140fdd8..2a730facd 100755 --- a/sass/navigation/_menu-social-navigation.scss +++ b/sass/navigation/_menu-social-navigation.scss @@ -1,49 +1,45 @@ /* Social menu */ -.social-navigation { +.social-links-menu { align-items: center; display: flex; + margin: 0; + padding: 0; - ul { - display: flex; - margin: 0; - padding: 0; + li { + list-style: none; - li { - list-style: none; + &:nth-child(n+2) { + margin-left: 0.5em; + } - &:nth-child(n+2) { - margin-left: 0.5em; - } + a { + border-bottom: 1px solid transparent; + display: block; + color: inherit; + margin-bottom: -1px; + transition: opacity $link_transition ease-in-out; - a { - border-bottom: 1px solid transparent; - display: block; - color: inherit; - margin-bottom: -1px; - transition: opacity $link_transition ease-in-out; - - &:hover, - &:active { - opacity: 0.6; - } + &:hover, + &:active { + opacity: 0.6; + } - &:focus { - opacity: 1; - border-bottom: 1px solid $color__text-main; - } + &:focus { + opacity: 1; + border-bottom: 1px solid $color__text-main; + } - svg { - display: block; - width: 24px; - height: 24px; + svg { + display: block; + width: 24px; + height: 24px; - // Prevent icons from jumping in Safari using hardware acceleration. - transform: translateZ(0); + // Prevent icons from jumping in Safari using hardware acceleration. + transform: translateZ(0); - &#ui-icon-link { - transform: rotate(-45deg); - } + &#ui-icon-link { + transform: rotate(-45deg); } } } diff --git a/sass/navigation/_navigation.scss b/sass/navigation/_navigation.scss index 7888790d3..34d129224 100755 --- a/sass/navigation/_navigation.scss +++ b/sass/navigation/_navigation.scss @@ -11,6 +11,7 @@ @import "menu-tertiary-navigation"; @import "menu-social-navigation"; @import "menu-footer-navigation"; +@import "menu-mobile-navigation"; /*-------------------------------------------------------------- ## Next / Previous From 5c126693b89785b1d135ef5e013bca428bc7e4bd Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 19:05:46 -0700 Subject: [PATCH 05/10] Improving mobile menu styles. --- sass/navigation/_menu-mobile-navigation.scss | 8 ++++++++ sass/navigation/_menu-social-navigation.scss | 1 - sass/site/header/_site-header.scss | 13 ++++++++++--- sass/typography/_headings.scss | 1 + 4 files changed, 19 insertions(+), 4 deletions(-) diff --git a/sass/navigation/_menu-mobile-navigation.scss b/sass/navigation/_menu-mobile-navigation.scss index ec59e3b4a..e86247c3c 100644 --- a/sass/navigation/_menu-mobile-navigation.scss +++ b/sass/navigation/_menu-mobile-navigation.scss @@ -36,7 +36,11 @@ } #mobile-sidebar { + background-color: $color__primary; + color: #fff; + font-size: $font__size-sm; padding: $size__spacing-unit; + ul { list-style: none; margin: 0 0 $size__spacing-unit; @@ -46,4 +50,8 @@ margin-left: $size__spacing-unit; } } + + a { + color: #fff; + } } diff --git a/sass/navigation/_menu-social-navigation.scss b/sass/navigation/_menu-social-navigation.scss index 2a730facd..36473da35 100755 --- a/sass/navigation/_menu-social-navigation.scss +++ b/sass/navigation/_menu-social-navigation.scss @@ -1,5 +1,4 @@ /* Social menu */ - .social-links-menu { align-items: center; display: flex; diff --git a/sass/site/header/_site-header.scss b/sass/site/header/_site-header.scss index 6751586e4..744586cc4 100755 --- a/sass/site/header/_site-header.scss +++ b/sass/site/header/_site-header.scss @@ -55,10 +55,15 @@ // Site description .site-description { color: $color__text-light; + display: none; font-weight: normal; font-size: $font__size-sm; font-style: italic; margin: 7px 0 0; + + @include media( mobile ) { + display: block; + } } .hide-site-tagline .site-description { @@ -79,10 +84,12 @@ // Middle bar .middle-header-contain { - align-items: center; - .wrapper { - padding: #{ 2 * $size__spacing-unit } 0; + align-items: center; + padding: $size__spacing-unit 0; + @include media( mobile ) { + padding: #{ 2 * $size__spacing-unit } 0; + } } } diff --git a/sass/typography/_headings.scss b/sass/typography/_headings.scss index 0deec10b3..63c0fd235 100755 --- a/sass/typography/_headings.scss +++ b/sass/typography/_headings.scss @@ -20,6 +20,7 @@ .site-info, #cancel-comment-reply-link, .use-header-font, +#mobile-sidebar, h1, h2, h3, From 095f1a3d1634b6c18fbdef3d3211c1d8f98f9e7a Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 19:52:58 -0700 Subject: [PATCH 06/10] Updating button class. --- template-parts/header/mobile-sidebar.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/template-parts/header/mobile-sidebar.php b/template-parts/header/mobile-sidebar.php index 2848b6307..807c220b0 100644 --- a/template-parts/header/mobile-sidebar.php +++ b/template-parts/header/mobile-sidebar.php @@ -8,7 +8,7 @@ - From 5e4711e2df6a5fa351162c881c7828d114784ee8 Mon Sep 17 00:00:00 2001 From: Laurel Fulford Date: Tue, 23 Jul 2019 19:58:53 -0700 Subject: [PATCH 07/10] Update tertiary nav classes. --- header.php | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/header.php b/header.php index ccc4cf172..65307ae0f 100755 --- a/header.php +++ b/header.php @@ -26,7 +26,7 @@