Editor: Fix footer styling issues.

Automattic · Mar 14, 2017 · adf6e30 · adf6e30
1 parent 8480203
commit adf6e30
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 12 deletions.
diff --git a/assets/stylesheets/shared/functions/_z-index.scss b/assets/stylesheets/shared/functions/_z-index.scss
@@ -75,6 +75,7 @@ $z-layers: (
 		'.domain-suggestion.is-clickable:hover': 1,
 		'.editor-html-toolbar': 1,
 		'.thank-you-card__header': 1,
+		'.editor-action-bar__saved-status': 2,
 		'.is-installing .theme': 2,
 		'.reader-update-notice': 2,
 		'.people-list-item .card__link-indicator': 2,
@@ -92,6 +93,7 @@ $z-layers: (
 		'ul.module-content-list-item-actions.collapsed': 3,
 		'.auth__input-wrapper .gridicon': 3,
 		'.auth__self-hosted-instructions': 4,
+		'.editor-word-count': 4,
 		'.auth__form .form-password-input__toggle-visibility': 4,
 		'.site-selector': 10,
 		'.editor-featured-image__preview.is-transient::after': 10,

diff --git a/client/post-editor/editor-action-bar/index.jsx b/client/post-editor/editor-action-bar/index.jsx
@@ -41,6 +41,7 @@ export default React.createClass( {
 			<div className="editor-action-bar">
 				<div className="editor-action-bar__cell is-left">
 					<EditorStatusLabel
+						className="editor-action-bar__saved-status"
 						post={ this.props.savedPost }
 						advancedStatus
 						type={ this.props.type }

diff --git a/client/post-editor/editor-action-bar/style.scss b/client/post-editor/editor-action-bar/style.scss
@@ -9,11 +9,25 @@
 	@include breakpoint( "<660px" ) {
 		margin-bottom: 8px;
 	}
+}
+
+.editor-action-bar__saved-status {
+	line-height: 1;
+	position: fixed;
+		bottom: 0px;
+		left: 8px;
+	padding: 8px;
+	margin-right: 2px;
+	background-color: rgba( $white, 0.92 );
+	text-transform: uppercase;
+	font-size: 11px;
+	line-height: 1;
+	color: lighten( $gray, 10% );
+	pointer-events: none;
+	z-index: 2;
 
-	.editor-status-label {
-		position: fixed;
-		bottom: 12px;
-		left: 16px;
+	.focus-sidebar & {
+		right: 273px;
 	}
 }
 

diff --git a/client/post-editor/editor-status-label/index.jsx b/client/post-editor/editor-status-label/index.jsx
@@ -19,7 +19,8 @@ export default React.createClass( {
 		onClick: React.PropTypes.func,
 		post: React.PropTypes.object,
 		type: React.PropTypes.string,
-		advancedStatus: React.PropTypes.bool
+		advancedStatus: React.PropTypes.bool,
+		className: React.PropTypes.string,
 	},
 
 	mixins: [ PureRenderMixin ],
@@ -67,7 +68,7 @@ export default React.createClass( {
 
 		if ( ! this.props.onClick ) {
 			return (
-				<span className={ classNames( statusClass, 'is-plain' ) }>
+				<span className={ classNames( statusClass, this.props.className, 'is-plain' ) }>
 					{ this.renderLabel() }
 				</span>
 			);

diff --git a/client/post-editor/editor-word-count/style.scss b/client/post-editor/editor-word-count/style.scss
@@ -1,20 +1,17 @@
 .editor-word-count {
 	position: fixed;
 		right: 0;
-		bottom: 0;
+		bottom: 3px;
 	padding: 8px;
 	background-color: rgba( $white, 0.92 );
 	text-transform: uppercase;
 	font-size: 11px;
 	line-height: 1;
 	color: lighten( $gray, 10% );
 	pointer-events: none;
+	z-index: 3;
 
 	.focus-sidebar & {
-		right: 272px;
-	}
-
-	@include breakpoint( ">960px" ) {
-		padding: 16px;
+		right: 273px;
 	}
 }
diff --git a/client/post-editor/style.scss b/client/post-editor/style.scss
@@ -140,6 +140,7 @@
 	resize: none;
 	border-width: 0;
 	padding: 32px 11px; /* Inherited from TinyMCE iframe body */
+	margin-bottom: 64px;
 
 	// typography for HTML view
 	font-family: $monospace;