Header cake (component): domain detail placeholder tweak

Visually tweaks the domain detail management header cake while in placeholder state to be smaller and more inline.
Automattic · Dec 17, 2015 · cb45267 · cb45267
1 parent bcd7475
commit cb45267
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/client/my-sites/upgrades/domain-management/components/header/index.jsx b/client/my-sites/upgrades/domain-management/components/header/index.jsx
@@ -12,10 +12,12 @@ const DomainManagementHeader = React.createClass( {
 	render() {
 		return (
 			<HeaderCake className="domain-management-header" onClick={ this.props.onClick }>
-				{ this.domainName() }
-				<span className="domain-management-header__children">
-					{ this.props.children }
-				</span>
+				<div className="domain-management-header__children">
+					{ this.domainName() }
+					<span className="domain-management-header__title">
+						{ this.props.children }
+					</span>
+				</div>
 			</HeaderCake>
 		);
 	},

diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
@@ -1,6 +1,11 @@
 .domain-main-placeholder {
-	.header-cake__title {
+	.domain-management-header__children {
 		@include placeholder(23%);
+
+		@include breakpoint('>480px') {
+			max-width: 60%;
+			margin: 0 auto;
+		}
 	}
 }
 
@@ -47,6 +52,8 @@
 
 .domain-management-header__children {
 	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .domain-management-list-item.card {