malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add header and mobile nav styles to Customizer

Browse Source
This commit is contained in:
Tetrakern 2023-11-24 23:34:57 +01:00
parent dacde9c2cb
commit a2cb9ca15a
17 changed files with 348 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ACTIONS.md
View File

@ -573,7 +573,7 @@ Fires outside the `#site` container and before the `wp_footer` hook, near the en
---
### `do_action( 'fictioneer_header', $args )`
Fires right after opening the site’s `<header>` container. Normally includes the header background image.
Fires right after opening the default `<header>` container. Normally includes the header background image.
**$args:**
* $post_id (int|null) – Current post ID. Unsafe.
@ -921,3 +921,14 @@ Fires right between the comments list and heading in the `_story-comments.php` p
**$args:**
* $story_data (array) – Collection of story data.
* $story_id (int) – Current story (post) ID.
---
### `do_action( 'fictioneer_top_header', $args )`
Fires right after opening the top-aligned `<header>` container.
**$args:**
* $post_id (int|null) – Current post ID. Unsafe.
* $story_id (int|null) – Current story ID. Unsafe.
* $header_image_url (string|boolean) – URL of the filtered header image or false.
* $header_args (array) – Arguments passed to the header.php partial.

9
INSTALLATION.md
View File

@ -27,6 +27,7 @@ This guide is mainly written for people who never had their own WordPress site b
* [Tools Tab](#tools-tab)
* [Log Tab](#log)
* [How to Customize the Fictioneer Theme](#how-to-customize-the-fictioneer-theme)
* [Header Style](#header-style)
* [Move the Title/Logo](#move-the-titlelogo)
* [Minimum/Maximum Values](#minimummaximum-values)
* [Menus](#menus)
@ -685,6 +686,12 @@ There are two ways to customize the theme. The obvious one is the Customizer of
The second way is to directly modify the templates, styles, and scripts. This is indefinitely more powerful but requires some developer skills — and you can easily break your site. The theme’s files can be modified under **Appearance > Theme File Editor**, although you should never actually do this. Always create a [child theme](https://developer.wordpress.org/themes/advanced-topics/child-themes/) because any code changes you make, regardless of quality, will be overwritten again when you update the theme.
### Header Style
![Customizer HSL Sliders](repo/assets/customizer_header_style_preview.jpg?raw=true)
You can choose between three different header styles: **default**, **top**, and **split** — or **none** at all, if that is what you want. The **default style** is what you see on the screenshots and demo site, optionally with title, tagline, and/or logo. The **top style** puts the site identity above the navigation and removes the header image. And the **split style** is a mix of both, with the identity above but a header image below the navigation.
### Move the Title/Logo
![Customizer HSL Sliders](repo/assets/customizer_move_title_logo.jpg?raw=true)
@ -770,7 +777,7 @@ The minimum and maximum values found in the Customizer are used to calculate [cl
Fictioneer comes with two menu locations, **Navigation** and **Footer Menu**, located precisely where you would expect. You can read up on how to create and add menus in the [official documentation](https://codex.wordpress.org/WordPress_Menu_User_Guide). The only thing of note here are the special CSS classes you can assign to menu items for certain effects (whitespace-separated). Make sure to enable the additional menu properties under Screen Options at the top.
On desktop, submenus are rendered as dropdown. On mobile, the **Navigation** only shows the top level menu items in a scrollable track, but the mobile menu is an unfolded list of all items if not specifically excluded with optional CSS classes.
On desktop, submenus are rendered as dropdown. On mobile, the **Navigation** shows either the top level items in a scrollable track (overflow) or only the mobile menu button (collapse). You can set that in the **Customizer**. The mobile menu is an unfolded list of all items if not specifically excluded with optional CSS classes.
* `not-in-mobile-menu`: As you can guess, this will hide the menu item in the mobile menu. However, submenu items will still be shown, so you can use this to hide superfluous dropdown parents.
* `static-menu-item`: For menu items without link. Changes the cursor and cannot be selected by keyboard (subitems can).

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

2
css/properties.css
View File

File diff suppressed because one or more lines are too long

50
includes/functions/_customizer-settings.php
View File

@ -2443,6 +2443,32 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
)
);
$manager->add_setting(
'header_style',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'sanitize_text_field',
'default' => 'default'
)
);
$manager->add_control(
'header_style',
array(
'type' => 'select',
'priority' => 10,
'section' => 'layout',
'label' => __( 'Header Style', 'fictioneer' ),
'description' => __( 'Choose the style of your header. This may affect or disable other settings.', 'fictioneer' ),
'choices' => array(
'default' => _x( 'Default', 'Customizer header style option.', 'fictioneer' ),
'top' => _x( 'Top', 'Customizer header style option.', 'fictioneer' ),
'split' => _x( 'Split', 'Customizer header style option.', 'fictioneer' ),
'none' => _x( 'None', 'Customizer header style option.', 'fictioneer' )
),
)
);
// Clamp minimum for header height
$manager->add_setting(
'header_height_min',
@ -2495,6 +2521,30 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
)
);
$manager->add_setting(
'mobile_nav_style',
array(
'capability' => 'manage_options',
'sanitize_callback' => 'sanitize_text_field',
'default' => 'overflow'
)
);
$manager->add_control(
'mobile_nav_style',
array(
'type' => 'select',
'priority' => 10,
'section' => 'layout',
'label' => __( 'Mobile Navigation Style', 'fictioneer' ),
'description' => __( 'Choose the style of your mobile navigation.', 'fictioneer' ),
'choices' => array(
'overflow' => _x( 'Overflow', 'Customizer mobile navigation style option.', 'fictioneer' ),
'collapse' => _x( 'Collapse', 'Customizer mobile navigation style option.', 'fictioneer' )
),
)
);
$manager->add_setting(
'use_custom_layout',
array(

19
includes/functions/_customizer.php
View File

@ -521,6 +521,11 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
--hue-offset: " . $hue_offset . "deg;
--saturation-offset: " . $saturation_offset / 100 . ";
--lightness-offset: " . $lightness_offset / 100 . ";
--layout-header-background-height: " . fictioneer_get_css_clamp( $header_image_min, $header_image_max, 320, $site_width ) . ";
--layout-site-header-height: calc(" . fictioneer_get_css_clamp( $header_min, $header_max, 320, $site_width ) . " - var(--layout-main-inset-top));
--layout-site-logo-height: " . $logo_height . "px;
--site-title-font-size: " . fictioneer_get_css_clamp( $title_min, $title_max, 320, $site_width ) . ";
--site-title-tagline-font-size: " . fictioneer_get_css_clamp( $tagline_min, $tagline_max, 320, $site_width ) . ";
}";
if ( get_theme_mod( 'use_custom_layout', false ) ) {
@ -533,20 +538,6 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
}";
}
$layout_css .= ".header-background {
--layout-header-background-height: " . fictioneer_get_css_clamp( $header_image_min, $header_image_max, 320, $site_width ) . ";
}
.header {
--layout-site-header-height: calc(" . fictioneer_get_css_clamp( $header_min, $header_max, 320, $site_width ) . " - var(--layout-main-inset-top));
}
.header__logo {
--layout-site-logo-height: " . $logo_height . "px;
}
.header__title {
--site-title-font-size: " . fictioneer_get_css_clamp( $title_min, $title_max, 320, $site_width ) . ";
--site-title-tagline-font-size: " . fictioneer_get_css_clamp( $tagline_min, $tagline_max, 320, $site_width ) . ";
}";
$layout_css = fictioneer_minify_css( $layout_css );
// Remember CSS and add it to site

3
includes/functions/_theme_setup.php
View File

@ -324,6 +324,9 @@ function fictioneer_root_attributes() {
$header_classes[] = 'inset-header-image';
}
// Header style
$header_classes[] = 'header-style-' . get_theme_mod( 'header_style', 'default' );
// Prepare
$output['class'] = implode( ' ', $header_classes );
$output['data-mode-default'] = get_option( 'fictioneer_light_mode_as_default', false ) ? 'light' : 'dark';

36
includes/functions/hooks/_general_hooks.php
View File

@ -216,7 +216,7 @@ add_action( 'fictioneer_site', 'fictioneer_navigation_bar', 10 );
/**
* Outputs the HTML for the site header
*
* @since Fictioneer 5.0
* @since Fictioneer 5.0.0
*
* @param int|null $args['post_id'] Optional. Current post ID.
* @param int|null $args['story_id'] Optional. Current story ID (if chapter).
@ -225,10 +225,40 @@ add_action( 'fictioneer_site', 'fictioneer_navigation_bar', 10 );
*/
function fictioneer_site_header( $args ) {
// Abort if...
if ( ! in_array( get_theme_mod( 'header_style', 'default' ), ['default', 'split'] ) ) {
return;
}
get_template_part( 'partials/_site-header', null, $args );
}
add_action( 'fictioneer_site', 'fictioneer_site_header', 20 );
// =============================================================================
// OUTPUT TOP HEADER
// =============================================================================
/**
* Outputs the HTML for the top header
*
* @since Fictioneer 5.8.1
*
* @param int|null $args['post_id'] Optional. Current post ID.
* @param int|null $args['story_id'] Optional. Current story ID (if chapter).
* @param string|boolean $args['header_image_url'] URL of the filtered header image or false.
* @param array $args['header_args'] Arguments passed to the header.php partial.
*/
function fictioneer_top_header( $args ) {
// Abort if...
if ( ! in_array( get_theme_mod( 'header_style', 'default' ), ['top', 'split'] ) ) {
return;
}
get_template_part( 'partials/_top-header', null, $args );
}
add_action( 'fictioneer_site', 'fictioneer_top_header', 9 );
// =============================================================================
// OUTPUT HEADER BACKGROUND
// =============================================================================
@ -236,7 +266,7 @@ add_action( 'fictioneer_site', 'fictioneer_site_header', 20 );
/**
* Outputs the HTML for the header background
*
* @since Fictioneer 5.0
* @since Fictioneer 5.0.0
*
* @param int|null $args['post_id'] Optional. Current post ID.
* @param int|null $args['story_id'] Optional. Current story ID (if chapter).
@ -246,7 +276,7 @@ add_action( 'fictioneer_site', 'fictioneer_site_header', 20 );
function fictioneer_header_background( $args ) {
// Abort if...
if ( ! isset( $args['header_image_url'] ) || ! $args['header_image_url'] ) {
if ( ! ( $args['header_image_url'] ?? 0 ) ) {
return;
}

20
partials/_navigation.php
View File

@ -20,9 +20,16 @@
// No direct access!
defined( 'ABSPATH' ) OR exit;
// Setup
$classes = [];
if ( get_theme_mod( 'mobile_nav_style', 'overflow' ) === 'collapse' ) {
$classes[] = '_collapse-on-mobile';
}
?>
<nav id="full-navigation" class="main-navigation" aria-label="Main Navigation">
<nav id="full-navigation" class="main-navigation <?php echo implode( ' ', $classes ); ?>" aria-label="<?php echo esc_attr__( 'Main Navigation', 'fictioneer' ); ?>">
<div id="nav-observer-sticky" class="observer nav-observer"></div>
<div class="main-navigation__background"></div>
@ -30,10 +37,13 @@ defined( 'ABSPATH' ) OR exit;
<div class="main-navigation__wrapper">
<label for="mobile-menu-toggle" class="mobile-menu-button follows-alert-number"><?php
fictioneer_icon( 'fa-bars', 'off' );
fictioneer_icon( 'fa-xmark', 'on' );
?></label>
<label for="mobile-menu-toggle" class="mobile-menu-button follows-alert-number">
<?php
fictioneer_icon( 'fa-bars', 'off' );
fictioneer_icon( 'fa-xmark', 'on' );
?>
<span class="mobile-menu-button__label"><?php _ex( 'Menu' , 'Mobile menu label', 'fictioneer'); ?></span>
</label>
<div class="main-navigation__left">
<?php

35
partials/_site-header.php
View File

@ -20,27 +20,32 @@
// No direct access!
defined( 'ABSPATH' ) OR exit;
// Setup
$tag = get_theme_mod( 'header_style', 'default' ) === 'default' ? 'header' : 'div';
?>
<header class="header hide-on-fullscreen">
<<?php echo $tag; ?> class="header hide-on-fullscreen">
<?php do_action( 'fictioneer_header', $args ); ?>
<div class="header__content">
<?php if ( has_custom_logo() ) : ?>
<?php if ( get_theme_mod( 'header_style', 'default' ) === 'default' ) : ?>
<div class="header__content">
<div class="header__logo"><?php the_custom_logo(); ?></div>
<?php if ( has_custom_logo() ) : ?>
<div class="header__logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>
<?php elseif ( display_header_text() ) : ?>
<?php if ( display_header_text() ) : ?>
<div class="header__title">
<h1 class="header__title-heading"><a href="<?php echo esc_url( home_url() ); ?>" class="header__title-link" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<?php if ( ! empty( get_bloginfo( 'description' ) ) ) : ?>
<div class="header__title-tagline"><?php echo get_bloginfo( 'description' ); ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="header__title">
<h1 class="header__title-heading"><a href="<?php echo esc_url( home_url() ); ?>" class="header__title-link" rel="home"><?php echo get_bloginfo( 'name' ); ?></a></h1>
<?php if ( ! empty( get_bloginfo( 'description' ) ) ) : ?>
<div class="header__title-tagline"><?php echo get_bloginfo( 'description' ); ?></div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</header>
</<?php echo $tag; ?>>

64
partials/_top-header.php Normal file
View File

@ -0,0 +1,64 @@
<?php
/**
* Partial: Top Header
*
* Renders the top header.
*
* @package WordPress
* @subpackage Fictioneer
* @since 5.8.1
*
* @internal $args['post_id'] Optional. Current post ID.
* @internal $args['story_id'] Optional. Current story ID (if chapter).
* @internal $args['header_image_url'] URL of the filtered header image or false.
* @internal $args['header_args'] Arguments passed to the header.php partial.
*/
?>
<?php
// No direct access!
defined( 'ABSPATH' ) OR exit;
// Setup
$classes = [];
if ( ! display_header_text() ) {
$classes[] = '_no-title';
}
if ( empty( get_bloginfo( 'description' ) ) ) {
$classes[] = '_no-tagline';
}
if ( ! has_custom_logo() ) {
$classes[] = '_no-logo';
}
?>
<header class="top-header <?php echo implode( ' ', $classes ); ?> hide-on-fullscreen">
<?php do_action( 'fictioneer_top_header', $args ); ?>
<div class="top-header__content">
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php endif; ?>
<?php if ( display_header_text() ) : ?>
<div class="top-header__title">
<h1 class="top-header__heading">
<a href="<?php echo esc_url( home_url() ); ?>" class="top-header__link" rel="home"><?php
echo get_bloginfo( 'name' );
?></a>
</h1>
<?php if ( ! empty( get_bloginfo( 'description' ) ) ) : ?>
<div class="top-header__tagline"><?php echo get_bloginfo( 'description' ); ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</header>

BIN
repo/assets/customizer_header_style_preview.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

70
src/scss/_header.scss
View File

@ -19,7 +19,7 @@
content-visibility: auto;
}
:is(.custom-logo-link, .custom-logo, .header__title-link) {
:is(.custom-logo-link, .custom-logo) {
display: block;
}
@ -110,3 +110,71 @@
}
}
}
.top-header {
background: var(--layout-top-header-background-color);
width: 100%;
contain: style layout; // Improves performance
&__content {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem 1rem .5rem;
margin: 0 auto;
max-width: var(--site-width);
@include bp(desktop) {
justify-content: flex-start;
padding-bottom: .25rem;
}
}
.custom-logo-link {
flex: 0 0 auto;
}
.custom-logo {
display: block;
height: var(--layout-site-logo-height);
max-height: calc(var(--site-title-font-size) + var(--site-title-tagline-font-size) + 1rem);
width: auto;
object-fit: contain;
}
&._no-tagline .custom-logo {
max-height: calc(var(--site-title-font-size) + .75rem);
}
&._no-title .custom-logo {
max-height: unset;
}
&__title {
flex: 0 1 auto;
}
&__heading {
font: 700 var(--site-title-font-size)/1.3 var(--site-title-font);
letter-spacing: 0;
a {
color: var(--site-title-heading-color);
}
}
&__tagline {
color: var(--site-title-tagline-color);
font: 400 var(--site-title-tagline-font-size)/1.3 var(--ff-heading);
letter-spacing: 0;
}
&._no-logo {
text-align: center;
@include bp(desktop) {
text-align: left;
}
}
}

84
src/scss/_navigation.scss
View File

@ -1,7 +1,9 @@
// If outside window, activate sticky navigation
.nav-observer {
top: calc(-1px + var(--nav-observer-offset, 0px));
}
// Observer must account for large admin bar
@include bp(601px) {
.admin-bar:not(.mobile-menu-open) {
.main-navigation {
@ -14,6 +16,7 @@
}
}
// Observer must account for small admin bar
@include bp(783px) {
.admin-bar:not(.mobile-menu-open) {
.main-navigation {
@ -26,48 +29,48 @@
}
}
.scrolling-up.is-inside-main {
// Float in from top
:root:not(.no-nav-sticky) .scrolling-up.is-inside-main {
.main-navigation {
transform: translate3d(0, 0, 0);
}
}
.scrolling-down.is-inside-main {
// Float out to top
:root:not(.no-nav-sticky) .scrolling-down.is-inside-main {
.main-navigation:not(:hover, :focus-within) {
transform: translate3d(0, -115%, 0); // Accounts for shadow
}
}
.is-inside-main .main-navigation {
// Narrow navigation bar when scrolled into the page
:root:not(.no-nav-sticky) .is-inside-main .main-navigation {
padding: 0;
&__list,
&__list > ul {
> :is(.menu-item, .page_item) {
border-radius: 0;
}
:is(.menu-item, .page_item) {
border-radius: 0;
}
}
.static-menu-item {
cursor: default;
// Case above or equal to 1024px
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky {
.main-navigation__background {
opacity: 1;
}
}
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky {
.main-navigation {
&__background {
// Case below 1024px
:root:not(.no-nav-sticky) .main-navigation.is-sticky {
.main-navigation__background {
@media only screen and (max-width: 1023px) {
opacity: 1;
}
}
}
.scrolled-to-top,
.main-navigation:not(.is-sticky) {
.main-navigation__background {
@include bp(desktop) {
opacity: 0;
}
}
// Extra spacing if header image is missing
:is(.header-style-top, .header-style-none) .main-navigation {
margin-bottom: 1.25rem;
}
.main-navigation {
@ -97,28 +100,53 @@
display: block;
background: var(--navigation-background-sticky);
box-shadow: 0 0 1px transparent; // Safari fix to show drop-shadow
opacity: 0;
filter: var(--navigation-drop-shadow);
contain: strict; // Improve performance
}
&__wrapper {
display: flex;
justify-content: space-between;
justify-content: center;
margin: 0 auto;
max-width: var(--site-width);
}
&__left {
flex-grow: 1;
flex-grow: 0;
min-height: var(--navigation-height);
max-width: calc(100% - 48px);
overflow: hidden;
@include bp(desktop) {
flex-grow: 1;
overflow: visible;
}
}
// Customizer: Collapse mobile navigation
&._collapse-on-mobile {
.main-navigation__left {
display: none;
content-visibility: hidden;
@include bp(640px) {
display: block;
content-visibility: visible;
}
}
.mobile-menu-button {
&__label {
display: block;
@include bp(640px) {
display: none;
}
}
}
}
&__right {
flex-shrink: 0;
}
@ -297,6 +325,10 @@
}
}
.static-menu-item {
cursor: default;
}
.user-is-tabbing {
.main-navigation {
:is(.menu-item, .page_item) {
@ -315,6 +347,7 @@
.mobile-menu-button {
display: flex;
align-items: center;
gap: 8px;
font-size: 20px;
line-height: 1;
padding: 0 16px;
@ -324,4 +357,11 @@
display: none;
content-visibility: hidden;
}
&__label {
display: none;
font-size: 1rem;
font-weight: var(--font-weight-strong);
text-transform: uppercase;
}
}

15
src/scss/common/_properties.scss
View File

@ -33,22 +33,12 @@
--ff-heading: 'Open Sans', var(--ff-base);
--ff-note: 'Lato', var(--ff-base);
--ff-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
}
.header-background {
// === HEADER ================================================================
--layout-header-background-height: #{get_clamp(210, 480, 320, $full-width)}; // Overridden by theme customizer
}
.header {
--layout-site-header-height: calc(#{get_clamp(190, 380, 320, $full-width)} - var(--layout-main-inset-top)); // Overridden by theme customizer
}
.header__logo {
--layout-site-logo-filter: none;
--layout-site-logo-height: 210px; // Overridden by theme customizer
}
.header__title {
--site-title-font: var(--ff-heading);
--site-title-font-size: #{get_clamp(32, 60, 320, $full-width)}; // Overridden by theme customizer
--site-title-tagline-font-size: #{get_clamp(13, 18, 320, $full-width)}; // Overridden by theme customizer
@ -127,6 +117,7 @@
--layout-background-texture-chapter: none;
--layout-background-texture-container: none;
--layout-background-texture-cards: none;
--layout-top-header-background-color: transparent;
--layout-header-background-filter: none;
--layout-header-background-box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
@ -229,7 +220,7 @@
--floating-shadow: 0 0 16px 4px rgb(0 0 0 / 30%), 1px 1px 0 0 rgb(255 255 255 / 1%) inset;
--container-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
--container-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 1px 2px -1px rgb(0 0 0 / 10%);
--figure-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
--figure-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.12)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.1));
--card-image-drop-shadow: none;
--caption-overlay-shadow: linear-gradient(0deg, rgb(0 0 0 / 70%), rgb(0 0 0 / 30%) 70%, transparent);
--embed-box-shadow: 0 0 2px rgb(0 0 0 / 30%);