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

2
header.php
View File

@ -31,7 +31,7 @@
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup> </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> <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> <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>' ); ?> <?php edit_post_link( __( 'Edit', '_s' ), '<span class="sep"> | </span> <span class="edit-link">', '</span>' ); ?>
</div><!-- .entry-meta --> </div><!-- .entry-meta -->
<nav id="image-navigation" class="site-navigation"> <nav id="image-navigation" class="navigation-image">
<span class="previous-image"><?php previous_image_link( false, __( '&larr; Previous', '_s' ) ); ?></span> <span class="previous"><?php previous_image_link( false, __( '&larr; Previous', '_s' ) ); ?></span>
<span class="next-image"><?php next_image_link( false, __( 'Next &rarr;', '_s' ) ); ?></span> <span class="next"><?php next_image_link( false, __( 'Next &rarr;', '_s' ) ); ?></span>
</nav><!-- #image-navigation --> </nav><!-- #image-navigation -->
</header><!-- .entry-header --> </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() ) ) if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return; return;
$nav_class = 'site-navigation paging-navigation'; $nav_class = ( is_single() ) ? 'navigation-post' : 'navigation-paging';
if ( is_single() )
$nav_class = 'site-navigation post-navigation';
?> ?>
<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?>"> <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 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 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="nav-next">%link</div>', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', '_s' ) . '</span>' ); ?> <?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 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() ) : ?> <?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 endif; ?>
<?php if ( get_previous_posts_link() ) : ?> <?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; ?>
<?php endif; ?> <?php endif; ?>

10
js/navigation.js
View File

@ -4,9 +4,9 @@
* Handles toggling the navigation menu for small screens. * Handles toggling the navigation menu for small screens.
*/ */
( function() { ( function() {
var button = document.getElementById( 'site-navigation' ).getElementsByTagName( 'h1' )[0], var container = document.getElementById( 'site-navigation' ),
menu = document.getElementById( 'site-navigation' ).getElementsByTagName( 'ul' )[0]; button = container.getElementsByTagName( 'h1' )[0],
container = document.getElementById( 'site-navigation' ); menu = container.getElementsByTagName( 'ul' )[0];
if ( undefined == button || undefined == menu ) if ( undefined == button || undefined == menu )
return false; return false;
@ -18,11 +18,11 @@
if ( -1 != button.className.indexOf( 'toggled-on' ) ) { if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' ); button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.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 { } else {
button.className += ' toggled-on'; button.className += ' toggled-on';
menu.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; border: 0;
padding: 0; padding: 0;
} }
input[type=text], input[type="text"],
input[type=email], input[type="email"],
input[type=password], input[type="password"],
input[type=search], input[type="search"],
textarea { textarea {
color: #666; color: #666;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
} }
input[type=text]:focus, input[type="text"]:focus,
input[type=email]:focus, input[type="email"]:focus,
input[type=password]:focus, input[type="password"]:focus,
input[type=search]:focus, input[type="search"]:focus,
textarea:focus { textarea:focus {
color: #111; color: #111;
} }
input[type=text], input[type="text"],
input[type=email], input[type="email"],
input[type=password], input[type="password"],
input[type=search] { input[type="search"] {
padding: 3px; padding: 3px;
} }
textarea { textarea {
@ -349,26 +349,26 @@ a:active {
/* =Menu /* =Menu
----------------------------------------------- */ ----------------------------------------------- */
.main-navigation { .navigation-main {
clear: both; clear: both;
display: block; display: block;
float: left; float: left;
width: 100%; width: 100%;
} }
.main-navigation ul { .navigation-main ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
} }
.main-navigation li { .navigation-main li {
float: left; float: left;
position: relative; position: relative;
} }
.main-navigation a { .navigation-main a {
display: block; display: block;
text-decoration: none; text-decoration: none;
} }
.main-navigation ul ul { .navigation-main ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-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); box-shadow: 0 3px 3px rgba(0,0,0,0.2);
@ -379,26 +379,26 @@ a:active {
left: 0; left: 0;
z-index: 99999; z-index: 99999;
} }
.main-navigation ul ul ul { .navigation-main ul ul ul {
left: 100%; left: 100%;
top: 0; top: 0;
} }
.main-navigation ul ul a { .navigation-main ul ul a {
width: 200px; 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; display: block;
} }
.main-navigation li.current_page_item a, .navigation-main li.current_page_item a,
.main-navigation li.current-menu-item a { .navigation-main li.current-menu-item a {
} }
/* Small menu */ /* Small menu */
@ -417,7 +417,7 @@ a:active {
display: block; display: block;
} }
.main-navigation ul { .navigation-main ul {
display: none; display: none;
} }
} }
@ -533,15 +533,15 @@ object {
/* =Navigation /* =Navigation
----------------------------------------------- */ ----------------------------------------------- */
.site-content .site-navigation { .site-content [class*="navigation"] {
margin: 0 0 1.5em; margin: 0 0 1.5em;
overflow: hidden; overflow: hidden;
} }
.site-content .nav-previous { [class*="navigation"] .previous {
float: left; float: left;
width: 50%; width: 50%;
} }
.site-content .nav-next { [class*="navigation"] .next {
float: right; float: right;
text-align: right; text-align: right;
width: 50%; width: 50%;
@ -577,7 +577,7 @@ object {
----------------------------------------------- */ ----------------------------------------------- */
/* Globally hidden elements when Infinite Scroll is supported and in use. */ /* 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) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none; display: none;
} }