Framework: Allow for a sans-sidebar layout and adjust accordingly

assets/stylesheets/layout/_main.scss

@@ -237,35 +237,42 @@ html.iframed {
 
 /* =General Layout
 ----------------------------------------------- */
+$sidebar-width-max: 272px;
+$sidebar-width-min: 228px;
+
 .wp-content {
 	@include clear-fix;
 	position: relative;
-	width: 100%;
-	margin: 47px auto 0;
+	margin: 47px 0 0 0;
+	padding: 32px 32px 32px ( $sidebar-width-max + 32px );
 	box-sizing: border-box;
 	overflow: hidden;
-}
 
-.wp-primary {
-	padding: 32px;
-	margin-left: 272px;
+	.has-no-sidebar & {
+		padding-left: 32px;
+	}
 }
 
 // Tablets
 @include breakpoint( "<960px" ) {
-	.wp-primary {
-		margin-left: 224px;
+	.wp-content {
+		padding: 24px;
+		padding-left: ( $sidebar-width-min + 24px );
+
+		.has-no-sidebar & {
+			padding-left: 24px;
+		}
 	}
 }
 
 // Mobile (Full Width)
 @include breakpoint( "<660px" ) {
-	.wp-primary {
+	.wp-content {
 		margin-left: 0;
 		padding: 8px;
 
-		.focus-sidebar & {
-			transform: translateX( 100vw );
+		.has-no-sidebar & {
+			padding-left: 8px;
 		}
 
 		.focus-sidebar.is-section-post & {

assets/stylesheets/layout/_sidebar.scss

@@ -7,16 +7,16 @@
 	position: fixed;
 		top: 47px;
 		bottom: 0;
+		left: 0;
 
 	@include breakpoint( "<960px" ) {
 		border-right: 1px solid lighten( $gray, 25% );
-		width: 224px;
+		width: $sidebar-width-min;
 	}
 
 	@include breakpoint( ">960px" ) {
 		border-right: 1px solid lighten( $gray, 25% );
-		left: 0;
-		width: 272px;
+		width: $sidebar-width-max;
 	}
 
 	@include breakpoint( "<660px" ) {

client/auth/login.jsx

@@ -96,7 +96,7 @@ module.exports = React.createClass( {
 		const { requires2fa, inProgress, errorMessage, errorLevel } = this.state;
 
 		return (
-			<Main className="auth is-full">
+			<Main className="auth">
 				<WordPressLogo />
 				<form className="auth__form" onSubmit={ this.submitForm }>
 					<FormFieldset>

client/components/main/style.scss

@@ -3,27 +3,9 @@
 	max-width: 720px;
 	z-index: 20;
 
-	// Some screens (like /sites) don't have a sidebar.
-	// @todo: This kinda sucks. I think the full-width class
-	// should be moved to .wp-primary, and we can just remove
-	// the margin, instead of overriding it here. -shaun
-	&.is-full {
-		margin-left: -272px;
-		max-width: calc( 100% + 272px );
-
-		// Tablets
-		@include breakpoint( "<960px" ) {
-			margin-left: -224px;
-		}
-
-		@include breakpoint( "<660px" ) {
-			margin-left: 0;
-			max-width: 100%;
-		}
-	}
-
 	// Themes is a great example of using all this new space ;)
-	&.themes {
+	&.themes,
+	&.sites {
 		max-width: 100%;
 	}
 

client/devdocs/controller.js

@@ -50,7 +50,10 @@ var devdocs = {
 				false );
 		}
 
-		context.layout.setState( { section: 'devdocs' } );
+		context.layout.setState( {
+			section: 'devdocs',
+			noSidebar: true
+		} );
 
 		React.render(
 			React.createElement( DocsComponent, {

client/layout/index.jsx

@@ -59,7 +59,8 @@ module.exports = React.createClass( {
 	getInitialState: function() {
 		return {
 			section: false,
-			isLoading: false
+			isLoading: false,
+			noSidebar: false
 		};
 	},
 
@@ -93,6 +94,10 @@ module.exports = React.createClass( {
 				'is-active': this.state.isLoading
 			} );
 
+		if ( this.state.noSidebar ) {
+			sectionClass += ' has-no-sidebar';
+		}
+
 		return (
 			<div className={ sectionClass }>
 				{ config.isEnabled( 'keyboard-shortcuts' ) ? <KeyboardShortcutsMenu /> : null }

client/mailing-lists/controller.js

@@ -11,6 +11,12 @@ import MainComponent from './main';
 
 export default {
 	unsubscribe( context ) {
+		// We don't need the sidebar here.
+		context.layout.setState( {
+			section: 'me',
+			noSidebar: true }
+		);
+
 		React.render(
 			React.createElement( MainComponent, {
 				email: context.query.email,

client/me/controller.js

@@ -299,6 +299,7 @@ export default {
 
 		if ( isWelcome ) {
 			React.unmountComponentAtNode( document.getElementById( 'secondary' ) );
+			context.layout.setState( { noSidebar: true } );
 		}
 
 		analytics.tracks.recordEvent( 'calypso_me_next_view', { is_welcome: isWelcome } );

client/me/next-steps/next-steps.scss

@@ -1,19 +1,5 @@
-.next-steps.is-single-page {
-	box-sizing: border-box;
-	margin: 0 0 0 -227px;
-	max-width: inherit;
-
-	.next-steps__intro,
-	.next-steps__steps,
-	.next-steps__outro {
-		max-width: 640px;
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	@include breakpoint( "<660px" ) {
-		margin-left: 0;
-	}
+.has-no-sidebar .next-steps {
+	max-width: 640px;
 }
 
 .next-steps__title {
@@ -28,4 +14,4 @@
 
 .next-steps__outro {
 	clear: both;
-}
+}

client/my-sites/controller.js

@@ -251,7 +251,10 @@ module.exports = {
 		 * Sites is rendered on #primary but it doesn't expect a sidebar to exist
 		 * so section needs to be set explicitly and #secondary cleaned up
 		 */
-		context.layout.setState( { section: 'sites' } );
+		context.layout.setState( {
+			section: 'sites',
+			noSidebar: true
+		} );
 		React.unmountComponentAtNode( document.getElementById( 'secondary' ) );
 		layoutFocus.set( 'content' );
 

client/my-sites/sites/sites.jsx

@@ -195,7 +195,7 @@ module.exports = React.createClass( {
 		}
 
 		return (
-			<div className="main main-column sites is-full" role="main">
+			<div className="main main-column sites" role="main">
 				<h2 className="sites__select-heading">{ siteSelectionHeaderText }</h2>
 				{ this.getSiteCount() > 1 ?
 					<SearchCard onSearch={ this.doSearch } analyticsGroup="Sites" />

client/my-sites/upgrades/checkout/thank-you.jsx

@@ -112,7 +112,7 @@ var CheckoutThankYou = React.createClass( {
 		}
 
 		return (
-			<Main className="checkout-thank-you is-full">
+			<Main className="checkout-thank-you">
 				<Card>
 					<div className="thank-you-message">
 						<span className="receipt-icon"></span>

client/my-sites/upgrades/controller.jsx

@@ -200,6 +200,7 @@ module.exports = {
 			basePath = route.sectionify( context.path );
 
 		analytics.pageView.record( basePath, 'Checkout Thank You' );
+		context.layout.setState( { noSidebar: true } );
 
 		if ( ! lastTransaction ) {
 			page.redirect( '/plans' );

client/notices/style.scss

@@ -13,10 +13,13 @@
 	.notice__text {
 		flex-grow: 1;
 		flex-basis: 100px;
-		max-width: 680px; // For line-length sanity
-
 		padding: 11px 24px;
 
+		& > span,
+		& > div {
+			max-width: 680px;
+		}
+
 		@include breakpoint( ">660px" ) {
 			padding: 13px 48px;
 		}
@@ -78,14 +81,7 @@
 	// Email Verification Notice
 	&.is-email-verification {
 		background: $white;
-		margin-left: 273px;
-		margin-bottom: 0;
 		box-shadow: 0 0 0 1px lighten( $gray, 20 );
-
-		// The signup screens don't have the sidebar
-		.is-section-signup & {
-			margin-left: 0;
-		}
 	}
 }
 
@@ -232,29 +228,25 @@
 }
 
 .notices-list {
-	@include breakpoint( ">660px" ) {
-		margin-left: 273px;
-	}
-
-	.notice {
-		margin-bottom: 0;
-	}
+	overflow: hidden;
 
 	&.is-pinned {
-		width: 100%;
-			min-width: 320px;
-			max-width: 960px;
+		width: calc( 100% - 272px - 32px - 32px );
 		z-index: 180;
 		position: fixed;
-			top: 47px;
+			top: 47px + 32px;
 
 		.notice {
 			z-index: 180;
 		}
 
-		@include breakpoint( "<480px" ) {
-			top: 0;
-			left: 0;
+		@include breakpoint( "<960px" ) {
+			width: calc( 100% - 228px - 24px - 24px );
+		}
+
+		@include breakpoint( "<660px" ) {
+			top: 16px;
+			width: calc( 100% - 16px );
 		}
 	}
 }

client/post-editor/style.scss

@@ -1,7 +1,9 @@
-.is-section-post .wp-primary {
+.is-section-post .wp-content {
 	// We don't need the space for a sidebar
 	margin-left: 0;
 	padding-bottom: 0;
+	padding-left: 0;
+	padding-right: 0;
 
 	// Lets go full width on smaller screens
 	@include breakpoint( "<660px" ) {

client/signup/controller.js

@@ -77,7 +77,10 @@ export default {
 
 		titleActions.setTitle( i18n.translate( 'Create an account' ) );
 
-		context.layout.setState( { section: 'signup' } );
+		context.layout.setState( {
+			section: 'signup',
+			noSidebar: true
+		} );
 
 		React.render(
 			React.createElement( SignupComponent, {

client/signup/style.scss

@@ -3,11 +3,6 @@
 	margin: 0 auto;
 }
 
-// We don't need the space for a sidebar
-.is-section-signup .wp-primary {
-	margin-left: 0;
-}
-
 .signup__step {
 	margin: 0 24px;
 	position: absolute;