Merge pull request #1277 from Automattic/fix/dns-editor-flexbox

Domain Search: DNS editor cleanup, fixes #604
Automattic · Dec 10, 2015 · 7ad41a9 · 7ad41a9
2 parents cd92d4c + ebce77f
commit 7ad41a9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/client/my-sites/upgrades/domain-management/dns/dns-record.jsx b/client/my-sites/upgrades/domain-management/dns/dns-record.jsx
@@ -3,6 +3,11 @@
  */
 var React = require( 'react' );
 
+/**
+ * Internal dependencies
+ */
+import RemoveButton from "components/remove-button";
+
 var DnsRecord = React.createClass( {
 	propTypes: {
 		deleteDns: React.PropTypes.func.isRequired,
@@ -87,11 +92,17 @@ var DnsRecord = React.createClass( {
 	render: function() {
 		return (
 			<li>
-				<label>{ this.props.dnsRecord.type }</label>
-				{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
-					<button className="remove" onClick={ this.deleteDns }>{ this.translate( 'Delete' ) }</button> : null }
-				<strong>{ this.getName() }</strong>
-				<em>{ this.handledBy() }</em>
+				<div className="dns__list-type">
+					<label>{ this.props.dnsRecord.type }</label>
+				</div>
+				<div className="dns__list-info">
+					<strong>{ this.getName() }</strong>
+					<em>{ this.handledBy() }</em>
+				</div>
+				<div className="dns__list-remove">
+					{ ! this.props.dnsRecord.protected_field || 'MX' === this.props.dnsRecord.type ?
+						<RemoveButton icon="trash" onClick={ this.deleteDns } /> : null }
+				</div>
 			</li>
 		);
 	}

diff --git a/client/my-sites/upgrades/domain-management/style.scss b/client/my-sites/upgrades/domain-management/style.scss
@@ -901,6 +901,8 @@ ul.dns__list {
 
 	li {
 		border-top: 1px solid $gray-light;
+		display: flex;
+		justify-content: space-between;
 		overflow: auto;
 		padding: 10px 0;
 		position: relative;
@@ -915,29 +917,31 @@ ul.dns__list {
 			background: #87a6bc;
 			border-radius: 2px;
 			color: $white;
-			float: left;
+			display: block;
 			font-size: 12px;
 			margin: 0 10px 0 0;
 			padding: 10px 5px;
 			text-align: center;
-			width: 60px;
 		}
 
 		strong {
 			color: #58819e;
 			font-weight: normal;
 		}
 	}
-	.remove {
-		background-color: #87a6bc;
-		border-radius: 2px;
-		color: #FFF;
-		cursor: pointer;
-		display: inline-block;
-		float: right;
-		font-size: 9px;
-		padding: 3px 8px;
-		text-transform: uppercase;
+
+	.dns__list-type {
+		min-width: 60px;
+	}
+
+	.dns__list-info {
+		width: 100%;
+		word-break: break-all;
+	}
+
+	.dns__list-remove {
+		text-align: right;
+		width: 100px;
 	}
 }