Skip to content
This repository has been archived by the owner on Sep 16, 2019. It is now read-only.

Commit

Permalink
Merge pull request #413 from olefredrik/feature/improveMobileNavigati…
Browse files Browse the repository at this point in the history
…onCustomizer

Feature/improve mobile navigation customizer
  • Loading branch information
olefredrik committed Aug 17, 2015
2 parents 3c9300e + e27498c commit 72e3cd9
Show file tree
Hide file tree
Showing 12 changed files with 130 additions and 61 deletions.
2 changes: 1 addition & 1 deletion css/foundation.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/foundation.css.map

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions footer.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
*
* @package WordPress
* @subpackage FoundationPress
* @since FoundationPress 1.0.0.0
* @since FoundationPress 1.0.0
*/

?>
Expand All @@ -18,13 +18,13 @@
<?php do_action( 'foundationpress_after_footer' ); ?>
</footer>

<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>
<?php if ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'offcanvas' ) : ?>
<a class="exit-off-canvas"></a>
<?php endif; ?>

<?php do_action( 'foundationpress_layout_end' ); ?>

<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>
<?php if ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'offcanvas' ) : ?>
</div>
</div>
<?php endif; ?>
Expand Down
31 changes: 9 additions & 22 deletions header.php
Original file line number Diff line number Diff line change
Expand Up @@ -21,37 +21,24 @@
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/icons/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/icons/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/icons/apple-touch-icon-precomposed.png">

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action( 'foundationpress_after_body' ); ?>
<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>

<?php if ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'offcanvas' ) : ?>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<?php endif; ?>

<?php do_action( 'foundationpress_layout_start' ); ?>


<?php if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) : ?>
<?php $GLOBALS['offcanvasposition'] = 'right'; // Can be 'left' or 'right'?>
<nav class="tab-bar">
<section class="<?php echo $GLOBALS['offcanvasposition'];?>-small">
<a class="<?php echo $GLOBALS['offcanvasposition'];?>-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">

<h1 class="title">
<?php bloginfo( 'name' ); ?>
</h1>

</section>
</nav>
<?php do_action( 'foundationpress_layout_start' ); ?>

<?php get_template_part( 'parts/off-canvas-menu' ); ?>
<?php endif; ?>
<?php
if ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'offcanvas' ) :
get_template_part( 'parts/off-canvas-menu' );
endif;
?>

<?php get_template_part( 'parts/top-bar' ); ?>

Expand Down
9 changes: 5 additions & 4 deletions js/foundation.js

Large diffs are not rendered by default.

63 changes: 53 additions & 10 deletions library/custom-nav.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,50 +17,93 @@ function wpt_register_theme_customizer( $wp_customize ) {
'description' => __( 'Controls the mobile menu', 'foundationpress' ),
) );

// Create custom nav field
// Create custom field for mobile navigation layout
$wp_customize->add_section( 'mobile_menu_layout' , array(
'title' => __('Offcanvas or Topbar','foundationpress'),
'title' => __('Mobile navigation layout','foundationpress'),
'panel' => 'mobile_menu_settings',
'priority' => 1000,
));

// Set default
// Create custom field for mobile navigation position
$wp_customize->add_section( 'mobile_menu_position' , array(
'title' => __('Mobile navigation position','foundationpress'),
'panel' => 'mobile_menu_settings',
'priority' => 1001,
));

// Set default navigation layout
$wp_customize->add_setting(
'wpt_mobile_menu',
'wpt_mobile_menu_layout',
array(
'default' => __( 'offcanvas', 'foundationpress' ),
)
);

// Add radio button options
// Set default navigation position
$wp_customize->add_setting(
'wpt_mobile_menu_position',
array(
'default' => __( 'left', 'foundationpress' ),
)
);

// Add options for navigation layout
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'mobile_menu_layout',
array(
'type' => 'radio',
'label' => __('Offcanvas or Topbar', 'foundationpress'),
'section' => 'mobile_menu_layout',
'settings' => 'wpt_mobile_menu',
'settings' => 'wpt_mobile_menu_layout',
'choices' => array(
'offcanvas' => 'Offcanvas',
'topbar' => 'Topbar',
),
)
)
);

// Add options for navigation position
$wp_customize->add_control(
new WP_Customize_Control(
$wp_customize,
'mobile_menu_position',
array(
'type' => 'radio',
'section' => 'mobile_menu_position',
'settings' => 'wpt_mobile_menu_position',
'choices' => array(
'left' => 'left',
'right' => 'right',
),
)
)
);
}

add_action( 'customize_register', 'wpt_register_theme_customizer' );

// Return the mobile nav position
add_filter( 'filter_mobile_nav_position', 'mobile_nav_position' );
function mobile_nav_position( $position ) {
if ( get_theme_mod( 'wpt_mobile_menu_position' ) == 'left' ) :
$position = 'left';
elseif ( get_theme_mod( 'wpt_mobile_menu_position' ) == 'right' ) :
$position = 'right';
endif;
return $position;
}

// Add class to body to help w/ CSS
add_filter( 'body_class', 'mobile_nav_class' );
function mobile_nav_class( $classes ) {
if ( get_theme_mod( 'wpt_mobile_menu' ) == 'offcanvas' ) :
if ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'offcanvas' ) :
$classes[] = 'offcanvas';
elseif ( get_theme_mod( 'wpt_mobile_menu' ) == 'topbar' ) :
elseif ( get_theme_mod( 'wpt_mobile_menu_layout' ) == 'topbar' ) :
$classes[] = 'topbar';
endif;
return $classes;
}
endif;
?>
?>
9 changes: 5 additions & 4 deletions library/offcanvas-walker.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@
class Foundationpress_Offcanvas_Walker extends Walker_Nav_Menu {

/**
* Side on which the off_canvas nav will be shown ('left' or 'right')
* Set the side on which the child elements will slide in from ('left' or 'right')
* @var string
*/
private $direction = '';

public function __construct($direction = 'left') {
private $direction = 'left';

public function __construct($direction) {
$this->direction = $direction;
}

Expand Down Expand Up @@ -47,4 +48,4 @@ function start_lvl( &$output, $depth = 0, $args = array() ) {

}
endif;
?>
?>
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "foundationpress",
"version": "1.0.0",
"version": "1.1.0",
"devDependencies": {
"bower": "^1.4.1",
"grunt": "~0.4.1",
Expand Down
26 changes: 17 additions & 9 deletions parts/off-canvas-menu.php
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@
*/

?>
<?php
// Position can be 'left' or 'right', the variable can also be set in the header.php
if ( ! isset($GLOBALS['offcanvasposition'] ) ) {
$GLOBALS['offcanvasposition'] = 'left';
}
?>
<aside class="<?php echo $GLOBALS['offcanvasposition'];?>-off-canvas-menu" aria-hidden="true">
<?php foundationpress_mobile_off_canvas($GLOBALS['offcanvasposition']); ?>
</aside>

<nav class="tab-bar">
<section class="<?php echo apply_filters( 'filter_mobile_nav_position', 'mobile_nav_position' ); ?>-small">
<a class="<?php echo apply_filters( 'filter_mobile_nav_position', 'mobile_nav_position' ); ?>-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">

<h1 class="title">
<?php bloginfo( 'name' ); ?>
</h1>

</section>
</nav>

<aside class="<?php echo apply_filters( 'filter_mobile_nav_position', 'mobile_nav_position' ); ?>-off-canvas-menu" aria-hidden="true">
<?php foundationpress_mobile_off_canvas(); ?>
</aside>
6 changes: 3 additions & 3 deletions parts/top-bar.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
?>
<div class="top-bar-container contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<ul class="title-area top-bar-<?php echo apply_filters( 'filter_mobile_nav_position', 'mobile_nav_position' ); ?>">
<li class="name">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
<li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
</ul>
<section class="top-bar-section">
<?php foundationpress_top_bar_l(); ?>
<?php foundationpress_top_bar_r(); ?>
</section>
</nav>
</div>
</div>
33 changes: 31 additions & 2 deletions scss/site/_topbar.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,35 @@
// Add some whitespace between top bar and content
.top-bar-container, .tab-bar {
margin-bottom: rem-calc(32);

@media only screen and (max-width: ($topbar-breakpoint)) {
.top-bar-left {
li.name {
padding-left: rem-calc(50);
}

li.toggle-topbar a, li.menu-icon {
position: absolute;
left: 0;
}

}

.top-bar-right {
li.toggle-topbar a, li.menu-icon {
position: absolute;
right: 0;
}
}
}
}

.left-small {
border-right: 0;
}

.right-small {
border-left: 0;
}

.top-bar .name {
Expand All @@ -16,7 +45,7 @@
}

// Switch between the mobile menu (tab-bar) and desktop menu (topbar) based on a custom $topbar-breakpoint value.
// The $topbar-breakpoint can be edited in _custom-settings.scss.
// The $topbar-breakpoint can be edited in _custom-settings.scss.

@media only screen and (min-width: ($topbar-breakpoint + em-calc(1))) {
.tab-bar { display: none; }
Expand All @@ -25,4 +54,4 @@
// Hide the topbar when the screen size is smaller than the topbar breakpoint
@media only screen and (max-width: $topbar-breakpoint) {
body.offcanvas .top-bar { display: none; }
}
}
2 changes: 1 addition & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ Theme Name: FoundationPress
Theme URI: http://foundationpress.olefredrik.com
Github Theme URI: https://github.com/olefredrik/FoundationPress
Description: FoundationPress is a WordPress starter theme based on Foundation 5 by Zurb
Version: 1.0.0
Version: 1.1.0
Author: Ole Fredrik Lie
Author URI: http://olefredrik.com/
Expand Down

0 comments on commit 72e3cd9

Please sign in to comment.