fix(date-time-options): fix search options css (add flex)

fix ibi-group/trimet-mod-otp#304

Author: landonreed

lib/components/admin/call-taker.css

@@ -9,3 +9,13 @@
 .otp .advanced-search-options {
   box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.32157);
 }
+
+.otp .search-options {
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+}
+
+.otp .search-options > * {
+  margin-bottom: 5px;
+}

lib/components/app/call-taker-panel.js

@@ -187,7 +187,7 @@ class CallTakerPanel extends Component {
               onClick={this._addPlace}
               to={to}
             />
-            <div className='search-options' style={{height: '30px'}}>
+            <div className='search-options'>
               <DateTimeOptions
                 date={date}
                 departArrive={departArrive}
@@ -208,9 +208,7 @@ class CallTakerPanel extends Component {
                 onClick={this._planTrip}
                 style={{
                   fontSize: '13px',
-                  padding: '0px 10px',
-                  position: 'absolute',
-                  right: '6px'
+                  padding: '0px 10px'
                 }} >
                 Plan
               </Button>
@@ -261,7 +259,7 @@ class CallTakerPanel extends Component {
                 right: '0',
                 // FIXME: This top pixel value can be variable dependent on
                 // height of the form above. It may need to be specified differently
-                top: 193 + intermediatePlaces.length * 45
+                top: 210 + intermediatePlaces.length * 45
               }}
             />
           </div>

lib/components/form/call-taker/date-time-options.js

@@ -190,40 +190,36 @@ export default class DateTimeOptions extends Component {
             <option key={o.value} {...o} />
           ))}
         </select>
-        <span style={{display: 'inline-flex'}}>
-          <OverlayTrigger
-            overlay={<Tooltip id='time-tooltip'>{cleanTime}</Tooltip>}
-            placement='bottom'
-            trigger={['focus', 'hover']}
-          >
-            <input
-              className='datetime-slim'
-              onChange={this.handleTimeChange}
-              onFocus={this.handleTimeFocus}
-              onKeyDown={onKeyDown}
-              style={{
-                fontSize: 'inherit',
-                lineHeight: '.8em',
-                marginLeft: '3px',
-                padding: '0px',
-                width: '50px'
-              }}
-              value={timeInput || dateTime.format('H:mm')}
-            />
-          </OverlayTrigger>
-        </span>
+        <OverlayTrigger
+          overlay={<Tooltip id='time-tooltip'>{cleanTime}</Tooltip>}
+          placement='bottom'
+          trigger={['focus', 'hover']}
+        >
+          <input
+            className='datetime-slim'
+            onChange={this.handleTimeChange}
+            onFocus={this.handleTimeFocus}
+            onKeyDown={onKeyDown}
+            style={{
+              fontSize: 'inherit',
+              lineHeight: '.8em',
+              marginLeft: '3px',
+              padding: '0px',
+              width: '50px'
+            }}
+            value={timeInput || dateTime.format('H:mm')}
+          />
+        </OverlayTrigger>
         <input
           className='datetime-slim'
           onChange={this.handleDateChange}
           onKeyDown={onKeyDown}
           style={{
             border: 'none',
             fontSize: '14px',
-            left: '146px',
             lineHeight: '1em',
             outline: 'none',
-            position: 'absolute',
-            width: '101px'
+            width: '107px'
           }}
           type='date'
           value={dateTime.format('YYYY-MM-DD')}

lib/components/form/call-taker/mode-dropdown.js

@@ -74,7 +74,6 @@ export default class ModeDropdown extends Component {
         onBlur={this._setMode}
         onChange={this._onChange}
         onKeyDown={onKeyDown}
-        style={{position: 'absolute', right: '60px'}}
         value={this.modeToOptionValue(mode)}
       >
         {this._getModeOptions().map(o => (