From 69c8a01697e1e2beaecb8f5d832faa0621190a29 Mon Sep 17 00:00:00 2001 From: Stepan Usatiuk Date: Sun, 7 Oct 2018 15:51:32 +0300 Subject: [PATCH] make usable on smartphones --- client/public/favicon.ico | Bin 3870 -> 0 bytes client/public/logo.svg | 80 ++++++++++++++++++++++ client/public/logo.svg.png | Bin 0 -> 1739 bytes client/public/manifest.json | 6 +- client/src/components/App.css | 39 ++++++++++- client/src/components/Container.css | 5 +- client/src/components/todos/Input.js | 1 + client/src/components/user/EditForm.js | 5 +- client/src/components/user/FetchButton.js | 40 ----------- client/src/components/user/HeaderLink.js | 4 +- client/src/components/user/Status.js | 34 --------- client/src/components/user/UserHeader.js | 6 +- 12 files changed, 131 insertions(+), 89 deletions(-) delete mode 100644 client/public/favicon.ico create mode 100644 client/public/logo.svg create mode 100644 client/public/logo.svg.png delete mode 100644 client/src/components/user/FetchButton.js delete mode 100644 client/src/components/user/Status.js diff --git a/client/public/favicon.ico b/client/public/favicon.ico deleted file mode 100644 index a11777cc471a4344702741ab1c8a588998b1311a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/client/public/logo.svg b/client/public/logo.svg new file mode 100644 index 0000000..4254222 --- /dev/null +++ b/client/public/logo.svg @@ -0,0 +1,80 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/client/public/logo.svg.png b/client/public/logo.svg.png new file mode 100644 index 0000000000000000000000000000000000000000..e82e8dc160afacca391d21ee359430dc11458d0d GIT binary patch literal 1739 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&zE~)R&4Yzkn1=v6E*A2N2Y7q;vrJoCO|{ z#S9F5M?jcysy3fAP*AeOHKHUqKdq!Zu_%?Hyu4g5GcUV1Ik6yBFTW^#_B$IX1_m|{ zPZ!6KiaBquISMv22(UOV;L`r#B)M@aAt||Zk literal 0 HcmV?d00001 diff --git a/client/public/manifest.json b/client/public/manifest.json index f8b5db3..a31f37f 100644 --- a/client/public/manifest.json +++ b/client/public/manifest.json @@ -3,9 +3,9 @@ "name": "Simple todo list", "icons": [ { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" + "src": "logo.svg.png", + "sizes": "512x512", + "type": "image/png" } ], "start_url": "./", 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..c66bbb6 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%; } @@ -43,7 +46,7 @@ body { height: 100%; flex-grow: 0; flex-shrink: 1; - color: #888888; + color: #555555; border: none; background: none; transition: 0.1s ease-in-out; diff --git a/client/src/components/todos/Input.js b/client/src/components/todos/Input.js index 25f05ac..4e5f43e 100644 --- a/client/src/components/todos/Input.js +++ b/client/src/components/todos/Input.js @@ -19,6 +19,7 @@ function Input({ onClick, styles }) { return (
{ input = node; }} 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({
{ history.push('/'); diff --git a/client/src/components/user/FetchButton.js b/client/src/components/user/FetchButton.js deleted file mode 100644 index 5b11136..0000000 --- a/client/src/components/user/FetchButton.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { ButtonBase } from '@material-ui/core'; - -import { fetchLists } from '../../actions/lists'; - -function FetchButton({ onClick, children }) { - return ( - { - e.preventDefault(); - onClick(); - }} - > - {children} - - ); -} - -FetchButton.propTypes = { - onClick: PropTypes.func.isRequired, - children: PropTypes.node.isRequired, -}; - -function mapDispatchToProps(dispatch) { - return { - onClick: () => dispatch(fetchLists()), - }; -} - -export default connect( - null, - mapDispatchToProps, -)(FetchButton); 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 ( { 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 ( - - {userFetching ? 'loading user' : null} - {listsFetching ? 'loading lists' : null} - - ); -} - -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 (
- sync - - + logout
);