From f74dedfce4ade65cfe023c973a6c137a56c88ab5 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 22:09:54 +0300 Subject: feat: adapt HomePage for mobile devices --- src/pages/HomePage/HomePage.tsx | 4 ++-- src/pages/Page.tsx | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'src/pages') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 8995630..35130d8 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -61,7 +61,7 @@ const HomePage: React.FC = () => { return ( - + logo @@ -76,7 +76,7 @@ const HomePage: React.FC = () => { - + Which one to choose? diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 24487f3..c2b422e 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { SnackbarProvider } from 'notistack'; +import { isMobile } from 'react-device-detect'; + import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; import AuthPage from './AuthPage/AuthPage'; @@ -8,9 +10,10 @@ import HomePage from './HomePage/HomePage'; import NotificationsPage from './NotificationsPage/NotificationsPage'; import { useNavigate } from '../hooks/useNavigate'; + const useStyles = makeStyles(theme => ({ root: { - margin: theme.spacing(15, 5, 5, 8) + margin: isMobile ? theme.spacing(5, 2) : theme.spacing(15, 5, 5, 8) } })); -- cgit v1.2.3 From 6a216b903899d1481f93ebff40e246f60c4c3e89 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 22:44:38 +0300 Subject: feat: adapt all pages to mobile view --- src/pages/FeedPage/FeedPage.tsx | 15 +++------------ src/pages/FeedPage/PollSubmission.tsx | 9 ++++++--- src/pages/FeedPage/PollSubmissionImage.tsx | 5 ++++- src/pages/Page.tsx | 2 +- src/pages/ProfilePage/ProfilePage.tsx | 14 +++----------- 5 files changed, 17 insertions(+), 28 deletions(-) (limited to 'src/pages') diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx index 8149c8c..0b7d44a 100644 --- a/src/pages/FeedPage/FeedPage.tsx +++ b/src/pages/FeedPage/FeedPage.tsx @@ -1,24 +1,15 @@ import React, { useState, useEffect } from 'react'; import { Poll } from 'which-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { Container } from '@material-ui/core/'; import Feed from '../../components/Feed/Feed'; import { get } from '../../requests'; import PollSubmission from './PollSubmission'; import { useAuth } from '../../hooks/useAuth'; - -const useStyles = makeStyles(theme => ({ - root: { - width: theme.spacing(75), - margin: '0 auto' - } -})); - const FeedPage: React.FC = () => { const [polls, setPolls] = useState([]); const { isAuthenticated } = useAuth(); - const classes = useStyles(); useEffect(() => { get('/feed').then(response => { @@ -33,10 +24,10 @@ const FeedPage: React.FC = () => { }; return ( -
+ {isAuthenticated() && } -
+ ); }; diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index b067914..5c8efbb 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -21,8 +21,11 @@ interface PropTypes{ const useStyles = makeStyles(theme => ({ root: { + marginBottom: theme.spacing(4) + }, + images: { height: theme.spacing(50), - display: 'flex' + display: 'flex', } })); @@ -63,11 +66,11 @@ const PollSubmission: React.FC = ({ addPoll }) => { return ( - + {user && } -
+
diff --git a/src/pages/FeedPage/PollSubmissionImage.tsx b/src/pages/FeedPage/PollSubmissionImage.tsx index a8ec437..8835989 100644 --- a/src/pages/FeedPage/PollSubmissionImage.tsx +++ b/src/pages/FeedPage/PollSubmissionImage.tsx @@ -28,6 +28,9 @@ const useStyles = makeStyles({ display: 'flex', justifyContent: 'center', alignItems: 'center' + }, + text: { + textAlign: 'center' } }); @@ -56,7 +59,7 @@ const PollSubmissionImage: React.FC = ({ url, setUrl }) => { const Upload = ( <> - Upload an image + Upload an image ); diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index c2b422e..4c46ea8 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -13,7 +13,7 @@ import { useNavigate } from '../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { - margin: isMobile ? theme.spacing(5, 2) : theme.spacing(15, 5, 5, 8) + margin: isMobile ? theme.spacing(2) : theme.spacing(15, 5, 5, 8) } })); diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 4710ae8..9a8f69a 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import { User, Poll } from 'which-types'; -import { makeStyles } from '@material-ui/core/styles'; +import { Container } from '@material-ui/core'; import ProfileInfo from './ProfileInfo'; import Feed from '../../components/Feed/Feed'; @@ -9,20 +9,12 @@ import { useAuth } from '../../hooks/useAuth'; import { useNavigate } from '../../hooks/useNavigate'; -const useStyles = makeStyles(theme => ({ - root: { - width: theme.spacing(75), - margin: '0 auto' - } -})); - const ProfilePage: React.FC = () => { const [userInfo, setUserInfo] = useState(); const [polls, setPolls] = useState([]); const [totalVotes, setTotalVotes] = useState(0); const { page, navigate } = useNavigate(); const { user } = useAuth(); - const classes = useStyles(); useEffect(() => { const id = page?.id || user?._id; @@ -44,7 +36,7 @@ const ProfilePage: React.FC = () => { }, [navigate, page, user]); return ( -
+ { totalVotes={totalVotes} /> -
+ ); }; -- cgit v1.2.3 From f6bb137ccf414ba36610c0ceea598c95683dce60 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 23:00:04 +0300 Subject: refactor: use mui-breakpoints --- src/pages/Page.tsx | 8 ++++++-- src/pages/ProfilePage/ProfilePage.tsx | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'src/pages') diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 4c46ea8..91b7214 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { SnackbarProvider } from 'notistack'; -import { isMobile } from 'react-device-detect'; import ProfilePage from './ProfilePage/ProfilePage'; import FeedPage from './FeedPage/FeedPage'; @@ -13,7 +12,12 @@ import { useNavigate } from '../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { - margin: isMobile ? theme.spacing(2) : theme.spacing(15, 5, 5, 8) + [theme.breakpoints.down('sm')]: { + margin: theme.spacing(2) + }, + [theme.breakpoints.up('md')]: { + margin: theme.spacing(15, 5, 5, 8) + } } })); diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 9a8f69a..b7a4a75 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -36,7 +36,7 @@ const ProfilePage: React.FC = () => { }, [navigate, page, user]); return ( - + Date: Fri, 3 Jul 2020 23:42:06 +0300 Subject: feat: hide grid overflow in HomePage --- src/pages/HomePage/HomePage.tsx | 128 +++++++++++++++++++++------------------- 1 file changed, 67 insertions(+), 61 deletions(-) (limited to 'src/pages') diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 35130d8..f00289a 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -16,6 +16,10 @@ import { useAuth } from '../../hooks/useAuth'; import { get } from '../../requests'; const useStyles = makeStyles(theme => ({ + root: { + overflow: 'hidden', + padding: theme.spacing(0, 2) + }, logo: { width: theme.spacing(20), height: theme.spacing(20) @@ -60,77 +64,79 @@ const HomePage: React.FC = () => { const MUILink = Material-UI; return ( - - - - - logo - - - - - - - User score: {rating.toFixed(1)} - +
+ + + + + logo + + + + + + + User score: {rating.toFixed(1)} + + - - - - - Which one to choose? - - -

- Have you ever found yourself stuck between two options, not being able to choose any? - This is exactly the problem we are going to solve! -

-

Share your minor everyday uncertainties with the whole world and see what others think!

- - {!isAuthenticated() && ( + + + + Which one to choose? + + +

+ Have you ever found yourself stuck between two options, not being able to choose any? + This is exactly the problem we are going to solve! +

+

Share your minor everyday uncertainties with the whole world and see what others think!

+ + {!isAuthenticated() && ( + + )} + + + + About the project + + +

+ The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}. + It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)! +

+

+ We encourage any developer to check it out. Feel free to open issues and create Pull Requests! +

+

+ All the development process is being tracked on the KanBan board (thanks GitHub). + You can always check it to see what is the current state of the project. +

- )} - - - - About the project - - -

- The project is written in {TypescriptLink} and features {ReactLink}, {FeathersLink}, and {MUILink}. - It is currently open-source and you can visit our {GithubLink} (make sure to star our repositories)! -

-

- We encourage any developer to check it out. Feel free to open issues and create Pull Requests! -

-

- All the development process is being tracked on the KanBan board (thanks GitHub). - You can always check it to see what is the current state of the project. -

- - + + - +
); }; -- cgit v1.2.3 From 6d593eebffffdeb09323198d118c8de15786ab2e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 23:42:23 +0300 Subject: feat: setup correct padding for Page --- src/pages/Page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/pages') diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index 91b7214..c0ba3d2 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -13,10 +13,10 @@ import { useNavigate } from '../hooks/useNavigate'; const useStyles = makeStyles(theme => ({ root: { [theme.breakpoints.down('sm')]: { - margin: theme.spacing(2) + margin: theme.spacing(2, 0, 12, 0) }, [theme.breakpoints.up('md')]: { - margin: theme.spacing(15, 5, 5, 8) + margin: theme.spacing(15, 5, 8, 5) } } })); -- cgit v1.2.3 From 77b583d42341d00fc1fd458f552afa2cd847d955 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Fri, 3 Jul 2020 23:45:39 +0300 Subject: feat: display notifications on top if mobile --- src/pages/Page.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src/pages') diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx index c0ba3d2..56d7372 100644 --- a/src/pages/Page.tsx +++ b/src/pages/Page.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; +import { useMediaQuery } from '@material-ui/core'; import { SnackbarProvider } from 'notistack'; import ProfilePage from './ProfilePage/ProfilePage'; @@ -24,12 +25,14 @@ const useStyles = makeStyles(theme => ({ const Page: React.FC = () => { const { page } = useNavigate(); const classes = useStyles(); + const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down('sm')); return ( -- cgit v1.2.3 From b52743cc950e9633a2da41f72d3462286c629967 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 4 Jul 2020 00:08:57 +0300 Subject: style: remove eslint errors --- src/pages/FeedPage/PollSubmission.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/pages') diff --git a/src/pages/FeedPage/PollSubmission.tsx b/src/pages/FeedPage/PollSubmission.tsx index 5c8efbb..347eecc 100644 --- a/src/pages/FeedPage/PollSubmission.tsx +++ b/src/pages/FeedPage/PollSubmission.tsx @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({ }, images: { height: theme.spacing(50), - display: 'flex', + display: 'flex' } })); -- cgit v1.2.3 From 7b698a68cb3d332aecfebf7a85b2ac56f9448bea Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 4 Jul 2020 00:10:12 +0300 Subject: style: improve notifications blankpage --- src/pages/NotificationsPage/NotificationsPage.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/pages') diff --git a/src/pages/NotificationsPage/NotificationsPage.tsx b/src/pages/NotificationsPage/NotificationsPage.tsx index d162eff..3c39ba3 100644 --- a/src/pages/NotificationsPage/NotificationsPage.tsx +++ b/src/pages/NotificationsPage/NotificationsPage.tsx @@ -2,11 +2,12 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import { Typography } from '@material-ui/core'; -const useStyles = makeStyles({ +const useStyles = makeStyles(theme => ({ root: { + marginTop: theme.spacing(40), textAlign: 'center' } -}); +})); const NotificationsPage: React.FC = () => { const classes = useStyles(); -- cgit v1.2.3