Important Design optimazations for Mobile Viewers (#140)

* Design optimazations for Mobile Viewers

* remove hScrolling on course page

Author: Abhishek-kumar09

public/index.html

@@ -13,6 +13,7 @@
     <link 
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap" 
       rel="stylesheet"> 
+    <link href="index.css" rel="stylesheet">
     <title>Code for Cause</title>
     <meta
       name="description"

src/components/Course/CourseCardTemplate1.js

@@ -1,14 +1,7 @@
-import React from 'react';
+import { Box, Card, CardContent, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import ParallaxSlide from '@mui-treasury/components/slide/parallax';
-
-import {
-  Typography,
-  Box,
-  Card,
-  CardContent,
-  Container
-} from '@material-ui/core';
+import React from 'react';
 import { Link } from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({
@@ -41,7 +34,9 @@ const useStyles = makeStyles(theme => ({
     height: 'auto'
     // paddingTop: "56.25%", // 16:9
   },
-  cardContent: {},
+  cardContent: {
+    padding: '16px 0px 16px 16px'
+  },
   chipActions: {
     display: 'block'
   },
@@ -99,6 +94,14 @@ const useStyles = makeStyles(theme => ({
     width: '100%',
     // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
     transform: 'translateZ(0)'
+  },
+  bottomCardContent: {
+    margin: '0px 8px 18px 0px',
+    padding: '4px 8px',
+    border: '1px solid',
+    borderColor: '#A6A6A6',
+    borderRadius: '5px',
+    width: 'min-content'
   }
 }));
 
@@ -113,7 +116,7 @@ export default function CourseCard({ course }) {
           maxWidth: '320px'
         }}
       >
-        <CardContent className={classes.cardContent}>
+        <CardContent>
           <Box display="flex" flexDirection="column">
             <Typography
               align="left"
@@ -145,26 +148,24 @@ export default function CourseCard({ course }) {
         <ParallaxCarousel slides={course.slides} />
 
         <CardContent className={classes.cardContent}>
-          <Box mt={0} display="flex" flexDirection="row">
+          <Box
+            mt={0}
+            mr={0}
+            display="flex"
+            flexDirection="row"
+            flexWrap="wrap"
+            style={{ width: '102%' }}
+          >
             {course.tags.slice(0, 3).map((tag, index) => (
-              <Container
-                style={{
-                  margin: '0px 8px 18px 0px',
-                  padding: '4px 8px',
-                  border: '1px solid',
-                  borderColor: '#A6A6A6',
-                  borderRadius: '5px'
-                }}
-                variant="outlined"
-              >
+              <div className={classes.bottomCardContent} variant="outlined">
                 <Typography
                   style={{ color: '#a6a6a6', fontWeight: 500 }}
                   variant="caption"
                   noWrap={true}
                 >
                   {tag}
                 </Typography>
-              </Container>
+              </div>
             ))}
           </Box>
 

src/components/Hero/HeroWithLogo.js

@@ -78,7 +78,12 @@ function Hero({
               height="100%"
               className={clsx(classes.extraPadding)}
             >
-              <Typography variant="h1" gutterBottom>
+              <Typography
+                align="left"
+                variant="h1"
+                gutterBottom
+                style={{ width: '110%' }}
+              >
                 {title}
               </Typography>
               <Typography variant="h1"> {title2}</Typography>

src/components/Hero/HeroWithOneButton.js

@@ -56,7 +56,8 @@ function Hero({
             backgroundImage: `${backgroundImage}`,
             backgroundSize: 'cover',
             backgroundRepeat: 'no-repeat',
-            backgroundPositionY: 'center'
+            backgroundPositionY: 'center',
+            backgroundPositionX: 'center'
           }}
           {...rest}
         >

src/layouts/MainLayout/TopBar/index.js

@@ -109,6 +109,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
     <div>
       <RouterLink
         to="/"
+        onClick={toggleDrawer('right', false)}
         style={{ position: 'absolute', left: '20px', top: '3%' }}
       >
         <Logo className={classes.logo} />

src/views/pages/BlogsView/Blog/Blog.js

@@ -45,7 +45,10 @@ const useStyles = makeStyles(theme => ({
     },
     '& img': {
       width: '70%',
-      margin: 'auto'
+      margin: 'auto',
+      [theme.breakpoints.down('sm')]: {
+        width: '90%'
+      }
     },
     '& ul,ol': {
       marginLeft: '50px',

src/views/pages/BlogsView/PublishBlog.js

@@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: '#fff',
     padding: theme.spacing(20, 10, 20),
     [theme.breakpoints.down('sm')]: {
-      padding: theme.spacing(20, 5, 20)
+      padding: theme.spacing(20, 3, 20)
     }
   },
   heading: {

src/views/pages/BlogsView/index.js

@@ -8,7 +8,8 @@ import PublishBlog from './PublishBlog';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    backgroundColor: '#f2f2f2'
+    backgroundColor: '#f2f2f2',
+    overflowX: 'hidden'
   },
   paddingTop: {
     padding: '50px auto 100px',

src/views/pages/CLView/Apply.js

@@ -59,6 +59,7 @@ function Apply({ className, ...rest }) {
           <div className={classes.main}>
             <Typography
               variant="h2"
+              align="center"
               style={{
                 marginBottom: '10px',
                 fontWeight: 700

src/views/pages/CLView/Process.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Grid, makeStyles, Typography } from '@material-ui/core';
 import clsx from 'clsx';
-import { Container, Grid, Typography, makeStyles } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import React from 'react';
 import ProcessSteppers from './ProcessSteppers';
 
 const useStyles = makeStyles(theme => ({
@@ -23,12 +23,19 @@ const useStyles = makeStyles(theme => ({
   },
   stepper: {
     padding: '20px',
-    [theme.breakpoints.down('md')]: {
-      padding: 0,
+    [theme.breakpoints.down('sm')]: {
+      paddingLeft: 0,
+      paddingRight: 0,
       '& .MuiStepper-root': {
-        padding: '0px'
+        padding: '20px 0px'
       }
     }
+  },
+  responsivePadding: {
+    padding: '0px 16px',
+    [theme.breakpoints.down('sm')]: {
+      padding: 0
+    }
   }
 }));
 
@@ -37,7 +44,7 @@ function Process({ benefits, className, ...rest }) {
 
   return (
     <div className={clsx(classes.root, className)} {...rest}>
-      <Container maxWidth="lg">
+      <div className={classes.responsivePadding}>
         <Typography
           style={{ marginTop: '10px' }}
           variant="h2"
@@ -49,7 +56,7 @@ function Process({ benefits, className, ...rest }) {
         <Grid container component="dl" className={classes.stepper}>
           <ProcessSteppers />
         </Grid>
-      </Container>
+      </div>
     </div>
   );
 }