Responsive Profile Section

Author: harkiratsm

README.md

@@ -109,19 +109,24 @@ Your application setup is successfully completed!
 <a id="update-repo"></a>
 
 ### 6. Update Fork Repo From Original Repo (Optional)
+
 0. Follow these steps if you are done with <b>Setup Remote</b> ✅.
 1. Update your local Master to be in synch with the original repo.
+
 ```console
 
 $ git pull upstream <name_of_branch>
 
 ```
+
 2. Update the forked repo master by pushing the local repo up.
+
 ```console
 
 $ git push origin <name_of_branch>
 
 ```
+
 <a id="run-app"></a>
 
 ### Running the app

package-lock.json

@@ -27,7 +27,7 @@ export default function Profile() {
         .then(doc => {
           if (doc.exists) {
             let data = doc.data();
-            setMyProfile(data)
+            setMyProfile(data);
           } else {
             console.log('No such document!');
           }
@@ -41,21 +41,30 @@ export default function Profile() {
   return (
     <DrawerLayout>
       <Grid>
-        { myProfile !== null ? <ProfileInfo myProfile={myProfile} /> : <>No Data</>}
+        {myProfile !== null ? (
+          <ProfileInfo myProfile={myProfile} />
+        ) : (
+          <>No Data</>
+        )}
       </Grid>
       <Grid container style={{ marginBottom: '21px' }}>
-        <Grid item sm={4} style={{ marginRight: '21px' }}>
+        <Grid
+          item
+          xs={12}
+          sm={5}
+          style={{ marginRight: '21px', marginBottom: '21px' }}
+        >
           <CommitChart />
         </Grid>
-        <Grid item sm>
+        <Grid item xs={12} sm>
           <Badge />
         </Grid>
       </Grid>
       <Grid container>
-        <Grid sm>
+        <Grid xs={12} sm>
           <ProfileEvents />
         </Grid>
-        <Grid sm>
+        <Grid xs={12} sm>
           <ProfilePublications />
         </Grid>
       </Grid>

src/components/Profile.js

@@ -11,7 +11,6 @@ import {
   Chip
 } from '@material-ui/core';
 
-
 const useStyles = makeStyles(theme => ({
   root: {
     fontFamily: 'Montserrat',
@@ -37,11 +36,36 @@ const useStyles = makeStyles(theme => ({
     marginLeft: '75px',
     position: 'absolute',
     width: theme.spacing(20),
-    height: theme.spacing(20)
+    height: theme.spacing(20),
+    [theme.breakpoints.down('xs')]: {
+      width: theme.spacing(18),
+      height: theme.spacing(18),
+      fontSize: '24px',
+      marginLeft: '35px'
+    }
   },
   tiny: {
     width: theme.spacing(3),
     height: theme.spacing(3)
+  },
+  profiledesc: {
+    maxWidth: '250px',
+    wordBreak: 'break-all',
+    whiteSpace: 'no-warp',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: '5',
+    lineHeight: '1',
+    maxHeight: '1.5'
+  },
+  publictext: {
+    fontWeight: '650',
+    paddingRight: '10px',
+    [theme.breakpoints.down('xs')]: {
+      fontSize: '25px'
+    }
   }
 }));
 
@@ -97,10 +121,7 @@ function ProfileInfo({ myProfile }) {
         justifyContent="flex-end"
         style={{ position: 'absolute', right: '60px', paddingTop: '50px' }}
       >
-        <Typography
-          variant="h2"
-          style={{ fontWeight: '650', paddingRight: '10px' }}
-        >
+        <Typography variant="h2" className={classes.publictext}>
           Public View
         </Typography>
 
@@ -154,10 +175,7 @@ function ProfileInfo({ myProfile }) {
             <Typography variant="body2" style={{ fontWeight: '650' }}>
               {myProfile.role}
             </Typography>
-            <Typography
-              variant="body2"
-              style={{ maxWidth: '250px', marginTop: '16px' }}
-            >
+            <Typography variant="body2" className={classes.profiledesc}>
               {myProfile.description}
             </Typography>
           </Box>
@@ -170,11 +188,11 @@ function ProfileInfo({ myProfile }) {
             <Typography variant="h2" style={{ fontWeight: '650' }}>
               Interested in:
             </Typography>
-            {interestedInArr.filter(e => String(e).trim()).map((tagName) => {
-              return (
-                <Chip className={classes.tags} label={tagName} />
-              )
-            })}
+            {interestedInArr
+              .filter(e => String(e).trim())
+              .map(tagName => {
+                return <Chip className={classes.tags} label={tagName} />;
+              })}
           </Box>
         </Box>
       </Card>

src/components/ProfileInfo.js

@@ -2,15 +2,18 @@ import React, { useEffect } from 'react';
 import { makeStyles } from '@material-ui/styles';
 import { Box, Button, Card, Grid, Typography } from '@material-ui/core';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles(theme => ({
   root: {
     background: '#CCD2E3',
     borderRadius: '20px',
     padding: '19px',
     color: '#291757',
     fontFamily: 'Montserrat',
     marginBottom: '21px',
-    marginLeft: '21px'
+    marginLeft: '21px',
+    [theme.breakpoints.down('xs')]: {
+      marginLeft: '0px'
+    }
   },
   topContainer: {
     display: 'flex',

src/components/ProfilePublications.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Box } from '@material-ui/core'
+import { Box } from '@material-ui/core';
 
-const UserEventStats = (props) => {
+const UserEventStats = props => {
   const box = {
     display: 'flex',
     height: '80px',
@@ -32,7 +32,14 @@ const UserEventStats = (props) => {
   };
 
   return (
-    <Box style={{ display: 'flex', flexDirection: 'column', gap: '20px', padding: '21px' }}>
+    <Box
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        padding: '21px'
+      }}
+    >
       <Box style={box}>
         <p>
           events

src/components/UserEventStats.js

@@ -6,13 +6,13 @@ import firebase from 'firebase';
 class AuthService {
   // Configure Firebase.
   config = {
-    apiKey: "AIzaSyBogaqI7q74Wml7AD90VVm_89o1cgFFQCo",
-    authDomain: "code-for-cause-leaders.firebaseapp.com",
-    projectId: "code-for-cause-leaders",
-    storageBucket: "code-for-cause-leaders.appspot.com",
-    messagingSenderId: "58409560329",
-    appId: "1:58409560329:web:60ffc3c128d3b155a18bd8",
-    measurementId: "G-49RJ8QM95E"  
+    apiKey: 'AIzaSyBogaqI7q74Wml7AD90VVm_89o1cgFFQCo',
+    authDomain: 'code-for-cause-leaders.firebaseapp.com',
+    projectId: 'code-for-cause-leaders',
+    storageBucket: 'code-for-cause-leaders.appspot.com',
+    messagingSenderId: '58409560329',
+    appId: '1:58409560329:web:60ffc3c128d3b155a18bd8',
+    measurementId: 'G-49RJ8QM95E'
     // ...
   };
   // Configure FirebaseUI.
@@ -118,4 +118,4 @@ class AuthService {
 const authService = new AuthService();
 
 export default authService;
-export { firebase }
+export { firebase };

src/services/authService.js

@@ -14,26 +14,21 @@ import {
 
 const useStyles = makeStyles(theme => ({
   root: {
-
     backgroundColor: '#291755',
     paddingTop: 80,
     paddingBottom: 60,
     color: '#FFFFFF',
-    paddingLeft:60,
-    paddingRight:60,
-    
-    height:'90.3vh',
+    paddingLeft: 60,
+    paddingRight: 60,
+
+    height: '90.3vh',
     [theme.breakpoints.down('md')]: {
       paddingTop: 15,
-      paddingBottom: 15,
-      
-      
-
+      paddingBottom: 15
     },
-    [theme.breakpoints.down('sm')]:{
-      height:'auto',
-    },
-    
+    [theme.breakpoints.down('sm')]: {
+      height: 'auto'
+    }
   },
   extraPadding: {
     padding: '0 70px 0px 0px',
@@ -88,25 +83,24 @@ function Hero({ className, ...rest }) {
           }}
         /> */}
         <Hidden mdDown>
-              <Grid item xs={12} md={6}>
-                <Box>
-                  <div className={classes.image}>
-                    <img
-                      src="/static/home/blob.svg"
-                      alt="blob"
-                      style={{
-                        position: 'absolute',
-                        top: '-9rem',
-                        left: '-20%'
-                      }}
-                    />
-                  </div>
-                </Box>
-              </Grid>
-          </Hidden>        
+          <Grid item xs={12} md={6}>
+            <Box>
+              <div className={classes.image}>
+                <img
+                  src="/static/home/blob.svg"
+                  alt="blob"
+                  style={{
+                    position: 'absolute',
+                    top: '-9rem',
+                    left: '-20%'
+                  }}
+                />
+              </div>
+            </Box>
+          </Grid>
+        </Hidden>
         <Grid container spacing={3}>
           <Grid item xs={12} md={6} style={{ zIndex: '20' }}>
-            
             <Box
               display="flex"
               flexDirection="column"
@@ -132,20 +126,19 @@ function Hero({ className, ...rest }) {
                       alt="codeforcauseimg"
                       src="/static/home/illus-1.svg"
                       style={{
-                        width: '75%',
-                        
+                        width: '75%'
                       }}
                     />
                   </div>
                 </Box>
               </Hidden>
               <Box mt={5}>
-                  <Typography variant="body1">
-                    An initiative to contribute to the Open Source community by
-                    providing training, guidance, and awareness about the
-                    possibilities in the field of software to students &
-                    professionals.
-                  </Typography>
+                <Typography variant="body1">
+                  An initiative to contribute to the Open Source community by
+                  providing training, guidance, and awareness about the
+                  possibilities in the field of software to students &
+                  professionals.
+                </Typography>
               </Box>
               <Box mt={2} mb={3}>
                 <Grid container>
@@ -177,17 +170,17 @@ function Hero({ className, ...rest }) {
             <Grid item xs={12} md={6}>
               <Box>
                 <div className={classes.image}>
-                      <img
-                        alt="codeforcauseimg"
-                        src="/static/home/illus-1.svg"
-                        style={{
-                          width: '100%'
-                        }}
-                      />
+                  <img
+                    alt="codeforcauseimg"
+                    src="/static/home/illus-1.svg"
+                    style={{
+                      width: '100%'
+                    }}
+                  />
                 </div>
               </Box>
             </Grid>
-          </Hidden>             
+          </Hidden>
         </Grid>
       </Container>
     </div>