some layout changes to be a little more useful on small screens

mvillis · Jun 30, 2016 · 366c478 · 366c478
1 parent b8aa87e
commit 366c478
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 51 deletions.
diff --git a/client/css/measure-mate.css b/client/css/measure-mate.css
@@ -6,6 +6,8 @@
 .logo-text {
   font-family: 'Autour One';
   text-align: center;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
 }
 
 .navbar-brand {

diff --git a/client/js/components/assessment/assessmentTable.js b/client/js/components/assessment/assessmentTable.js
@@ -37,11 +37,9 @@ var AssessmentTable = React.createClass({
   },
   render: function () {
     return (
-      <div>
-        <Loader loaded={this.state.loaded}>
-          <AssessmentList data={this.state.data} showTeams={!this.props.teamId} />
-        </Loader>
-      </div>
+      <Loader loaded={this.state.loaded}>
+        <AssessmentList data={this.state.data} showTeams={!this.props.teamId} />
+      </Loader>
     )
   }
 })

diff --git a/client/js/components/home/assessmentCreationForm.js b/client/js/components/home/assessmentCreationForm.js
@@ -75,10 +75,10 @@ var AssessmentCreationForm = React.createClass({
           {this.state.formError}
         </Alert>
         <FormGroup>
-          <Col lg={2} xs={3} className='text-right'>
+          <Col lg={2} xs={12} sm={3}>
             <ControlLabel>Template</ControlLabel>
           </Col>
-          <Col lg={8} xs={9}>
+          <Col lg={8} xs={12} sm={9}>
             <TemplateSelect
               label='Template'
               ref='template'
@@ -87,7 +87,7 @@ var AssessmentCreationForm = React.createClass({
               onChange={this.changeHandlerTemplate}
             />
           </Col>
-          <Col lg={2} xs={3} style={{width: 'auto'}}>
+          <Col lg={2} xs={12} sm={3} style={{width: 'auto'}}>
             <FormControl className='btn btn-default btn-primary' type='submit' value='Launch' onClick={this.handleSubmit} />
           </Col>
         </FormGroup>

diff --git a/client/js/components/home/teamCreationForm.js b/client/js/components/home/teamCreationForm.js
@@ -178,10 +178,10 @@ var TeamCreationForm = React.createClass({
           {this.state.formError}
         </Alert>
         <FormGroup>
-          <Col xs={3} lg={2} className='text-right'>
+          <Col xs={12} sm={3} lg={2}>
             <ControlLabel>Name</ControlLabel>
           </Col>
-          <Col xs={9} lg={8}>
+          <Col xs={12} sm={9} lg={8}>
             <FormControl
               type='text'
               placeholder='Team Name'
@@ -193,10 +193,10 @@ var TeamCreationForm = React.createClass({
           </Col>
         </FormGroup>
         <FormGroup>
-          <Col xs={3} lg={2} className='text-right'>
+          <Col xs={12} sm={3} lg={2}>
             <ControlLabel>Description</ControlLabel>
           </Col>
-          <Col xs={9} lg={8}>
+          <Col xs={12} sm={9} lg={8}>
             <FormControl
               type='text'
               placeholder='Team Description'
@@ -208,10 +208,10 @@ var TeamCreationForm = React.createClass({
           </Col>
         </FormGroup>
         <FormGroup>
-          <Col xs={3} lg={2} className='text-right'>
+          <Col xs={12} sm={3} lg={2}>
             <ControlLabel>Tags</ControlLabel>
           </Col>
-          <Col xs={9} lg={8}>
+          <Col xs={12} sm={9} lg={8}>
             <TagSelect
               ref='tags'
               label='Tags'
@@ -223,7 +223,7 @@ var TeamCreationForm = React.createClass({
           </Col>
         </FormGroup>
         <FormGroup>
-          <Col xs={3} lg={2} lgOffset={10} style={{width: 'auto'}}>
+          <Col xs={12} sm={3} lg={2} lgOffset={10} style={{width: 'auto'}}>
             <FormControl className={'btn btn-default btn-primary' + (creatingTag ? ' btn-disabled' : '')}
               type='submit' value='Create' onClick={!creatingTag ? this.handleSubmit : null} />
           </Col>

diff --git a/client/js/components/team/team.js b/client/js/components/team/team.js
@@ -5,6 +5,8 @@ var React = require('react')
 var Loader = require('react-loader')
 var ReactBootstrap = require('react-bootstrap')
 var Panel = ReactBootstrap.Panel
+var Row = ReactBootstrap.Row
+var Col = ReactBootstrap.Col
 
 var $ = require('jquery')
 
@@ -45,29 +47,27 @@ var Team = React.createClass({
     var teamId = parseInt(this.props.params.teamId, 10)
     return (
       <div>
-        <div className='row'>
-          <div className='col-sm-6'>
-            <Panel header='Team' bsStyle='primary'>
-              <Loader scale={0.25} top='10' loaded={this.state.loaded}>
+        <Row>
+          <Col xs={12} sm={6}>
+            <Loader scale={0.25} top='10' loaded={this.state.loaded}>
+              <Panel header='Team' bsStyle='primary'>
                 <TeamDetails team={this.state.team} />
-              </Loader>
-            </Panel>
-          </div>
-          <div className='col-sm-6 push-right'>
+              </Panel>
+            </Loader>
+          </Col>
+          <Col xs={12} sm={6}>
             <Panel header='Create Assessment' bsStyle='info'>
-              <div className='container-fluid'>
-                <AssessmentCreationForm teamId={teamId} />
-              </div>
+              <AssessmentCreationForm teamId={teamId} />
             </Panel>
-          </div>
-        </div>
-        <div className='row'>
-          <div className='container-fluid'>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12}>
             <Panel header='Assessments' bsStyle='info'>
               <AssessmentTable teamId={teamId} />
             </Panel>
-          </div>
-        </div>
+          </Col>
+        </Row>
       </div>
     )
   }

diff --git a/client/js/components/team/teamDetails.js b/client/js/components/team/teamDetails.js
@@ -2,7 +2,10 @@
 
 var React = require('react')
 var ReactBootstrap = require('react-bootstrap')
-var Table = ReactBootstrap.Table
+var Form = ReactBootstrap.Form
+var FormGroup = ReactBootstrap.FormGroup
+var ControlLabel = ReactBootstrap.ControlLabel
+var Col = ReactBootstrap.Col
 
 var TagList = require('../assessment/tagList')
 
@@ -12,24 +15,32 @@ var TeamDetails = React.createClass({
   },
   render: function () {
     return (
-      <div>
-        <Table hover fill>
-          <tbody>
-            <tr>
-              <th>Name</th>
-              <td>{this.props.team.name}</td>
-            </tr>
-            <tr>
-              <th>Description</th>
-              <td>{this.props.team.short_desc}</td>
-            </tr>
-            <tr>
-              <th>Tags</th>
-              <td><TagList tags={this.props.team.tags} /></td>
-            </tr>
-          </tbody>
-        </Table>
-      </div>
+      <Form horizontal>
+        <FormGroup>
+          <Col lg={2} xs={12} sm={3}>
+            <ControlLabel>Name</ControlLabel>
+          </Col>
+          <Col lg={8} xs={12} sm={9}>
+            {this.props.team.name}
+          </Col>
+        </FormGroup>
+        <FormGroup>
+          <Col lg={2} xs={12} sm={3}>
+            <ControlLabel>Description</ControlLabel>
+          </Col>
+          <Col lg={8} xs={12} sm={9}>
+            {this.props.team.short_desc}
+          </Col>
+        </FormGroup>
+        <FormGroup>
+          <Col lg={2} xs={12} sm={3}>
+            <ControlLabel>Tags</ControlLabel>
+          </Col>
+          <Col lg={8} xs={12} sm={9}>
+            <TagList tags={this.props.team.tags} />
+          </Col>
+        </FormGroup>
+      </Form>
     )
   }
 })