Make time entry useable on mobile

Ref #49
CodeYellowBV · May 13, 2017 · 3d629c6 · 3d629c6
1 parent 85ffc4d
commit 3d629c6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/frontend/src/component/InputTime.js b/frontend/src/component/InputTime.js
@@ -49,6 +49,7 @@ const Overlay = styled.div`
     top: 100%;
     left: 0;
     right: 0;
+    z-index: 2;
     ${props => (props.hide ? `display: none;` : null)};
 `;
 

diff --git a/frontend/src/component/TimeEntryForm.js b/frontend/src/component/TimeEntryForm.js
@@ -4,11 +4,20 @@ import styled from 'styled-components';
 
 export const TimeEntryForm = styled(Form)`
     display: flex;
-    margin-bottom: 40px;
+    margin-bottom: 32px;
     align-items: flex-end;
+
+    @media (max-width: 400px) {
+        flex-direction: column;
+        align-items: stretch;
+    }
 `;
 
 export const TimeEntryFormField = styled(FormField)`
     flex: ${props => props.size || 0};
-    margin: 0 8px;
+    margin: 0 8px 8px 8px;
+
+    @media (max-width: 400px) {
+        ${props => props.center && `align-self: center`}
+    }
 `;
diff --git a/frontend/src/container/TimeEntry.js b/frontend/src/container/TimeEntry.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import { action } from 'mobx';
-import { orderBy, sortBy } from 'lodash';
+import { sortBy } from 'lodash';
 import moment from 'moment';
 import InputText from '../component/InputText';
 import InputTime, { InputTimeButton } from '../component/InputTime';
@@ -111,7 +111,7 @@ export default class TimeEntry extends Component {
         }
 
         return (
-            <TimeEntryFormField label="">
+            <TimeEntryFormField label="" center>
                 <Icon big icon={icon} />
             </TimeEntryFormField>
         );