isMobile on all pages and components async-labs#15

msahin12 · Apr 5, 2019 · e1ce6e5 · e1ce6e5
1 parent 11861fb
commit e1ce6e5
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 29 deletions.
diff --git a/app/components/discussions/CreateDiscussionForm.tsx b/app/components/discussions/CreateDiscussionForm.tsx
@@ -25,6 +25,7 @@ type Props = {
   onClose: () => void;
   open: boolean;
   classes: { paper: string };
+  isMobile: boolean;
 };
 
 type State = {
@@ -52,6 +53,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
       open,
       classes: { paper },
       store,
+      isMobile,
     } = this.props;
 
     return (
@@ -89,6 +91,7 @@ class CreateDiscussionForm extends React.Component<Props, State> {
                 >
                   Create Discussion
                 </Button>
+                {isMobile ? <p /> : null}
               </div>
               <p />
               <br />

diff --git a/app/components/discussions/DiscussionActionMenu.tsx b/app/components/discussions/DiscussionActionMenu.tsx
@@ -45,7 +45,7 @@ const getMenuItemOptions = (discussion, component) => [
   },
 ];
 
-class DiscussionActionMenu extends React.Component<{ discussion: Discussion; store?: Store }> {
+class DiscussionActionMenu extends React.Component<{ discussion: Discussion; store?: Store; isMobile: boolean; }> {
   public state = {
     discussionFormOpen: false,
   };
@@ -76,6 +76,7 @@ class DiscussionActionMenu extends React.Component<{ discussion: Discussion; sto
             open={true}
             onClose={this.handleDiscussionFormClose}
             discussion={discussion}
+            isMobile={this.props.isMobile}
           />
         ) : null}
       </React.Fragment>

diff --git a/app/components/discussions/DiscussionList.tsx b/app/components/discussions/DiscussionList.tsx
@@ -10,7 +10,7 @@ import DiscussionListItem from './DiscussionListItem';
 
 import notify from '../../lib/notifier';
 
-type Props = { store?: Store; team: Team };
+type Props = { store?: Store; team: Team; isMobile: boolean };
 
 class DiscussionList extends React.Component<Props> {
   public state = {
@@ -51,13 +51,21 @@ class DiscussionList extends React.Component<Props> {
         <ul style={{ listStyle: 'none', padding: '0px' }}>
           {team &&
             team.orderedDiscussions.map(d => {
-              return <DiscussionListItem key={d._id} discussion={d} team={team} />;
+              return (
+                <DiscussionListItem
+                  key={d._id}
+                  discussion={d}
+                  team={team}
+                  isMobile={this.props.isMobile}
+                />
+              );
             })}
         </ul>
 
         <CreateDiscussionForm
           open={this.state.discussionFormOpen}
           onClose={this.handleDiscussionFormClose}
+          isMobile={this.props.isMobile}
         />
       </div>
     );

diff --git a/app/components/discussions/DiscussionListItem.tsx b/app/components/discussions/DiscussionListItem.tsx
@@ -10,11 +10,12 @@ type Props = {
   store?: Store;
   discussion: Discussion;
   team: Team;
+  isMobile: boolean;
 };
 
 class DiscussionListItem extends React.Component<Props> {
   public render() {
-    const { store, discussion, team } = this.props;
+    const { store, discussion, team, isMobile } = this.props;
     const trimmingLength = 16;
 
     const selectedDiscussion =
@@ -49,7 +50,7 @@ class DiscussionListItem extends React.Component<Props> {
               marginRight: '-12px',
             }}
           >
-            <DiscussionActionMenu discussion={discussion} />
+            <DiscussionActionMenu discussion={discussion} isMobile={isMobile}/>
           </div>
         </li>
       </Paper>

diff --git a/app/components/discussions/EditDiscussionForm.tsx b/app/components/discussions/EditDiscussionForm.tsx
@@ -18,6 +18,7 @@ type Props = {
   onClose: () => void;
   open: boolean;
   discussion: Discussion;
+  isMobile: boolean;
 };
 
 type State = {
@@ -80,7 +81,12 @@ class EditDiscussionForm extends React.Component<Props, State> {
               >
                 Cancel
               </Button>
-              <Button type="submit" variant="contained" color="primary" disabled={this.state.disabled}>
+              <Button
+                type="submit"
+                variant="contained"
+                color="primary"
+                disabled={this.state.disabled}
+              >
                 Update Discussion
               </Button>
             </DialogActions>

diff --git a/app/components/posts/PostDetail.tsx b/app/components/posts/PostDetail.tsx
@@ -157,7 +157,7 @@ class PostDetail extends React.Component<{
           )}
           <div
             style={{
-              margin: isMobile ? '0px' : '0px 20px 0px 70px',
+              margin: isMobile ? '0px'  : '0px 20px 0px 70px',
               fontWeight: 300,
               lineHeight: '1em',
             }}

diff --git a/app/components/posts/PostForm.tsx b/app/components/posts/PostForm.tsx
@@ -87,9 +87,6 @@ class PostForm extends React.Component<MyProps, MyState> {
                   variant="contained"
                   color="primary"
                   disabled={this.state.disabled}
-                  onClick={() => {
-                    this.setState({ isDraft: false });
-                  }}
                 >
                   {isEditing ? 'Save changes' : 'Publish Post'}
                 </Button>

diff --git a/app/pages/create-team.tsx b/app/pages/create-team.tsx
@@ -21,7 +21,7 @@ const styleGrid = {
   height: '100%',
 };
 
-type MyProps = { store: Store; isTL: boolean };
+type MyProps = { store: Store; isTL: boolean; isMobile: boolean; };
 
 class CreateTeam extends React.Component<MyProps> {
   public state = {
@@ -121,7 +121,7 @@ class CreateTeam extends React.Component<MyProps> {
         </Head>
         <div style={{ padding: '0px', fontSize: '14px', height: '100%' }}>
           <Grid container style={styleGrid}>
-            <Grid item sm={12} xs={12} style={{ padding: '0px 20px' }}>
+            <Grid item sm={12} xs={12} style={{ padding: this.props.isMobile ? '0px' : '0px 30px' }}>
               <h3>Create team</h3>
               <p />
               <form onSubmit={this.onSubmit}>

diff --git a/app/pages/discussion.tsx b/app/pages/discussion.tsx
@@ -140,7 +140,7 @@ class DiscussionComp extends React.Component<Props> {
             }
           />
         </Head>
-        <div style={{ padding: '0px 30px' }}>
+        <div style={{ padding: isMobile ? '0px' : '0px 30px' }}>
           <h4>
             <span style={{ fontWeight: 300 }}>Discussion : </span>
             {(discussion && discussion.name) || 'No Discussion is found.'}

diff --git a/app/pages/team-settings.tsx b/app/pages/team-settings.tsx
@@ -55,7 +55,7 @@ const getMenuItemOptions = (member, component) => [
   },
 ];
 
-type MyProps = { teamSlug: string; store: Store; isTL: boolean };
+type MyProps = { teamSlug: string; store: Store; isTL: boolean; isMobile: boolean; };
 type MyState = { inviteMemberOpen: boolean; newName: string; newAvatarUrl: string; disabled: boolean };
 
 class TeamSettings extends React.Component<MyProps, MyState> {
@@ -203,15 +203,15 @@ class TeamSettings extends React.Component<MyProps, MyState> {
   // TODO: MobX when member gets removed
 
   public render() {
-    const { store } = this.props;
+    const { store, isMobile } = this.props;
     const { currentTeam, currentUser } = store;
     const { newName, newAvatarUrl } = this.state;
     const isTL = currentTeam && currentUser && currentUser._id === currentTeam.teamLeaderId;
 
     if (!currentTeam || currentTeam.slug !== this.props.teamSlug) {
       return (
         <Layout {...this.props}>
-          <div style={{ padding: '20px' }}>
+          <div style={{ padding: isMobile ? '0px' : '0px 30px' }}>
             <p>You did not select any team.</p>
             <p>
               To access this page, please select existing team or create new team if you have no
@@ -229,7 +229,7 @@ class TeamSettings extends React.Component<MyProps, MyState> {
             <title>Team Settings</title>
             <meta name="description" content="Only the Team Leader can access this page" />
           </Head>
-          <div style={{ padding: '0px', fontSize: '14px', height: '100%' }}>
+          <div style={{ padding: isMobile ? '0px' : '0px 30px', fontSize: '14px', height: '100%' }}>
             <Grid container style={styleGrid}>
               <Grid item sm={12} xs={12} style={{ padding: '0px 20px' }}>
                 <h3>Team Settings</h3>
@@ -248,7 +248,7 @@ class TeamSettings extends React.Component<MyProps, MyState> {
           <title>Team Settings</title>
           <meta name="description" content={`Add or edit members for Team ${currentTeam.name}`} />
         </Head>
-        <div style={{ padding: '0px 20px', fontSize: '15px', height: '100%' }}>
+        <div style={{ padding: isMobile ? '0px' : '0px 30px', fontSize: '15px', height: '100%' }}>
           <Grid container style={styleGrid}>
             <Grid item sm={12} xs={12} style={{ padding: '0px 20px' }}>
               <h3>Team Settings</h3>

diff --git a/app/pages/your-billing.tsx b/app/pages/your-billing.tsx
@@ -26,7 +26,7 @@ const styleGrid = {
 //   borderRight: '0.5px #707070 solid',
 // };
 
-type Props = { store: Store; isTL: boolean; teamSlug: string };
+type Props = { store: Store; isTL: boolean; teamSlug: string; isMobile: boolean };
 type State = { disabled: boolean; showInvoices: boolean };
 
 class YourBilling extends React.Component<Props, State> {
@@ -37,14 +37,14 @@ class YourBilling extends React.Component<Props, State> {
   };
 
   public render() {
-    const { store } = this.props;
+    const { store, isMobile } = this.props;
     const { currentTeam, currentUser } = store;
     const isTL = currentTeam && currentUser && currentUser._id === currentTeam.teamLeaderId;
 
     if (!currentTeam || currentTeam.slug !== this.props.teamSlug) {
       return (
         <Layout {...this.props}>
-          <div style={{ padding: '0px 20px', fontSize: '15px', height: '100%' }}>
+          <div style={{ padding: isMobile ? '0px' : '0px 30px', fontSize: '15px', height: '100%' }}>
             <p>You did not select any team.</p>
             <p>
               To access this page, please select existing team or create new team if you have no
@@ -58,11 +58,11 @@ class YourBilling extends React.Component<Props, State> {
     if (!isTL) {
       return (
         <Layout {...this.props}>
-          <div style={{ padding: '0px 20px', fontSize: '15px', height: '100%' }}>
-            <Head>
-              <title>Your Billing</title>
-              <meta name="description" content="description" />
-            </Head>
+          <Head>
+            <title>Your Billing</title>
+            <meta name="description" content="description" />
+          </Head>
+          <div style={{ padding: isMobile ? '0px' : '0px 30px', fontSize: '15px', height: '100%' }}>
             <Grid container style={styleGrid}>
               <Grid item sm={12} xs={12} style={{ padding: '0px 20px' }}>
                 <h3>Your Billing</h3>
@@ -81,7 +81,7 @@ class YourBilling extends React.Component<Props, State> {
           <title>Your Billing</title>
           <meta name="description" content="description" />
         </Head>
-        <div style={{ padding: '0px 20px', fontSize: '15px', height: '100%' }}>
+        <div style={{ padding: isMobile ? '0px' : '0px 30px', fontSize: '15px', height: '100%' }}>
           <Grid container style={styleGrid}>
             <Grid item sm={12} xs={12} style={{ padding: '0px 20px' }}>
               <h3>Your Billing</h3>

diff --git a/app/pages/your-settings.tsx b/app/pages/your-settings.tsx
@@ -24,7 +24,7 @@ const styleGrid = {
   height: '100%',
 };
 
-type MyProps = { store: Store; isTL: boolean; error?: string };
+type MyProps = { store: Store; isTL: boolean; error?: string; isMobile: boolean; };
 type MyState = { newName: string; newAvatarUrl: string; disabled: boolean };
 
 class YourSettings extends React.Component<MyProps, MyState> {
@@ -62,7 +62,7 @@ class YourSettings extends React.Component<MyProps, MyState> {
           <title>Your Settings at Async</title>
           <meta name="description" content="description" />
         </Head>
-        <div style={{ padding: '0px 20px', fontSize: '15px', height: '100%' }}>
+        <div style={{ padding: this.props.isMobile ? '0px' : '0px 30px', fontSize: '15px', height: '100%' }}>
           <Grid container style={styleGrid}>
             <Grid item sm={12} xs={12} style={{ padding: '0px 20px' }}>
               <h3>Your Settings</h3>