Enhance UI for risk factors view for print layout (#5)

cerner · Jul 27, 2017 · cc2af5c · cc2af5c
1 parent 4900643
commit cc2af5c
Show file tree

Hide file tree

Showing 21 changed files with 418 additions and 75 deletions.
diff --git a/build/css/styles.css b/build/css/styles.css
diff --git a/build/js/bundle.js b/build/js/bundle.js
diff --git a/components/DetailBox/detail_box.css b/components/DetailBox/detail_box.css
@@ -62,3 +62,9 @@
 input[name="dropdown"] {
   cursor: pointer;
 }
+
+@media print {
+  .page-break {
+    page-break-inside: avoid;
+  }
+}
diff --git a/components/DetailBox/detail_box.jsx b/components/DetailBox/detail_box.jsx
@@ -28,15 +28,17 @@ class DetailBox extends React.Component {
   render() {
     return (
       <div className={styles.container}>
-        <div className={styles.header} onClick={this.handleClick}>
-          <div className={this.state.isExpanded ? styles['arrow-down'] : styles['arrow-right']} />
-          <div className={styles.title}>
-            {this.props.boxHeader}
+        <div className={styles['page-break']}>
+          <div className={styles.header} onClick={this.handleClick}>
+            <div className={this.state.isExpanded ? styles['arrow-down'] : styles['arrow-right']} />
+            <div className={styles.title}>
+              {this.props.boxHeader}
+            </div>
           </div>
-        </div>
-        <div className={this.state.isExpanded ? styles.body : styles.collapsed}>
-          <div className={styles.description}>
-            {this.props.boxBody}
+          <div className={this.state.isExpanded ? styles.body : styles.collapsed}>
+            <div className={styles.description}>
+              {this.props.boxBody}
+            </div>
           </div>
         </div>
       </div>

diff --git a/components/Form/ButtonForm/button_form.css b/components/Form/ButtonForm/button_form.css
@@ -51,3 +51,10 @@
   content: '*';
   padding-right: 3px;
 }
+
+
+@media print {
+  .btn {
+    -webkit-print-color-adjust: exact;
+  }
+}
diff --git a/components/Form/SendForm/send_form.css b/components/Form/SendForm/send_form.css
@@ -61,3 +61,9 @@
   float: left;
   display: inline-block;
 }
+
+@media print {
+  .btn {
+    -webkit-print-color-adjust: exact;
+  }
+}
diff --git a/components/Header/header.css b/components/Header/header.css
@@ -13,3 +13,9 @@
   -webkit-box-shadow: inset 0 -1px #DEDFE0;
   box-shadow:         inset 0 -1px #DEDFE0;
 }
+
+@media print {
+  .header {
+    -webkit-print-color-adjust: exact;
+  }
+}
diff --git a/components/PatientBanner/banner.css b/components/PatientBanner/banner.css
@@ -3,14 +3,14 @@
   background-color: #0065a3;
   height: 30px;
   display: table;
+  color: #FFF;
 }
 
 .name {
   font-size: 18px;
   display: table-row;
   font-family: "Helvetica";
   font-weight: 700;
-  color: #FFF;
 }
 
 .details {
@@ -19,7 +19,6 @@
   font-size: 16px;
   font-family: "Helvetica";
   font-weight: 700;
-  color: #FFF;
 }
 
 .age {
@@ -30,7 +29,6 @@
   padding-left: 10px;
   vertical-align: text-bottom;
   font-size: 16px;
-  color: #FFF;
   font-weight: 400;
 }
 
@@ -41,3 +39,9 @@
 .patient-container {
   padding: 5px 10px;
 }
+
+@media print {
+  .container {
+    -webkit-print-color-adjust: exact;
+  }
+}
diff --git a/components/Results/Graph/graph.css b/components/Results/Graph/graph.css
@@ -136,6 +136,14 @@
   height: 0;
 }
 
+.current-risk {
+  background: repeating-linear-gradient(135deg, #FFB166 0, #ffffff 1px, #ffffff 1px, #FFB166 2px, #FFB166 13px)
+}
+
+.lowest-risk {
+  background-color: #FF9733;
+}
+
 @media only screen and (max-width: 860px) {
   .graph-border {
     height: 250px;
@@ -197,3 +205,21 @@
     width: 100%;
   }
 }
+
+@media print {
+  .graph-title {
+    margin-left: 0;
+  }
+
+  .inner {
+    margin-right: 0;
+  }
+
+  .legend-label {
+    display: none;
+  }
+
+  .legend-bar {
+    display: none;
+  }
+}
diff --git a/components/Results/Graph/graph.jsx b/components/Results/Graph/graph.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import GraphBar from '../GraphBar/graph_bar';
 import styles from './graph.css';
 
@@ -98,13 +99,13 @@ class Graph extends React.Component {
               >
                 <GraphBar
                   barColor={''}
+                  percentLabel={'Current Risk'}
                   percent={this.props.tenYearScore}
-                  width={this.props.width}
                 />
                 <GraphBar
                   barColor={'#FF9733'}
+                  percentLabel={'Lowest Possible Risk'}
                   percent={this.props.tenYearBest}
-                  width={this.props.width}
                 />
                 <div className={styles['bar-label']}>10 Year Risk</div>
               </div>
@@ -115,22 +116,22 @@ class Graph extends React.Component {
               >
                 <GraphBar
                   barColor={''}
+                  percentLabel={'Current Risk'}
                   percent={this.props.lifetimeScore}
-                  width={this.props.width}
                 />
                 <GraphBar
                   barColor={'#FF9733'}
+                  percentLabel={'Lowest Possible Risk'}
                   percent={this.props.lifetimeBest}
-                  width={this.props.width}
                 />
                 <div className={styles['bar-label']}>Lifetime Risk</div>
               </div>
             </div>
           </div>
           <div className={styles['legend-container']}>
-            <div className={styles['legend-bar']} style={Graph.setColor('')} />
+            <div className={cx(styles['legend-bar'], styles['current-risk'])} />
             <div className={styles['legend-label']}>Current Risk</div>
-            <div className={styles['legend-bar']} style={Graph.setColor('#FF9733')} />
+            <div className={cx(styles['legend-bar'], styles['lowest-risk'])} />
             <div className={styles['legend-label']}>Lowest Possible Risk</div>
           </div>
         </div>

diff --git a/components/Results/GraphBar/graph_bar.css b/components/Results/GraphBar/graph_bar.css
@@ -4,22 +4,51 @@
   height: 100px;
 }
 
+.percent-label {
+  display: none;
+}
+
 .percent {
   color: #2D3539;
   font-size: 16px;
   font-family: Helvetica;
   text-align: center;
-  padding-bottom: 6px;
   height: 16px;
   width: 100px;
+  vertical-align: bottom;
   position: absolute;
+  bottom: 0;
 }
 
-.bar {
+.percent-container {
+  vertical-align: bottom;
   width: 100px;
   position: absolute;
+  text-align: center;
+}
+
+.bar {
+  width: 100px;
   bottom: 0;
   border: none;
+  position: absolute;
+  vertical-align: bottom;
+}
+
+.current-risk {
+  background: repeating-linear-gradient(135deg, #FFB166 0, #ffffff 1px, #ffffff 1px, #FFB166 2px, #FFB166 13px);
+}
+
+.lowest-possible-risk {
+  background-color: #FF9733;
+}
+
+.percent-left {
+  text-align: center;
+}
+
+.percent-right {
+  text-align: center;
 }
 
 @media only screen and (max-width: 860px) {
@@ -46,4 +75,59 @@
   .bar {
     width: 20px;
   }
+
+  .percent-left {
+    text-align: left;
+    margin-left: -13px;
+  }
+
+  .percent-right {
+    text-align: right;
+    margin-left: 5px;
+  }
+}
+
+@media print and (max-width: 700px) {
+  .percent-left {
+    text-align: center;
+    margin-left: 0;
+  }
+
+  .percent-right {
+    text-align: center;
+    margin-left: 0;
+  }
+}
+
+@media print {
+  .lowest-possible-risk {
+    background: none;
+    width: 100px;
+    border: solid #2d3539;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .current-risk {
+    background: none;
+    width: 97px;
+    border: solid #6F7477;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .percent-label {
+    position: relative;
+    display: block;
+    text-align: center;
+    width: 70px;
+    font-size: 12px;
+    margin: 0 auto;
+    font-family: Helvetica;
+    vertical-align: bottom;
+  }
+
+  .percent {
+    position: relative;
+    padding-bottom: 5px;
+    margin: 0 auto;
+  }
 }