Improved dialog styles for mobile browsers

Resolves #46

src/js/components/GoalViewer.js

@@ -4,6 +4,7 @@ import { Dialog, RaisedButton, FlatButton, TextField,
 var api = require('utils/api');
 var util = require('utils/util');
 import {clone} from 'lodash';
+var Styles = require('constants/Styles');
 var ProgressLine = require('components/common/ProgressLine');
 import {changeHandler} from 'utils/component-utils';
 
@@ -197,7 +198,11 @@ export default class GoalViewer extends React.Component {
 
         { _goals }
 
-        <Dialog open={set_goal_form != null} title={`Set ${goal_label} goals`} actions={actions} onRequestClose={this.dismiss.bind(this)}>
+        <Dialog open={set_goal_form != null}
+                title={`Set ${goal_label} goals`}
+                actions={actions}
+                onRequestClose={this.dismiss.bind(this)}
+                {...Styles.Dialog} >
           { this.render_set_goal_form() }
         </Dialog>
       </div>

src/js/components/JournalEditor.js

@@ -98,7 +98,7 @@ export default class JournalEditor extends React.Component {
       if (tags_loading) _content = "Loading";
       else {
         let lis = this.filtered_tags(last_word).map((tag) => {
-          return <ListItem primaryText={tag.name} onClick={this.handle_tag_add.bind(this, tag, qname)} />
+          return <ListItem primaryText={tag.name} onTouchTap={this.handle_tag_add.bind(this, tag, qname)} />
         })
         if (lis.length == 0) _content = <div className="empty">No suggestions</div>
         else _content = (
@@ -133,8 +133,9 @@ export default class JournalEditor extends React.Component {
         _tags = this.render_tag_suggest(val || "", q.name);
         _hint = <small>You can @mention and #activity tag</small>
       }
-      if (!q.response_type || q.response_type == 'text') _response = <TextField name={q.name} ref={q.name} value={val || ''} onChange={this.changeHandler.bind(this, q.name)} fullWidth={true} />
-      else if (q.response_type == 'slider' || q.response_type == 'number') _response = <Slider name={q.name} value={val} onChange={this.changeHandlerSlider.bind(this, q.name)} max={10} min={1} defaultValue={5} step={1} />
+      let focus = i == 0;
+      if (!q.response_type || q.response_type == 'text') _response = <TextField name={q.name} ref={q.name} value={val || ''} onChange={this.changeHandler.bind(this, q.name)} fullWidth={true} autoFocus={focus} />
+      else if (q.response_type == 'slider' || q.response_type == 'number') _response = <Slider name={q.name} value={val} onChange={this.changeHandlerSlider.bind(this, q.name)} max={10} min={1} defaultValue={5} step={1} autoFocus={focus} />
       return (
         <div key={i}>
           <p className="lead">{ q.text }</p>

src/js/components/MiniJournalWidget.js

@@ -1,6 +1,7 @@
 var React = require('react');
 import {Link} from 'react-router';
 var AppConstants = require('constants/AppConstants');
+var Styles = require('constants/Styles');
 import { Dialog, TextField, Slider,
   FlatButton, RaisedButton, IconButton, List,
   DropDownMenu,
@@ -277,6 +278,7 @@ export default class MiniJournalWidget extends React.Component {
         <Dialog title="Submit Daily Journal"
           open={open} onRequestClose={this.dismiss.bind(this)}
           autoDetectWindowHeight={true} autoScrollBodyContent={true}
+          {...Styles.Dialog}
           actions={actions}>
           <div style={{padding: "10px"}}>
             { this.render_history_section() }

src/js/constants/Styles.js

@@ -0,0 +1,21 @@
+var Styles = {
+    Dialog: {
+        contentStyle: {
+            width: '100%',
+            maxWidth: '550px',
+            maxHeight: '100% !important'
+        },
+        bodyStyle: {
+            maxHeight: '100% !important'
+        },
+        style: {
+            paddingTop: '0 !important',
+            marginTop: '-65px !important',
+            bottom: '0 !important',
+            overflow: 'scroll !important',
+            height: 'auto !important'
+        }
+    }
+}
+
+module.exports = Styles;