Improve handbook styles

humanmade · Nov 27, 2017 · fe7b4ba · fe7b4ba
1 parent d774aec
commit fe7b4ba
Show file tree

Hide file tree

Showing 20 changed files with 135 additions and 176 deletions.
diff --git a/assets/src/scripts/components/NavAccordion/NavAccordion.js b/assets/src/scripts/components/NavAccordion/NavAccordion.js
@@ -18,7 +18,7 @@ export default function( navAccordionItem ) {
 
 	navAccordionToggle.appendChild( span ) ;
 	navAccordionToggle.classList.add( 'Btn' );
-	navAccordionToggle.classList.add( 'NavAccordion_Toggle' );
+	navAccordionToggle.classList.add( 'nav-accordion__toggle' );
 	navAccordionToggle.setAttribute( 'role', 'button' );
 	navAccordionToggle.setAttribute( 'aria-haspopup', 'true' );
 
@@ -33,29 +33,29 @@ export default function( navAccordionItem ) {
 	var toggleSubNav = function( show ) {
 
 		if ( 'undefined' === typeof show ) {
-			show = navAccordionItem.classList.contains( 'NavAccordion_Item-Closed' );
+			show = navAccordionItem.classList.contains( 'nav-accordion__item--closed' );
 			navAccordionToggle.setAttribute( 'aria-expanded', 'false' );
 		}
 
 		if ( show ) {
-			navAccordionItem.classList.remove( 'NavAccordion_Item-Closed' );
-			navAccordionItem.classList.add( 'NavAccordion_Item-Open' );
-			navAccordionToggle.classList.add( 'NavAccordion_Toggle-Open' );
+			navAccordionItem.classList.remove( 'nav-accordion__item--closed' );
+			navAccordionItem.classList.add( 'nav-accordion__item--open' );
+			navAccordionToggle.classList.add( 'nav-accordion__toggle--open' );
 			navAccordionToggle.setAttribute( 'aria-expanded', 'true' );
 			subNav.style.display = 'block';
 		} else {
-			navAccordionItem.classList.add( 'NavAccordion_Item-Closed' );
-			navAccordionItem.classList.remove( 'NavAccordion_Item-Open' );
-			navAccordionToggle.classList.remove( 'NavAccordion_Toggle-Open' );
+			navAccordionItem.classList.add( 'nav-accordion__item--closed' );
+			navAccordionItem.classList.remove( 'nav-accordion__item--open' );
+			navAccordionToggle.classList.remove( 'nav-accordion__toggle--open' );
 			navAccordionToggle.setAttribute( 'aria-expanded', 'false' );
 			subNav.style.display = 'none';
 		}
 
 	}
 
-	if ( navAccordionItem.classList.contains( 'NavAccordion_Item-Active' ) ) {
+	if ( navAccordionItem.classList.contains( 'nav-accordion__item--active' ) ) {
 		toggleSubNav( true );
-	} else if ( subNav.getElementsByClassName( 'NavAccordion_Item-Active' ).length > 0 ) {
+	} else if ( subNav.getElementsByClassName( 'nav-accordion__item--active' ).length > 0 ) {
 		toggleSubNav( true );
 	} else {
 		toggleSubNav( false );

diff --git a/assets/src/scripts/components/PageHistory/PageHistoryList.js b/assets/src/scripts/components/PageHistory/PageHistoryList.js
@@ -29,7 +29,7 @@ export default class PageHistoryList extends React.Component {
 		toggleButtonClasses = [ 'btn btn--small btn--toggle' ];
 		toggleButtonClasses.push( this.state.expanded ? ' btn--state-expanded' : null );
 
-		loadMorebuttonClasses = [ 'btn btn--small btn-Link' ];
+		loadMorebuttonClasses = [ 'btn btn--small btn--tertiary' ];
 		loadMorebuttonClasses.push( this.props.loading ? 'btn-Loading' : null );
 
 		return (
@@ -50,7 +50,7 @@ export default class PageHistoryList extends React.Component {
 					})}
 				</ul>
 				<button onClick={ () => actions.onfetchRevisions() } className={ loadMorebuttonClasses.join( ' ' ) } disabled={ ! this.props.hasMore }>
-					<span className={ this.props.loading ? 'Loading Loading-Active' : 'Loading' }></span>
+					{ this.props.loading && <span className="loading loading--active"></span> }
 					{ PageHistorySettings.strings.loadMore }
 				</button>
 			</div>

diff --git a/assets/src/scripts/components/SearchBar/SearchBarResult.js b/assets/src/scripts/components/SearchBar/SearchBarResult.js
@@ -14,7 +14,7 @@ export default class SearchBarResult extends Component {
 			'search-bar__result--post':    'post' === this.props.type
 		});
 
-		let style = { width: ( this.props.containerWidth - 60 ) + 'px' }
+		let style = {}
 
 		return (
 			<div style={ style } className={ classes }>

diff --git a/assets/src/scripts/components/SearchBar/SearchBarResults.js b/assets/src/scripts/components/SearchBar/SearchBarResults.js
@@ -9,26 +9,24 @@ export default class SearchBarResults extends Component {
 
 	render() {
 
-		// Get the height of the whole document.
-		// Bit convoluted, taken from jQuery.
-		var height = Math.max(
-			document.body.scrollHeight,
-			document.body.offsetHeight,
-			document.documentElement.clientHeight,
-			document.documentElement.scrollHeight,
-			document.documentElement.offsetHeight
-		);
-
+		var height   = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+		var search   = document.getElementById( 'site-search' );
 		var adminBar = document.getElementById( 'wpadminbar' );
 
+		if ( search ) {
+			height -= search.offsetHeight;
+		}
+
 		if ( adminBar ) {
-			height = height - adminBar.offsetHeight;
+			height -= adminBar.offsetHeight;
 		}
 
+		height -= 54;
+
 		let displayNoResults = this.props.query.length > 1 && this.props.results.length < 1;
 
 		return (
-			<div className="search-bar__results" style={ { maxHeight: ( height - 108 ) + 'px' } }>
+			<div className="search-bar__results" style={ { maxHeight: height }}>
 
 				<h3
 					className="search-bar__results__info"

diff --git a/assets/src/scripts/theme.js b/assets/src/scripts/theme.js
@@ -34,7 +34,7 @@ searchBarContainers.forEach( searchBarContainer => {
 
 // Init Accordion Nav for all NavAccordion Items.
 Array.prototype.forEach.call(
-	document.getElementsByClassName( 'NavAccordion_Item' ),
+	document.getElementsByClassName( 'nav-accordion__item' ),
 	initNavAccordion
 );
 
diff --git a/assets/src/styles/base/_fonts.scss b/assets/src/styles/base/_fonts.scss
@@ -29,8 +29,8 @@ li,
 }
 
 .wf-active {
-	.NavAccordion ul,
-	.NavAccordion ol {
+	.nav-accordion ul,
+	.nav-accordion ol {
 		transition: opacity linear 0.05s, max-height ease-in-out 0.1s;
 	}
 }
diff --git a/assets/src/styles/base/_layout.scss b/assets/src/styles/base/_layout.scss
@@ -28,47 +28,26 @@ body {
 }
 
 .site-content-container {
-
 	width: 100%;
 	padding: $margin-vertical-sm $gutter-width * 2;
+	display: grid;
+	grid-template-columns: auto;
 
 	@media #{ $mq-md-up } {
 		width: calc( 100% - 300px );
 		max-width: calc( 40rem + #{ $gutter-width + 250px + $gutter-width * 2 } );
+		grid-template-columns: calc( 100% - 250px - $gutter-width ) 250px;
+		grid-column-gap: $gutter-width;
 	}
 
 	@media #{ $mq-lg-up } {
 		max-width: calc( 40rem + #{ $gutter-width * 2 + 250px + $gutter-width * 4 } );
 		padding: $margin-vertical-sm * 2 ( $gutter-width * 4 );
+		grid-template-columns: calc( 100% - 250px - #{ $gutter-width * 2 } ) 250px;
+		grid-column-gap: $gutter-width * 2;
 	}
 }
 
-.site-content {
-
-	width: 100%;
-	float: left;
-
-	@media #{ $mq-md-up } {
-		width: calc( 100% - 250px );
-		padding-right: $gutter-width;
-	}
-
-	@media #{ $mq-lg-up } {
-		padding-right: $gutter-width * 2;
-	}
-}
-
-.site-content-sidebar {
-
-	width: 100%;
-	float: left;
-
-	@media #{ $mq-md-up } {
-		width: 250px;
-	}
-
-}
-
 .site-footer {
 	width: 100%;
 	clear: both;

diff --git a/assets/src/styles/base/_variables.scss b/assets/src/styles/base/_variables.scss
@@ -11,7 +11,6 @@ $border-color-darken: darken( $border-color, 10% ) !default;
 
 // Page History
 $color-success: $hm-handbook-colour-green !default;
-$color-pagehistory-background: $hm_light-grey !default;
 $color-pagehistory-list: $hm-medium-grey !default;
 
 // Sidebar

diff --git a/assets/src/styles/components/_Nav.scss b/assets/src/styles/components/_Nav.scss
@@ -1,4 +1,4 @@
-.Nav_Item-Private a:before {
+.nav-accordion__item--private a:before {
 	$iconSrc: iconSrc( "lock" );
 	content: " ";
 	display: inline-block;

diff --git a/assets/src/styles/components/_PageHistory.scss b/assets/src/styles/components/_PageHistory.scss
@@ -9,12 +9,9 @@
 }
 
 .PageHistory_List_Container {
-
 	width: 100%;
 	position: relative;
 	margin: $base-line-height 0;
-	padding: #{ $base-line-height / 2 } #{ $gutter-width };
-	background: $color-pagehistory-background;
 	border-radius: 2px;
 
 	@media #{ $mq-md-up } {
@@ -36,11 +33,10 @@
 }
 
 .PageHistory_List_Container {
-	.PageHistory_List + .btn .Loading {
+	.PageHistory_List + .btn .loading {
 		background-image: url( "#{ $images-path }/icons/icon-spinner-black.svg" );
-		background-size: 50%;
-		margin-right: 7px;
-		opacity: 0.3;
+		background-size: 60%;
+		margin: 0 3px 0 -5px;
 	}
 }
 
@@ -99,7 +95,6 @@
 
 	& + .btn {
 		margin: 0;
-		padding: 0;
 	}
 
 }
@@ -162,7 +157,6 @@
 	@include text-sm;
 	display: none; // Only shown when active.
 	white-space: pre-wrap;
-	background: $color-pagehistory-background;
 	padding: $base-line-height / 2 $gutter-width / 2;
 	font-family: $font-family-code;
 	word-wrap: break-word;
@@ -182,11 +176,10 @@
 }
 
 .btn--toggle {
-
 	background: none;
 	border: none;
 	position: absolute;
-	top: .7775rem;
+	top: 0;
 	right: $gutter-width;
 	margin: 0;
 	text-indent: 100%;

diff --git a/assets/src/styles/components/_Pagination.scss b/assets/src/styles/components/_Pagination.scss
@@ -1,5 +1,4 @@
 .Pagination {
-
 	@include clearfix;
 
 	margin: $base-line-height auto;

diff --git a/assets/src/styles/components/_footer.scss b/assets/src/styles/components/_footer.scss
@@ -1,6 +1,18 @@
-.Footer {
+.site-footer {
+	margin-top: $margin-vertical-lg;
+	border-top: 1px solid $border-color-light;
 
 	.hm-link {
+		&:link,
+		&:visited {
+			border: none;
+			color: $hm-medium-grey;
+		}
+
+		.hm-logo--tiny {
+			margin-left: 0;
+		}
+
 		&:hover,
 		&:active,
 		&:focus {
@@ -11,7 +23,6 @@
 				opacity: 1;
 			}
 		}
-
 	}
 
 	.footer-content {