Merge pull request #19923 from code-dot-org/detail-view-reflow-fix

Fix xs screen (phone) detail view layout
code-dot-org · Jan 11, 2018 · 9149dee · 9149dee
2 parents 0aa5c4a + bd43089
commit 9149dee
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/apps/src/code-studio/pd/application_dashboard/detail_view_response.jsx b/apps/src/code-studio/pd/application_dashboard/detail_view_response.jsx
@@ -1,12 +1,21 @@
 import React, {PropTypes} from 'react';
 import _ from 'lodash';
-import {FormControl, Panel} from 'react-bootstrap';
+import {
+  Row,
+  Col,
+  FormControl,
+  Panel
+} from 'react-bootstrap';
 import MarkdownSpan from '../components/markdownSpan';
 
 const styles = {
   lineItem: {
     fontFamily: '"Gotham 7r"',
     marginRight: '10px'
+  },
+  panel: {
+    width: '66%',
+    minWidth: 500
   }
 };
 
@@ -33,7 +42,7 @@ export default class DetailViewResponse extends React.Component {
     possibleScores: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
     editing: PropTypes.bool,
     handleScoreChange: PropTypes.func
-  }
+  };
 
   renderScoreOptions() {
     return this.props.possibleScores.map((score, i) => (
@@ -76,36 +85,36 @@ export default class DetailViewResponse extends React.Component {
         );
       } else {
         const heading = (
-          <div className="row">
-            <div className={scoredQuestion ? 'col-md-9' : 'col-md-12'}>
+          <Row>
+            <Col xs={scoredQuestion ? 9 : 12}>
               <Question text={this.props.question}/>
-            </div>
+            </Col>
             {
               scoredQuestion && (
-                <div className="col-md-3">
+                <Col xs={3}>
                   {
                     _.isEqual(this.props.possibleScores, ['Yes', 'No']) ? 'Meets requirements' : 'Score'
                   }
-                </div>
+                </Col>
               )
             }
-          </div>
+          </Row>
         );
 
         return (
-          <Panel header={heading} style={{width: '66%'}}>
-            <div className="row">
-              <div className={scoredQuestion ? 'col-md-9' : 'col-md-12'}>
+          <Panel header={heading} style={styles.panel}>
+            <Row>
+              <Col xs={scoredQuestion ? 9 : 12}>
                 {renderedValue}
-              </div>
+              </Col>
               {
                 scoredQuestion && (
-                  <div className="col-md-3">
+                  <Col xs={3}>
                     {this.renderScore()}
-                  </div>
+                  </Col>
                 )
               }
-            </div>
+            </Row>
           </Panel>
         );
       }

diff --git a/apps/src/code-studio/pd/application_dashboard/summary_table.jsx b/apps/src/code-studio/pd/application_dashboard/summary_table.jsx
@@ -73,7 +73,7 @@ export class SummaryTable extends React.Component {
   handleViewCohortClick = (event) => {
     event.preventDefault();
     this.context.router.push(`/${this.props.path}_cohort`);
-  }
+  };
 
   render() {
     return (