From 56cd6d8096c3375e67ed51c4cf1943279ea80250 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Sun, 7 Oct 2018 14:02:47 +0300
Subject: [PATCH] make it usable on smartphones

---
 client/src/components/App.css            | 39 +++++++++++++++++++++++-
 client/src/components/Container.css      |  3 ++
 client/src/components/user/EditForm.js   |  5 ++-
 client/src/components/user/HeaderLink.js |  4 +--
 client/src/components/user/Status.js     | 34 ---------------------
 client/src/components/user/UserHeader.js |  6 +---
 6 files changed, 46 insertions(+), 45 deletions(-)
 delete mode 100644 client/src/components/user/Status.js

diff --git a/client/src/components/App.css b/client/src/components/App.css
index 2e0d618..cda2d42 100644
--- a/client/src/components/App.css
+++ b/client/src/components/App.css
@@ -125,8 +125,45 @@ li button {
   box-shadow: inset 3px 0 6px -3px rgba(0, 0, 0, 0.3);
 }
 
-/* make buttons bigger on smartphones */
+/* make it usable on smartphones */
 @media only screen and (max-width: 600px) {
+  #header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: white;
+    z-index: 5;
+    width: 100%;
+  }
+  #inputs {
+    position: fixed;
+    top: 8rem;
+    left: 0;
+    background-color: white;
+    z-index: 10;
+    width: 100%;
+    height: 65px;
+    max-height: 65px !important;
+  }
+  #container {
+    margin-top: 12rem;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-bottom: 3rem;
+  }
+  #filters {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    max-height: 3rem !important;
+    opacity: 1 !important;
+    background-color: white;
+  }
+  #filters button {
+    height: 3rem !important;
+    padding: 0 1.5rem !important;
+  }
   li button {
     padding: 0 1.5rem !important;
   }
diff --git a/client/src/components/Container.css b/client/src/components/Container.css
index 10c68fe..4fc663a 100644
--- a/client/src/components/Container.css
+++ b/client/src/components/Container.css
@@ -22,6 +22,9 @@ body {
 }
 
 @media only screen and (max-width: 600px) {
+  #root {
+    margin: 0;
+  }
   #container {
     max-width: 100%;
   }
diff --git a/client/src/components/user/EditForm.js b/client/src/components/user/EditForm.js
index d1054a1..8da0383 100644
--- a/client/src/components/user/EditForm.js
+++ b/client/src/components/user/EditForm.js
@@ -31,7 +31,6 @@ function EditForm({
   if (!user.user) {
     history.push('/');
   }
-  console.log(user);
   if (user.user && user.editSuccess) {
     reset();
     history.push('/');
@@ -41,9 +40,9 @@ function EditForm({
       <div id="user-header">
         <ButtonBase
           style={{
-            marginRight: '1rem',
+            marginLeft: '0',
+            marginRight: 'auto',
             padding: '0 0.5rem',
-            borderRadius: '7px',
           }}
           onClick={() => {
             history.push('/');
diff --git a/client/src/components/user/HeaderLink.js b/client/src/components/user/HeaderLink.js
index 744d532..9b9ed69 100644
--- a/client/src/components/user/HeaderLink.js
+++ b/client/src/components/user/HeaderLink.js
@@ -7,8 +7,8 @@ function Link({ history, to, text }) {
   return (
     <ButtonBase
       style={{
-        marginLeft: 'auto',
-        marginRight: 0,
+        marginLeft: '0',
+        marginRight: 'auto',
         padding: '0 1rem',
       }}
       onClick={e => {
diff --git a/client/src/components/user/Status.js b/client/src/components/user/Status.js
deleted file mode 100644
index d315816..0000000
--- a/client/src/components/user/Status.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { ButtonBase } from '@material-ui/core';
-
-function Status({ userFetching, listsFetching }) {
-  return (
-    <ButtonBase
-      style={{
-        marginRight: 'auto',
-        padding: '0 0.5rem',
-        borderRadius: '7px',
-        marginLeft: '1rem',
-      }}
-    >
-      {userFetching ? 'loading user' : null}
-      {listsFetching ? 'loading lists' : null}
-    </ButtonBase>
-  );
-}
-
-Status.propTypes = {
-  userFetching: PropTypes.bool.isRequired,
-  listsFetching: PropTypes.bool.isRequired,
-};
-
-function mapStateToProps(state) {
-  return {
-    userFetching: state.user.fetching,
-    listsFetching: state.lists.fetching,
-  };
-}
-
-export default connect(mapStateToProps)(Status);
diff --git a/client/src/components/user/UserHeader.js b/client/src/components/user/UserHeader.js
index dbc504f..2012f4d 100644
--- a/client/src/components/user/UserHeader.js
+++ b/client/src/components/user/UserHeader.js
@@ -1,16 +1,12 @@
 import React from 'react';
 
 import LogoutLink from './LogoutLink';
-import FetchButton from './FetchButton';
-import Status from './Status';
 import HeaderLink from './HeaderLink';
 
 export default function UserHeader() {
   return (
     <div id="user-header">
-      <FetchButton>sync</FetchButton>
-      <Status />
-      <HeaderLink to="/edit" text="edit"/>
+      <HeaderLink to="/edit" text="account"/>
       <LogoutLink>logout</LogoutLink>
     </div>
   );