Merge pull request #240 from mirumee/improve-mobile-appearance

Improve mobile appearance
saleor · Nov 20, 2019 · 9b459f7 · 9b459f7
2 parents 1e98cf1 + 5ce5ed0
commit 9b459f7
Show file tree

Hide file tree

Showing 70 changed files with 34,844 additions and 33,966 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update customer's details page design - #248 by @dominik-zeglen
 - Use Apollo Hooks - #254 by @dominik-zeglen
 - Fix disappearing products description - #259 by @dominik-zeglen
+- Improve mobile appearance - #240 by @benekex2 and @dominik-zeglen
 
 ## 2.0.0
 

diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -75,7 +75,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -207,7 +207,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 AttributeList.displayName = "AttributeList";

diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableCell from "@material-ui/core/TableCell";
 import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
@@ -11,6 +10,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import {
   SortableTableBody,
@@ -80,7 +80,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
           </Button>
         }
       />
-      <Table>
+      <ResponsiveTable>
         <TableHead>
           <TableRow>
             <TableCell className={classes.columnDrag} />
@@ -138,7 +138,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             )
           )}
         </SortableTableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -9,6 +8,7 @@ import { FormattedMessage } from "react-intl";
 
 import { CategoryFragment } from "@saleor/categories/types/CategoryFragment";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TablePagination from "@saleor/components/TablePagination";
@@ -73,7 +73,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 

diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx
@@ -1,11 +1,11 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
 import TableRow from "@material-ui/core/TableRow";
 import Checkbox from "@saleor/components/Checkbox";
 import Money from "@saleor/components/Money";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -98,7 +98,7 @@ export const CategoryProductList: React.FC<
 
   return (
     <div className={classes.tableContainer}>
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <colgroup>
           <col />
           <col className={classes.colName} />
@@ -229,7 +229,7 @@ export const CategoryProductList: React.FC<
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </div>
   );
 };

diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -8,6 +7,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableHead from "@saleor/components/TableHead";
@@ -68,7 +68,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
   const intl = useIntl();
 
   return (
-    <Table>
+    <ResponsiveTable>
       <TableHead
         colSpan={numberOfColumns}
         selected={selected}
@@ -174,7 +174,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
           )
         )}
       </TableBody>
-    </Table>
+    </ResponsiveTable>
   );
 };
 

diff --git a/src/collections/components/CollectionProducts/CollectionProducts.tsx b/src/collections/components/CollectionProducts/CollectionProducts.tsx
@@ -2,7 +2,6 @@ import Button from "@material-ui/core/Button";
 import Card from "@material-ui/core/Card";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 import TableCell from "@material-ui/core/TableCell";
 import TableFooter from "@material-ui/core/TableFooter";
@@ -13,6 +12,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import CardTitle from "@saleor/components/CardTitle";
 import Checkbox from "@saleor/components/Checkbox";
+import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import Skeleton from "@saleor/components/Skeleton";
 import StatusLabel from "@saleor/components/StatusLabel";
 import TableCellAvatar, {
@@ -114,7 +114,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
           </Button>
         }
       />
-      <Table className={classes.table}>
+      <ResponsiveTable className={classes.table}>
         <TableHead
           colSpan={numberOfColumns}
           selected={selected}
@@ -232,7 +232,7 @@ const CollectionProducts: React.FC<CollectionProductsProps> = props => {
             )
           )}
         </TableBody>
-      </Table>
+      </ResponsiveTable>
     </Card>
   );
 };

diff --git a/src/components/AppHeader/AppHeader.tsx b/src/components/AppHeader/AppHeader.tsx
@@ -30,7 +30,10 @@ const useStyles = makeStyles(theme => ({
     cursor: "pointer",
     display: "flex",
     marginTop: theme.spacing(0.5),
-    transition: theme.transitions.duration.standard + "ms"
+    transition: theme.transitions.duration.standard + "ms",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   },
   skeleton: {
     marginBottom: theme.spacing(2),
@@ -40,9 +43,13 @@ const useStyles = makeStyles(theme => ({
     color: "inherit",
     flex: 1,
     marginLeft: theme.spacing(),
-    textTransform: "uppercase"
+    textTransform: "uppercase",
+    [theme.breakpoints.down("sm")]: {
+      display: "none"
+    }
   }
 }));
+
 const AppHeader: React.FC<AppHeaderProps> = props => {
   const { children, onBack } = props;
 

diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
@@ -64,6 +64,12 @@ const useStyles = makeStyles(
       marginLeft: theme.spacing(2),
       transition: theme.transitions.duration.standard + "ms"
     },
+    avatar: {
+      "&&": {
+        height: 32,
+        width: 32
+      }
+    },
     content: {
       [theme.breakpoints.down("sm")]: {
         paddingLeft: 0
@@ -79,9 +85,16 @@ const useStyles = makeStyles(
       paddingLeft: drawerWidth
     },
     darkThemeSwitch: {
+      [theme.breakpoints.down("sm")]: {
+        marginRight: -theme.spacing(1.5)
+      },
       marginRight: theme.spacing(2)
     },
     header: {
+      [theme.breakpoints.down("sm")]: {
+        height: 88,
+        marginBottom: 0
+      },
       display: "flex",
       height: 40,
       marginBottom: theme.spacing(3)
@@ -179,6 +192,9 @@ const useStyles = makeStyles(
       [theme.breakpoints.up("md")]: {
         display: "none"
       },
+      [theme.breakpoints.down("sm")]: {
+        left: 0
+      },
       background: theme.palette.background.paper,
       borderRadius: "50%",
       cursor: "pointer",
@@ -239,12 +255,20 @@ const useStyles = makeStyles(
       flex: 1
     },
     userBar: {
+      [theme.breakpoints.down("sm")]: {
+        alignItems: "flex-end",
+        flexDirection: "column-reverse",
+        overflow: "hidden"
+      },
       alignItems: "center",
       display: "flex"
     },
     userChip: {
       backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary
+      borderRadius: 24,
+      color: theme.palette.text.primary,
+      height: 40,
+      padding: theme.spacing(0.5)
     },
     userMenuContainer: {
       position: "relative"
@@ -415,6 +439,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                               <Avatar alt="user" src={user.avatar.url} />
                             )
                           }
+                          classes={{
+                            avatar: classes.avatar
+                          }}
                           className={classes.userChip}
                           label={
                             <>
@@ -433,7 +460,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           open={isMenuOpened}
                           anchorEl={anchor.current}
                           transition
-                          disablePortal
                           placement="bottom-end"
                         >
                           {({ TransitionProps, placement }) => (

diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx
@@ -101,7 +101,7 @@ const useStyles = makeStyles(theme => ({
       content: "''",
       height: 0,
       position: "absolute",
-      right: -35,
+      right: -30,
       top: 15,
       width: 0
     },

diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx
@@ -8,7 +8,7 @@ import SVG from "react-inlinesvg";
 import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
 import useTheme from "@saleor/hooks/useTheme";
 import { createHref } from "@saleor/misc";
-import { drawerWidthExpanded } from "./consts";
+import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts";
 import { IActiveSubMenu } from "./MenuList";
 import { IMenuItem } from "./menuStructure";
 
@@ -20,15 +20,15 @@ const useStyles = makeStyles(theme => ({
     right: 0,
     top: 0,
     transition: `right  ${theme.transitions.duration.shorter}ms ease`,
-    width: 300,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   menuListNestedClose: {
     "& svg": {
       fill: theme.palette.primary.main,
-      left: 7,
+      left: 11,
       position: "relative",
-      top: -2
+      top: 1
     },
     border: `solid 1px #EAEAEA`,
     borderRadius: "100%",
@@ -71,10 +71,11 @@ const useStyles = makeStyles(theme => ({
   menuListNestedOpen: {
     [theme.breakpoints.down("sm")]: {
       right: 0,
-      width: drawerWidthExpanded,
+      width: drawerWidthExpandedMobile,
       zIndex: 2
     },
-    right: -300,
+    right: -drawerNestedMenuWidth,
+    width: drawerNestedMenuWidth,
     zIndex: -1
   },
   subHeader: {

diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx
@@ -2,7 +2,11 @@ import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
 import { makeStyles } from "@material-ui/core/styles";
 import React from "react";
-import { drawerWidth, drawerWidthExpanded } from "./consts";
+import {
+  drawerWidth,
+  drawerWidthExpanded,
+  drawerWidthExpandedMobile
+} from "./consts";
 
 const useStyles = makeStyles(
   theme => ({
@@ -22,7 +26,7 @@ const useStyles = makeStyles(
       width: drawerWidth
     },
     drawerMobile: {
-      width: drawerWidthExpanded
+      width: drawerWidthExpandedMobile
     }
   }),
   { name: "ResponsiveDrawer" }

diff --git a/src/components/AppLayout/consts.ts b/src/components/AppLayout/consts.ts
@@ -1,4 +1,6 @@
 export const drawerWidthExpanded = 210;
+export const drawerWidthExpandedMobile = 250;
 export const drawerWidth = 80;
+export const drawerNestedMenuWidth = 300;
 export const navigationBarHeight = 64;
 export const appLoaderHeight = 4;