rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

_s: Simplify and unify navigation classes throughout Underscores. 

For more information about the philosophy behind the new approach,
see http://24ways.org/2012/a-harder-working-class/
This commit is contained in:
obenland 2013-02-27 14:47:03 -08:00
parent 469e1f97c4
commit fa3d86936a
6 changed files with 53 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
comments.php
View File

@ -35,11 +35,11 @@
</h2>
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav role="navigation" id="comment-nav-above" class="site-navigation comment-navigation">
<nav id="comment-nav-above" role="navigation" class="navigation-comment">
<h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-before .site-navigation .comment-navigation -->
<div class="previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-before -->
<?php endif; // check for comment navigation ?>
<ol class="comment-list">
@ -55,11 +55,11 @@
</ol><!-- .commentlist -->
<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav role="navigation" id="comment-nav-below" class="site-navigation comment-navigation">
<nav id="comment-nav-below" role="navigation" class="navigation-comment">
<h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-below .site-navigation .comment-navigation -->
<div class="previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
<div class="next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
</nav><!-- #comment-nav-below -->
<?php endif; // check for comment navigation ?>
<?php endif; // have_comments() ?>

2
header.php
View File

@ -31,7 +31,7 @@
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav role="navigation" class="site-navigation main-navigation" id="site-navigation">
<nav id="site-navigation" class="navigation-main" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Menu', '_s' ); ?></h1>
<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>

6
image.php
View File

@ -35,9 +35,9 @@ get_header();
<?php edit_post_link( __( 'Edit', '_s' ), '<span class="sep"> | </span> <span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-meta -->
<nav id="image-navigation" class="site-navigation">
<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', '_s' ) ); ?></span>
<span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', '_s' ) ); ?></span>
<nav id="image-navigation" class="navigation-image">
<span class="previous"><?php previous_image_link( false, __( '&larr; Previous', '_s' ) ); ?></span>
<span class="next"><?php next_image_link( false, __( 'Next &rarr;', '_s' ) ); ?></span>
</nav><!-- #image-navigation -->
</header><!-- .entry-header -->

12
inc/template-tags.php
View File

@ -30,9 +30,7 @@ function _s_content_nav( $nav_id ) {
if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return;
$nav_class = 'site-navigation paging-navigation';
if ( is_single() )
$nav_class = 'site-navigation post-navigation';
$nav_class = ( is_single() ) ? 'navigation-post' : 'navigation-paging';
?>
<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?>">
@ -40,17 +38,17 @@ function _s_content_nav( $nav_id ) {
<?php if ( is_single() ) : // navigation links for single posts ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', '_s' ) . '</span> %title' ); ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', '_s' ) . '</span>' ); ?>
<?php previous_post_link( '<div class="previous">%link</div>', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', '_s' ) . '</span> %title' ); ?>
<?php next_post_link( '<div class="next">%link</div>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', '_s' ) . '</span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', '_s' ) ); ?></div>
<div class="previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', '_s' ) ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', '_s' ) ); ?></div>
<div class="next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', '_s' ) ); ?></div>
<?php endif; ?>
<?php endif; ?>

10
js/navigation.js
View File

@ -4,9 +4,9 @@
* Handles toggling the navigation menu for small screens.
*/
( function() {
var button = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h1' )[0],
menu = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0];
container = document.getElementById( 'site-navigation' );
var container = document.getElementById( 'site-navigation' ),
button = container.getElementsByTagName( 'h1' )[0],
menu = container.getElementsByTagName( 'ul' )[0];
if ( undefined == button || undefined == menu )
return false;
@ -18,11 +18,11 @@
if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
container.className = container.className.replace( ' main-small-navigation', ' main-navigation' );
container.className = container.className.replace( 'main-small-navigation', 'navigation-main' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
container.className = container.className.replace( ' main-navigation', ' main-small-navigation' );
container.className = container.className.replace( 'navigation-main', 'main-small-navigation' );
}
};

62
style.css
View File

@ -279,26 +279,26 @@ input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly i
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
color: #111;
}
input[type=text],
input[type=email],
input[type=password],
input[type=search] {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
padding: 3px;
}
textarea {
@ -349,26 +349,26 @@ a:active {
/* =Menu
----------------------------------------------- */
.main-navigation {
.navigation-main {
clear: both;
display: block;
float: left;
width: 100%;
}
.main-navigation ul {
.navigation-main ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
.navigation-main li {
float: left;
position: relative;
}
.main-navigation a {
.navigation-main a {
display: block;
text-decoration: none;
}
.main-navigation ul ul {
.navigation-main ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
@ -379,26 +379,26 @@ a:active {
left: 0;
z-index: 99999;
}
.main-navigation ul ul ul {
.navigation-main ul ul ul {
left: 100%;
top: 0;
}
.main-navigation ul ul a {
.navigation-main ul ul a {
width: 200px;
}
.main-navigation ul ul li {
.navigation-main ul ul li {
}
.main-navigation li:hover > a {
.navigation-main li:hover > a {
}
.main-navigation ul ul :hover > a {
.navigation-main ul ul :hover > a {
}
.main-navigation ul ul a:hover {
.navigation-main ul ul a:hover {
}
.main-navigation ul li:hover > ul {
.navigation-main ul li:hover > ul {
display: block;
}
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
.navigation-main li.current_page_item a,
.navigation-main li.current-menu-item a {
}
/* Small menu */
@ -417,7 +417,7 @@ a:active {
display: block;
}
.main-navigation ul {
.navigation-main ul {
display: none;
}
}
@ -533,15 +533,15 @@ object {
/* =Navigation
----------------------------------------------- */
.site-content .site-navigation {
.site-content [class*="navigation"] {
margin: 0 0 1.5em;
overflow: hidden;
}
.site-content .nav-previous {
[class*="navigation"] .previous {
float: left;
width: 50%;
}
.site-content .nav-next {
[class*="navigation"] .next {
float: right;
text-align: right;
width: 50%;
@ -577,7 +577,7 @@ object {
----------------------------------------------- */
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll .navigation-paging, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}