feat: revamp ui mobile home (#1813)

* feat: create bottom nav & update topbar * feat: update menu mobile * fix: show bottombar only at homepage
myriadsocial · Apr 26, 2023 · 155c9bf · 155c9bf
1 parent 2aee838
commit 155c9bf
Show file tree

Hide file tree

Showing 34 changed files with 816 additions and 389 deletions.
diff --git a/pages/experience/index.tsx b/pages/experience/index.tsx
@@ -47,12 +47,14 @@ const ExperiencePageComponent: React.FC<ExperiencePageProps> = props => {
       </Head>
 
       <TopNavbarComponent
-        description={'Custom timeline'}
+        description={'List of my timelines'}
         sectionTitle={SectionTitle.MY_TIMELINE}
         type={'menu'}
       />
 
-      <ExperienceTab />
+      <div style={{ marginBottom: 80 }}>
+        <ExperienceTab showFilter={false} />
+      </div>
     </DefaultLayout>
   );
 };

diff --git a/pages/experience/trending.tsx b/pages/experience/trending.tsx
@@ -5,8 +5,8 @@ import { getSession } from 'next-auth/react';
 import getConfig from 'next/config';
 import Head from 'next/head';
 
+import TrendingExperienceTab from 'components/RightMenuBar/tabs/TrendingExperienceTab';
 import { COOKIE_INSTANCE_URL } from 'components/SelectServer';
-import { ExperienceTab } from 'src/components/RightMenuBar/tabs/ExperienceTab';
 import { TopNavbarComponent } from 'src/components/atoms/TopNavbar';
 import { DefaultLayout } from 'src/components/template/Default/DefaultLayout';
 import { useExperienceHook } from 'src/hooks/use-experience-hook';
@@ -59,7 +59,9 @@ const ExperiencePageComponent: React.FC<TrendingExperiencePageProps> =
           type={'menu'}
         />
 
-        <ExperienceTab experienceType="trending" />
+        <div style={{ marginBottom: 80 }}>
+          <TrendingExperienceTab showFilter={false} />
+        </div>
       </DefaultLayout>
     );
   };

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -6,11 +6,13 @@ import getConfig from 'next/config';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
+import { useMediaQuery } from '@material-ui/core';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
 import { COOKIE_INSTANCE_URL } from 'components/SelectServer';
 import { Timeline } from 'components/Timeline/Timeline.layout';
 import { SearchBoxContainer } from 'components/atoms/Search/SearchBoxContainer';
+import ShowIf from 'components/common/show-if.component';
 import { NavbarComponent } from 'src/components/Mobile/Navbar/Navbar';
 import { RichTextContainer } from 'src/components/Richtext/RichTextContainer';
 import { AppStatusBanner } from 'src/components/common/Banner';
@@ -38,6 +40,7 @@ import {
   fetchNetwork,
 } from 'src/reducers/user/actions';
 import { wrapper } from 'src/store';
+import theme from 'src/themes/default';
 import { ThunkDispatchAction } from 'src/types/thunk';
 
 const { publicRuntimeConfig } = getConfig();
@@ -67,6 +70,7 @@ const Index: React.FC<HomePageProps> = props => {
   useEffect(() => {
     if (!session?.user?.instanceURL) updateSession(session);
   }, [session]);
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
   return (
     <>
@@ -98,7 +102,9 @@ const Index: React.FC<HomePageProps> = props => {
           <SearchBoxContainer hidden={true} />
         </div>
 
-        <RichTextContainer />
+        <ShowIf condition={!isMobile}>
+          <RichTextContainer />
+        </ShowIf>
 
         <Timeline />
 

diff --git a/src/components/Expericence/Experience.skeleton.tsx b/src/components/Expericence/Experience.skeleton.tsx
@@ -4,21 +4,25 @@ import Card from '@material-ui/core/Card';
 import Grid from '@material-ui/core/Grid';
 import BaseSekeleton from '@material-ui/lab/Skeleton';
 
-export const Skeleton = () => {
+export const Skeleton = ({ menuDrawer = false }: { menuDrawer?: boolean }) => {
   return (
     <Card
       style={{
-        padding: 20,
+        padding: menuDrawer ? '5px 10px' : 20,
         borderRadius: 10,
-        marginBottom: 30,
+        marginBottom: menuDrawer ? 10 : 30,
         width: '100%',
       }}>
       <Grid
         container
         direction="row"
         style={{ width: '100%' }}
         alignItems="center">
-        <BaseSekeleton variant="rect" width={68} height={68} />
+        <BaseSekeleton
+          variant="rect"
+          width={menuDrawer ? 40 : 68}
+          height={menuDrawer ? 40 : 68}
+        />
 
         <Grid
           item

diff --git a/src/components/Expericence/Experience.style.ts b/src/components/Expericence/Experience.style.ts
@@ -8,6 +8,7 @@ import {
 type ExperienceStyleProps = {
   selected: boolean;
   selectable: boolean;
+  menuDrawer: boolean;
 };
 
 export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
@@ -17,7 +18,7 @@ export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
       border: '1px solid',
       borderColor: props => (props.selected ? '#6E3FC3' : '#FFF'),
       borderRadius: 10,
-      padding: 20,
+      padding: props => (props.menuDrawer ? '5px 10px' : 20),
       width: '100%',
       boxShadow: `0px 2px 10px rgba(0, 0, 0, 0.05)`,
       position: 'relative',
@@ -49,8 +50,8 @@ export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
       },
     },
     image: {
-      width: 68,
-      height: 68,
+      width: props => (props.menuDrawer ? 40 : 68),
+      height: props => (props.menuDrawer ? 40 : 68),
       opacity: 0.9,
       borderRadius: 5,
     },

diff --git a/src/components/Expericence/Experience.tsx b/src/components/Expericence/Experience.tsx
@@ -45,6 +45,7 @@ type ExperienceProps = {
   onSubscribe?: (experienceId: string) => void;
   onUnsubscribe?: (experienceId: string) => void;
   onDelete?: (experienceId: string) => void;
+  menuDrawer?: boolean;
 };
 
 const MenuItem = WithAuthorizeAction(BaseMenuItem);
@@ -65,9 +66,11 @@ export const Experience: React.FC<ExperienceProps> = props => {
     onDelete,
     onSubscribe,
     onUnsubscribe,
+    menuDrawer = false,
   } = props;
+
   const router = useRouter();
-  const styles = useStyles(props);
+  const styles = useStyles({ ...props, menuDrawer });
   const confirm = useConfirm();
   const enqueueSnackbar = useEnqueueSnackbar();
 
@@ -220,24 +223,30 @@ export const Experience: React.FC<ExperienceProps> = props => {
           <Grid container justifyContent="space-between" wrap="nowrap">
             <div>
               {userExperience.experience.experienceImageURL ? (
-                <NextImage
-                  loader={() =>
-                    userExperience.experience.experienceImageURL ??
-                    DEFAULT_IMAGE
-                  }
-                  alt={userExperience.experience.name}
-                  src={
-                    userExperience.experience.experienceImageURL ??
-                    DEFAULT_IMAGE
-                  }
-                  placeholder="empty"
-                  objectFit="cover"
-                  objectPosition="center"
-                  width={68}
-                  height={68}
-                  quality={100}
-                  className={styles.image}
-                />
+                <div
+                  style={{
+                    maxWidth: menuDrawer ? 40 : 68,
+                    maxHeight: menuDrawer ? 40 : 68,
+                  }}>
+                  <NextImage
+                    alt={userExperience.experience.name}
+                    loader={() =>
+                      userExperience.experience.experienceImageURL ??
+                      DEFAULT_IMAGE
+                    }
+                    src={
+                      userExperience.experience.experienceImageURL ??
+                      DEFAULT_IMAGE
+                    }
+                    placeholder="empty"
+                    objectFit="cover"
+                    objectPosition="center"
+                    width={'100%'}
+                    height={'100%'}
+                    quality={90}
+                    className={styles.image}
+                  />
+                </div>
               ) : (
                 <Avatar
                   alt={userExperience.experience.name}

diff --git a/src/components/ExpericenceRightBar/Experience.skeleton.tsx b/src/components/ExpericenceRightBar/Experience.skeleton.tsx
@@ -1,24 +1,26 @@
-import * as React from 'react';
-
 import Card from '@material-ui/core/Card';
 import Grid from '@material-ui/core/Grid';
 import BaseSekeleton from '@material-ui/lab/Skeleton';
 
-export const Skeleton = () => {
+export const Skeleton = ({ menuDrawer = false }: { menuDrawer?: boolean }) => {
   return (
     <Card
       style={{
-        padding: 20,
+        padding: menuDrawer ? '5px 10px' : 20,
         borderRadius: 10,
-        marginBottom: 30,
+        marginBottom: menuDrawer ? 10 : 30,
         width: '100%',
       }}>
       <Grid
         container
         direction="row"
         style={{ width: '100%' }}
         alignItems="center">
-        <BaseSekeleton variant="rect" width={68} height={68} />
+        <BaseSekeleton
+          variant="rect"
+          width={menuDrawer ? 40 : 68}
+          height={menuDrawer ? 40 : 68}
+        />
 
         <Grid
           item

diff --git a/src/components/ExpericenceRightBar/Experience.style.ts b/src/components/ExpericenceRightBar/Experience.style.ts
@@ -8,6 +8,7 @@ import {
 type ExperienceStyleProps = {
   selected: boolean;
   selectable: boolean;
+  menuDrawer: boolean;
 };
 
 export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
@@ -17,7 +18,7 @@ export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
       border: '1px solid',
       borderColor: props => (props.selected ? '#6E3FC3' : '#FFF'),
       borderRadius: 10,
-      padding: 20,
+      padding: props => (props.menuDrawer ? '5px 10px' : 20),
       width: '100%',
       boxShadow: `0px 2px 10px rgba(0, 0, 0, 0.05)`,
       position: 'relative',
@@ -49,15 +50,18 @@ export const useStyles = makeStyles<Theme, ExperienceStyleProps>(theme =>
       },
     },
     image: {
-      width: 68,
-      height: 68,
+      width: props => (props.menuDrawer ? 40 : 68),
+      height: props => (props.menuDrawer ? 40 : 68),
       opacity: 0.9,
       borderRadius: 5,
     },
     cardContent: {
       width: 140,
       padding: '0px 0px 0px 20px',
       flexGrow: 1,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
 
       '&:last-child': {
         paddingBottom: 0,

diff --git a/src/components/ExpericenceRightBar/Experience.tsx b/src/components/ExpericenceRightBar/Experience.tsx
@@ -45,6 +45,7 @@ type ExperienceProps = {
   onSubscribe?: (experienceId: string) => void;
   onUnsubscribe?: (experienceId: string) => void;
   onDelete?: (experienceId: string) => void;
+  menuDrawer?: boolean;
 };
 
 const MenuItem = WithAuthorizeAction(BaseMenuItem);
@@ -65,9 +66,11 @@ export const Experience: React.FC<ExperienceProps> = props => {
     onDelete,
     onSubscribe,
     onUnsubscribe,
+    menuDrawer = false,
   } = props;
+
   const router = useRouter();
-  const styles = useStyles(props);
+  const styles = useStyles({ ...props, menuDrawer });
   const confirm = useConfirm();
   const enqueueSnackbar = useEnqueueSnackbar();
 
@@ -225,22 +228,30 @@ export const Experience: React.FC<ExperienceProps> = props => {
             justifyContent="space-between"
             wrap="nowrap">
             {userExperience.experience.experienceImageURL ? (
-              <NextImage
-                alt={userExperience.experience.name}
-                loader={() =>
-                  userExperience.experience.experienceImageURL ?? DEFAULT_IMAGE
-                }
-                src={
-                  userExperience.experience.experienceImageURL ?? DEFAULT_IMAGE
-                }
-                placeholder="empty"
-                objectFit="cover"
-                objectPosition="center"
-                width={68}
-                height={68}
-                quality={90}
-                className={styles.image}
-              />
+              <div
+                style={{
+                  maxWidth: menuDrawer ? 40 : 68,
+                  maxHeight: menuDrawer ? 40 : 68,
+                }}>
+                <NextImage
+                  alt={userExperience.experience.name}
+                  loader={() =>
+                    userExperience.experience.experienceImageURL ??
+                    DEFAULT_IMAGE
+                  }
+                  src={
+                    userExperience.experience.experienceImageURL ??
+                    DEFAULT_IMAGE
+                  }
+                  placeholder="empty"
+                  objectFit="cover"
+                  objectPosition="center"
+                  width={'100%'}
+                  height={'100%'}
+                  quality={90}
+                  className={styles.image}
+                />
+              </div>
             ) : (
               <Avatar
                 alt={userExperience.experience.name}
@@ -265,7 +276,12 @@ export const Experience: React.FC<ExperienceProps> = props => {
               </Typography>
             </CardContent>
 
-            <IconButton aria-label="settings" onClick={handleClickSettings}>
+            <IconButton
+              aria-label="settings"
+              onClick={handleClickSettings}
+              style={{
+                padding: menuDrawer ? 0 : 12,
+              }}>
               <SvgIcon
                 component={DotsVerticalIcon}
                 viewBox="0 0 24 24"