diff --git a/newspack-theme/header.php b/newspack-theme/header.php index 1f1268b71..44d05bc6a 100755 --- a/newspack-theme/header.php +++ b/newspack-theme/header.php @@ -29,6 +29,7 @@ $show_slideout_sidebar = get_theme_mod( 'header_show_slideout', false ); $slideout_sidebar_side = get_theme_mod( 'slideout_sidebar_side', 'left' ); $header_sub_simplified = get_theme_mod( 'header_sub_simplified', false ); +$subpage_toggle_side = get_theme_mod( 'subpage_toggle_side', 'left' ); $header_sticky = get_theme_mod( 'header_sticky', false ); // Even if 'Show Slideout Sidebar' is checked, don't show it if no widgets are assigned. @@ -60,7 +61,7 @@
- +
+ + + + - +
+ - - - + + + - + + + +
+ +
+ +
diff --git a/newspack-theme/inc/customizer.php b/newspack-theme/inc/customizer.php index bb2453476..6aacfd4fe 100755 --- a/newspack-theme/inc/customizer.php +++ b/newspack-theme/inc/customizer.php @@ -245,6 +245,27 @@ function newspack_customize_register( $wp_customize ) { ) ); + // Subpage header - menu toggle position. + $wp_customize->add_setting( + 'subpage_toggle_side', + array( + 'default' => 'left', + 'sanitize_callback' => 'newspack_sanitize_slideout_sidebar_side', + ) + ); + $wp_customize->add_control( + 'subpage_toggle_side', + array( + 'type' => 'radio', + 'label' => esc_html__( 'Menu toggle position', 'newspack-theme' ), + 'choices' => array( + 'left' => _x( 'Left', 'menu toggle position', 'newspack-theme' ), + 'right' => _x( 'Right', 'menu toggle position', 'newspack-theme' ), + ), + 'section' => 'header_section_subpages', + ) + ); + /** * Header - Mobile Donate CTA */ diff --git a/newspack-theme/js/src/customize-controls.js b/newspack-theme/js/src/customize-controls.js index df9eb0608..fba06b083 100755 --- a/newspack-theme/js/src/customize-controls.js +++ b/newspack-theme/js/src/customize-controls.js @@ -337,7 +337,7 @@ } ); } ); - // Only show Alternative Logo option if 'simple subpage header' is picked + // Only show Alternative Logo and toggle side options if 'simple subpage header' is picked wp.customize( 'header_sub_simplified', function ( setting ) { wp.customize.control( 'newspack_alternative_logo', function ( control ) { const visibility = function () { @@ -350,6 +350,17 @@ visibility(); setting.bind( visibility ); } ); + wp.customize.control( 'subpage_toggle_side', function ( control ) { + const visibility = function () { + if ( true === setting.get() ) { + control.container.slideDown( 180 ); + } else { + control.container.slideUp( 180 ); + } + }; + visibility(); + setting.bind( visibility ); + } ); } ); // Only show Author Bio truncate options when enabled. diff --git a/newspack-theme/sass/navigation/_menu-mobile-navigation.scss b/newspack-theme/sass/navigation/_menu-mobile-navigation.scss index 5462427d3..aaddac35b 100644 --- a/newspack-theme/sass/navigation/_menu-mobile-navigation.scss +++ b/newspack-theme/sass/navigation/_menu-mobile-navigation.scss @@ -100,6 +100,15 @@ margin: 0 #{1.25 * structure.$size__spacing-unit} 0 0; } +.subpage-toggle-contain.dir-right { + margin: 0 0 0 #{0.75 * structure.$size__spacing-unit}; +} + +.subpage-toggle-contain.subpage-toggle-spacer { + visibility: hidden; + pointer-events: none; +} + .site-header .desktop-menu-toggle.dir-right { margin: 0 0 0 #{1.25 * structure.$size__spacing-unit}; } @@ -163,33 +172,6 @@ .site-branding { margin-right: 0; } - - .mb-cta { - margin-left: auto; - } - - .middle-header-contain .header-search-contain { - margin-left: 1.25rem; - } - } - - &.h-cl { - @include utilities.media( tablet ) { - .wrapper { - position: relative; - } - .mb-cta { - right: 2.25rem; - position: absolute; - z-index: 1; - } - - &:not(.h-stk).single-featured-image-beside { - .mb-cta { - right: 2.25rem; - } - } - } } } @@ -418,13 +400,15 @@ // Fallback - open from the right #mobile-sidebar-fallback, -#desktop-sidebar-fallback.dir-right { +#desktop-sidebar-fallback.dir-right, +#subpage-sidebar-fallback.dir-right { left: auto; right: -100%; transition: right 0.2s; } .desktop-menu-opened #desktop-sidebar-fallback.dir-right, +.subpage-menu-opened #subpage-sidebar-fallback.dir-right, .mobile-menu-opened #mobile-sidebar-fallback { right: 0; } diff --git a/newspack-theme/sass/site/header/_site-header.scss b/newspack-theme/sass/site/header/_site-header.scss index f877c1e3d..54c3b9ddd 100755 --- a/newspack-theme/sass/site/header/_site-header.scss +++ b/newspack-theme/sass/site/header/_site-header.scss @@ -460,8 +460,24 @@ } } - .header-search-contain { + .subpage-right-wrapper { + align-items: center; + display: flex; + gap: #{0.75 * structure.$size__spacing-unit}; margin-left: auto; + + .mb-cta, + .mobile-menu-toggle { + margin-left: 0; + } + + .header-search-contain { + margin-left: 0; + } + + > * { + flex: none; + } } } @@ -474,6 +490,17 @@ text-align: right; } } + + // Fix clumping when beside featured image constrains the wrapper to 50%. + &.single-featured-image-beside { + .site-header .middle-header-contain .wrapper { + justify-content: space-between; + + > div { + flex: none; + } + } + } } &.h-ll { diff --git a/newspack-theme/template-parts/header/subpage-sidebar.php b/newspack-theme/template-parts/header/subpage-sidebar.php index 27ffd52dc..481c832a6 100644 --- a/newspack-theme/template-parts/header/subpage-sidebar.php +++ b/newspack-theme/template-parts/header/subpage-sidebar.php @@ -5,14 +5,16 @@ * @package Newspack */ +$subpage_toggle_side = get_theme_mod( 'subpage_toggle_side', 'left' ); + if ( newspack_is_amp() ) : ?> - + -