Fix sidebar navigation and Products Page overlapping problem (#1382) (#1472)

* fix content overlapping issue

* replace margin value

Co-authored-by: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com>
This commit is contained in:
Jakub Majorek 2021-10-06 13:11:00 +02:00 committed by GitHub
parent 81c29e2458
commit 6d9d353799
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 8 deletions

View file

@ -1,5 +1,6 @@
import { Card } from "@material-ui/core"; import { Card } from "@material-ui/core";
import { mapToMenuItems, useExtensions } from "@saleor/apps/useExtensions"; import { mapToMenuItems, useExtensions } from "@saleor/apps/useExtensions";
import { drawerWidthExpanded } from "@saleor/components/AppLayout/consts";
import { ButtonWithSelect } from "@saleor/components/ButtonWithSelect"; import { ButtonWithSelect } from "@saleor/components/ButtonWithSelect";
import CardMenu from "@saleor/components/CardMenu"; import CardMenu from "@saleor/components/CardMenu";
import ColumnPicker, { import ColumnPicker, {
@ -70,6 +71,11 @@ const useStyles = makeStyles(
}, },
settings: { settings: {
marginRight: theme.spacing(2) marginRight: theme.spacing(2)
},
container: {
[theme.breakpoints.up("md")]: {
marginLeft: drawerWidthExpanded
}
} }
}), }),
{ name: "ProductListPage" } { name: "ProductListPage" }
@ -144,7 +150,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
const extensionCreateButtonItems = mapToMenuItems(create); const extensionCreateButtonItems = mapToMenuItems(create);
return ( return (
<Container> <Container className={classes.container}>
<PageHeader <PageHeader
title={intl.formatMessage(sectionNames.products)} title={intl.formatMessage(sectionNames.products)}
limitText={ limitText={

View file

@ -217664,7 +217664,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@ -220173,7 +220173,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@ -222732,7 +222732,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@ -223297,7 +223297,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@ -225506,7 +225506,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@ -225936,7 +225936,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
@ -228440,7 +228440,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
style="padding:24px" style="padding:24px"
> >
<div <div
class="Container-root-id" class="Container-root-id ProductListPage-container-id"
> >
<div <div
class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id" class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"