From 8ec7023b8fa6d4ed9e161c303ec2a4f028b5c61a Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 23 Dec 2015 09:37:03 +0100
Subject: [PATCH] Force piece and edition layout to be two columns

---
 js/components/ascribe_detail/edition.js |  4 ++--
 js/components/ascribe_detail/piece.js   |  4 ++--
 sass/ascribe_print.scss                 | 10 ++++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 40fd6625..862a4021 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -57,11 +57,11 @@ let Edition = React.createClass({
 
         return (
             <Row>
-                <Col md={6}>
+                <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
                         content={this.props.edition}/>
                 </Col>
-                <Col md={6} className="ascribe-edition-details">
+                <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
                         <hr style={{marginTop: 0}}/>
                         <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js
index 7481d1fb..4108d98f 100644
--- a/js/components/ascribe_detail/piece.js
+++ b/js/components/ascribe_detail/piece.js
@@ -34,12 +34,12 @@ let Piece = React.createClass({
     render() {
         return (
             <Row>
-                <Col md={6}>
+                <Col md={6} className="ascribe-print-col-left">
                     <MediaContainer
                         refreshObject={this.updateObject}
                         content={this.props.piece}/>
                 </Col>
-                <Col md={6} className="ascribe-edition-details">
+                <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     {this.props.header}
                     {this.props.subheader}
                     {this.props.buttons}
diff --git a/sass/ascribe_print.scss b/sass/ascribe_print.scss
index c90b0f21..f2abeb80 100644
--- a/sass/ascribe_print.scss
+++ b/sass/ascribe_print.scss
@@ -14,4 +14,14 @@
         margin: 0.5em 0;
         text-align: center;
     }
+
+    // Force left and right columns
+    .ascribe-print-col-left {
+        width: 50% !important;
+        float: left !important;
+    }
+    .ascribe-print-col-right {
+        width: 50% !important;
+        float: right !important;
+    }
 }