Skip to content

Instantly share code, notes, and snippets.

@dominikjasek

dominikjasek/@strapi+admin+4.4.6.patch

Last active December 31, 2023 15:11
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dominikjasek/87b22fa9cd452ffcca14ff66d5358bed to your computer and use it in GitHub Desktop.
Save dominikjasek/87b22fa9cd452ffcca14ff66d5358bed to your computer and use it in GitHub Desktop.
Download ZIP
Responsive @strapi/admin patch
Raw
@strapi+admin+4.4.6.patch
diff --git a/node_modules/@strapi/admin/admin/src/components/LeftMenu/index.js b/node_modules/@strapi/admin/admin/src/components/LeftMenu/index.js
index 23b936b..8042d01 100644
--- a/node_modules/@strapi/admin/admin/src/components/LeftMenu/index.js
+++ b/node_modules/@strapi/admin/admin/src/components/LeftMenu/index.js
@@ -39,7 +39,7 @@ const LinkUser = styled(RouterNavLink)`
&:hover {
background: ${({ theme, logout }) =>
- logout ? theme.colors.danger100 : theme.colors.primary100};
+ logout ? theme.colors.danger100 : theme.colors.primary100};
text-decoration: none;
}
@@ -50,13 +50,13 @@ const LinkUser = styled(RouterNavLink)`
}
`;
-const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
+const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks, initCondensedState, onToggle }) => {
const buttonRef = useRef();
const [userLinksVisible, setUserLinksVisible] = useState(false);
const {
logos: { menu },
} = useConfigurations();
- const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
+ const [condensed, setCondensed] = usePersistentState('navbar-condensed', initCondensedState);
const { userDisplayName } = useAppInfos();
const { formatMessage } = useIntl();
@@ -87,6 +87,13 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
defaultMessage: 'Strapi Dashboard',
});
+ const toggleSideBar = () => {
+ setCondensed((s) => {
+ onToggle(s)
+ return !s
+ })
+ }
+
return (
<MainNav condensed={condensed}>
<NavBrand
@@ -201,16 +208,17 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
</LinkUserWrapper>
)}
- <NavCondense onClick={() => setCondensed((s) => !s)}>
+ <NavCondense onClick={() => toggleSideBar()}>
+ <span>Zavřít</span>
{condensed
? formatMessage({
- id: 'app.components.LeftMenu.expand',
- defaultMessage: 'Expand the navbar',
- })
+ id: 'app.components.LeftMenu.expand',
+ defaultMessage: 'Expand the navbar',
+ })
: formatMessage({
- id: 'app.components.LeftMenu.collapse',
- defaultMessage: 'Collapse the navbar',
- })}
+ id: 'app.components.LeftMenu.collapse',
+ defaultMessage: 'Collapse the navbar',
+ })}
</NavCondense>
</MainNav>
);
diff --git a/node_modules/@strapi/admin/admin/src/content-manager/pages/App/index.js b/node_modules/@strapi/admin/admin/src/content-manager/pages/App/index.js
index 9621b9d..3a6d68c 100644
--- a/node_modules/@strapi/admin/admin/src/content-manager/pages/App/index.js
+++ b/node_modules/@strapi/admin/admin/src/content-manager/pages/App/index.js
@@ -22,10 +22,11 @@ import NoPermissions from '../NoPermissions';
import SingleTypeRecursivePath from '../SingleTypeRecursivePath';
import LeftMenu from './LeftMenu';
import useModels from './useModels';
+import {isMobile} from "./../../../pages/Admin";
const cmPermissions = permissions.contentManager;
-const App = () => {
+const App = ({isLeftMenuOpen}) => {
const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } = useModels();
const authorisedModels = sortBy([...collectionTypeLinks, ...singleTypeLinks], (model) =>
@@ -84,7 +85,7 @@ const App = () => {
}
return (
- <Layout sideNav={<LeftMenu />}>
+ <Layout sideNav={isMobile() ? isLeftMenuOpen ? <LeftMenu /> : <></> : <LeftMenu />}>
<DragLayer />
<ModelsContext.Provider value={{ refetchData }}>
<Switch>
@@ -114,7 +115,7 @@ const App = () => {
export { App };
-export default function () {
+export default function (props) {
const { formatMessage } = useIntl();
return (
@@ -122,7 +123,7 @@ export default function () {
<Helmet
title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
/>
- <App />
+ <App {...props} />
</>
);
}
diff --git a/node_modules/@strapi/admin/admin/src/content-manager/pages/EditView/index.js b/node_modules/@strapi/admin/admin/src/content-manager/pages/EditView/index.js
index 9d8c0c9..021b0b7 100644
--- a/node_modules/@strapi/admin/admin/src/content-manager/pages/EditView/index.js
+++ b/node_modules/@strapi/admin/admin/src/content-manager/pages/EditView/index.js
@@ -32,21 +32,22 @@ import Informations from './Informations';
import Header from './Header';
import { createAttributesLayout, getFieldsActionMatchingPermissions } from './utils';
import DeleteLink from './DeleteLink';
+import { isMobile } from './../../../pages/Admin'
const cmPermissions = permissions.contentManager;
const ctbPermissions = [{ action: 'plugin::content-type-builder.read', subject: null }];
/* eslint-disable react/no-array-index-key */
const EditView = ({
- allowedActions,
- isSingleType,
- goBack,
- layout,
- slug,
- id,
- origin,
- userPermissions,
-}) => {
+ allowedActions,
+ isSingleType,
+ goBack,
+ layout,
+ slug,
+ id,
+ origin,
+ userPermissions,
+ }) => {
const { trackUsage } = useTracking();
const { formatMessage } = useIntl();
const { createActionAllowedFields, readActionAllowedFields, updateActionAllowedFields } =
@@ -95,20 +96,20 @@ const EditView = ({
return (
<DataManagementWrapper allLayoutData={layout} slug={slug} id={id} origin={origin}>
{({
- componentsDataStructure,
- contentTypeDataStructure,
- data,
- isCreatingEntry,
- isLoadingForData,
- onDelete,
- onDeleteSucceeded,
- onPost,
- onPublish,
- onPut,
- onUnpublish,
- redirectionLink,
- status,
- }) => {
+ componentsDataStructure,
+ contentTypeDataStructure,
+ data,
+ isCreatingEntry,
+ isLoadingForData,
+ onDelete,
+ onDeleteSucceeded,
+ onPost,
+ onPublish,
+ onPut,
+ onUnpublish,
+ redirectionLink,
+ status,
+ }) => {
return (
<EditViewDataManagerProvider
allowedActions={allowedActions}
@@ -131,129 +132,114 @@ const EditView = ({
status={status}
updateActionAllowedFields={updateActionAllowedFields}
>
- <Main aria-busy={status !== 'resolved'}>
- <Header allowedActions={allowedActions} />
- <ContentLayout>
- <Grid gap={4}>
- <GridItem col={9} s={12}>
- <Suspense fallback={<LoadingIndicatorPage />}>
- <Stack spacing={6}>
- {formattedContentTypeLayout.map((row, index) => {
- if (isDynamicZone(row)) {
- const {
- 0: {
- 0: { name, fieldSchema, metadatas, labelAction },
- },
- } = row;
+ <div style={ isMobile() ? {marginLeft: '-50px', marginRight: '-50px'} : {}}>
+ <Main aria-busy={status !== 'resolved'}>
+ <Header allowedActions={allowedActions} />
+ <ContentLayout>
+ <Grid gap={4}>
+ <GridItem col={9} s={12}>
+ <Suspense fallback={<LoadingIndicatorPage />}>
+ <Stack spacing={6}>
+ {formattedContentTypeLayout.map((row, index) => {
+ if (isDynamicZone(row)) {
+ const {
+ 0: {
+ 0: { name, fieldSchema, metadatas, labelAction },
+ },
+ } = row;
+
+ return (
+ <Box key={index}>
+ <Grid gap={4}>
+ <GridItem col={12} s={12} xs={12}>
+ <DynamicZone
+ name={name}
+ fieldSchema={fieldSchema}
+ labelAction={labelAction}
+ metadatas={metadatas}
+ />
+ </GridItem>
+ </Grid>
+ </Box>
+ );
+ }
return (
- <Box key={index}>
- <Grid gap={4}>
- <GridItem col={12} s={12} xs={12}>
- <DynamicZone
- name={name}
- fieldSchema={fieldSchema}
- labelAction={labelAction}
- metadatas={metadatas}
- />
- </GridItem>
- </Grid>
- </Box>
- );
- }
+ <Box
+ key={index}
+ hasRadius
+ background="neutral0"
+ shadow="tableShadow"
+ paddingLeft={6}
+ paddingRight={6}
+ paddingTop={6}
+ paddingBottom={6}
+ borderColor="neutral150"
+ >
+ <Stack spacing={6}>
+ {row.map((grid, gridIndex) => {
+ return (
+ <Grid gap={4} key={gridIndex}>
+ {grid.map(
+ ({ fieldSchema, labelAction, metadatas, name, size }) => {
+ const isComponent = fieldSchema.type === 'component';
- return (
- <Box
- key={index}
- hasRadius
- background="neutral0"
- shadow="tableShadow"
- paddingLeft={6}
- paddingRight={6}
- paddingTop={6}
- paddingBottom={6}
- borderColor="neutral150"
- >
- <Stack spacing={6}>
- {row.map((grid, gridIndex) => {
- return (
- <Grid gap={4} key={gridIndex}>
- {grid.map(
- ({ fieldSchema, labelAction, metadatas, name, size }) => {
- const isComponent = fieldSchema.type === 'component';
+ if (isComponent) {
+ const {
+ component,
+ max,
+ min,
+ repeatable = false,
+ required = false,
+ } = fieldSchema;
- if (isComponent) {
- const {
- component,
- max,
- min,
- repeatable = false,
- required = false,
- } = fieldSchema;
+ return (
+ <GridItem col={size} s={12} xs={12} key={component}>
+ <FieldComponent
+ componentUid={component}
+ labelAction={labelAction}
+ isRepeatable={repeatable}
+ intlLabel={{
+ id: metadatas.label,
+ defaultMessage: metadatas.label,
+ }}
+ max={max}
+ min={min}
+ name={name}
+ required={required}
+ />
+ </GridItem>
+ );
+ }
return (
- <GridItem col={size} s={12} xs={12} key={component}>
- <FieldComponent
- componentUid={component}
+ <GridItem col={size} key={name} s={12} xs={12}>
+ <Inputs
+ fieldSchema={fieldSchema}
+ keys={name}
labelAction={labelAction}
- isRepeatable={repeatable}
- intlLabel={{
- id: metadatas.label,
- defaultMessage: metadatas.label,
- }}
- max={max}
- min={min}
- name={name}
- required={required}
+ metadatas={metadatas}
/>
</GridItem>
);
}
-
- return (
- <GridItem col={size} key={name} s={12} xs={12}>
- <Inputs
- fieldSchema={fieldSchema}
- keys={name}
- labelAction={labelAction}
- metadatas={metadatas}
- />
- </GridItem>
- );
- }
- )}
- </Grid>
- );
- })}
- </Stack>
- </Box>
- );
- })}
- </Stack>
- </Suspense>
- </GridItem>
- <GridItem col={3} s={12}>
- <Stack spacing={2}>
- <DraftAndPublishBadge />
- <Box
- as="aside"
- aria-labelledby="additional-informations"
- background="neutral0"
- borderColor="neutral150"
- hasRadius
- paddingBottom={4}
- paddingLeft={4}
- paddingRight={4}
- paddingTop={6}
- shadow="tableShadow"
- >
- <Informations />
- <InjectionZone area="contentManager.editView.informations" />
- </Box>
- {displayedRelationsLength > 0 && (
+ )}
+ </Grid>
+ );
+ })}
+ </Stack>
+ </Box>
+ );
+ })}
+ </Stack>
+ </Suspense>
+ </GridItem>
+ <GridItem col={3} s={12}>
+ <Stack spacing={2}>
+ <DraftAndPublishBadge />
<Box
as="aside"
- aria-labelledby="relations-title"
+ aria-labelledby="additional-informations"
background="neutral0"
borderColor="neutral150"
hasRadius
@@ -263,103 +249,121 @@ const EditView = ({
paddingTop={6}
shadow="tableShadow"
>
- <Typography variant="sigma" textColor="neutral600" id="relations-title">
- {formatMessage(
- {
- id: getTrad('containers.Edit.relations'),
- defaultMessage:
- '{number, plural, =0 {relations} one {relation} other {relations}}',
- },
- { number: displayedRelationsLength }
- )}
- </Typography>
- <Box paddingTop={2} paddingBottom={6}>
- <Divider />
- </Box>
- <Stack spacing={4}>
- {relationsLayout.map(
- ({ name, fieldSchema, labelAction, metadatas, queryInfos }) => {
- return (
- <SelectWrapper
- {...fieldSchema}
- {...metadatas}
- key={name}
- description={metadatas.description}
- intlLabel={{
- id: metadatas.label,
- defaultMessage: metadatas.label,
- }}
- labelAction={labelAction}
- name={name}
- relationsType={fieldSchema.relationType}
- queryInfos={queryInfos}
- placeholder={
- metadatas.placeholder
- ? {
+ <Informations />
+ <InjectionZone area="contentManager.editView.informations" />
+ </Box>
+ {displayedRelationsLength > 0 && (
+ <Box
+ as="aside"
+ aria-labelledby="relations-title"
+ background="neutral0"
+ borderColor="neutral150"
+ hasRadius
+ paddingBottom={4}
+ paddingLeft={4}
+ paddingRight={4}
+ paddingTop={6}
+ shadow="tableShadow"
+ >
+ <Typography variant="sigma" textColor="neutral600" id="relations-title">
+ {formatMessage(
+ {
+ id: getTrad('containers.Edit.relations'),
+ defaultMessage:
+ '{number, plural, =0 {relations} one {relation} other {relations}}',
+ },
+ { number: displayedRelationsLength }
+ )}
+ </Typography>
+ <Box paddingTop={2} paddingBottom={6}>
+ <Divider />
+ </Box>
+ <Stack spacing={4}>
+ {relationsLayout.map(
+ ({ name, fieldSchema, labelAction, metadatas, queryInfos }) => {
+ return (
+ <SelectWrapper
+ {...fieldSchema}
+ {...metadatas}
+ key={name}
+ description={metadatas.description}
+ intlLabel={{
+ id: metadatas.label,
+ defaultMessage: metadatas.label,
+ }}
+ labelAction={labelAction}
+ name={name}
+ relationsType={fieldSchema.relationType}
+ queryInfos={queryInfos}
+ placeholder={
+ metadatas.placeholder
+ ? {
id: metadatas.placeholder,
defaultMessage: metadatas.placeholder,
}
- : null
- }
- />
- );
- }
+ : null
+ }
+ />
+ );
+ }
+ )}
+ </Stack>
+ </Box>
+ )}
+ <Box as="aside" aria-labelledby="links">
+ <Stack spacing={2}>
+ <InjectionZone area="contentManager.editView.right-links" slug={slug} />
+ {slug !== 'strapi::administrator' && (
+ <CheckPermissions permissions={ctbPermissions}>
+ <LinkButton
+ onClick={() => {
+ trackUsage('willEditEditLayout');
+ }}
+ size="S"
+ startIcon={<Pencil />}
+ style={{ width: '100%' }}
+ to={`/plugins/content-type-builder/content-types/${slug}`}
+ variant="secondary"
+ >
+ {formatMessage({
+ id: getTrad('link-to-ctb'),
+ defaultMessage: 'Edit the model',
+ })}
+ </LinkButton>
+ </CheckPermissions>
)}
- </Stack>
- </Box>
- )}
- <Box as="aside" aria-labelledby="links">
- <Stack spacing={2}>
- <InjectionZone area="contentManager.editView.right-links" slug={slug} />
- {slug !== 'strapi::administrator' && (
- <CheckPermissions permissions={ctbPermissions}>
+
+ <CheckPermissions permissions={configurationPermissions}>
<LinkButton
- onClick={() => {
- trackUsage('willEditEditLayout');
- }}
size="S"
- startIcon={<Pencil />}
+ startIcon={<Layer />}
style={{ width: '100%' }}
- to={`/plugins/content-type-builder/content-types/${slug}`}
+ to={configurationsURL}
variant="secondary"
>
{formatMessage({
- id: getTrad('link-to-ctb'),
- defaultMessage: 'Edit the model',
+ id: 'app.links.configure-view',
+ defaultMessage: 'Configure the view',
})}
</LinkButton>
</CheckPermissions>
- )}
- <CheckPermissions permissions={configurationPermissions}>
- <LinkButton
- size="S"
- startIcon={<Layer />}
- style={{ width: '100%' }}
- to={configurationsURL}
- variant="secondary"
- >
- {formatMessage({
- id: 'app.links.configure-view',
- defaultMessage: 'Configure the view',
- })}
- </LinkButton>
- </CheckPermissions>
+ {allowedActions.canDelete && (
+ <DeleteLink
+ isCreatingEntry={isCreatingEntry}
+ onDelete={onDelete}
+ onDeleteSucceeded={onDeleteSucceeded}
+ />
+ )}
+ </Stack>
+ </Box>
+ </Stack>
+ </GridItem>
+ </Grid>
+ </ContentLayout>
+ </Main>
+ </div>
- {allowedActions.canDelete && (
- <DeleteLink
- isCreatingEntry={isCreatingEntry}
- onDelete={onDelete}
- onDeleteSucceeded={onDeleteSucceeded}
- />
- )}
- </Stack>
- </Box>
- </Stack>
- </GridItem>
- </Grid>
- </ContentLayout>
- </Main>
</EditViewDataManagerProvider>
);
}}
diff --git a/node_modules/@strapi/admin/admin/src/content-manager/pages/ListView/index.js b/node_modules/@strapi/admin/admin/src/content-manager/pages/ListView/index.js
index bb65f3c..1bdcc61 100644
--- a/node_modules/@strapi/admin/admin/src/content-manager/pages/ListView/index.js
+++ b/node_modules/@strapi/admin/admin/src/content-manager/pages/ListView/index.js
@@ -9,6 +9,7 @@ import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-d
import get from 'lodash/get';
import { stringify } from 'qs';
import axios from 'axios';
+import { isMobile } from './../../../pages/Admin'
import {
NoPermissions,
@@ -60,17 +61,17 @@ const ConfigureLayoutBox = styled(Box)`
`;
function ListView({
- canCreate,
- canDelete,
- canRead,
- data,
- getData,
- getDataSucceeded,
- isLoading,
- layout,
- pagination,
- slug,
-}) {
+ canCreate,
+ canDelete,
+ canRead,
+ data,
+ getData,
+ getDataSucceeded,
+ isLoading,
+ layout,
+ pagination,
+ slug,
+ }) {
const { total } = pagination;
const {
contentType: {
@@ -235,12 +236,12 @@ function ListView({
const subtitle = canRead
? formatMessage(
- {
- id: getTrad('pages.ListView.header-subtitle'),
- defaultMessage: '{number, plural, =0 {# entries} one {# entry} other {# entries}} found',
- },
- { number: total }
- )
+ {
+ id: getTrad('pages.ListView.header-subtitle'),
+ defaultMessage: '{number, plural, =0 {# entries} one {# entry} other {# entries}} found',
+ },
+ { number: total }
+ )
: null;
const getCreateAction = (props) =>
@@ -268,92 +269,94 @@ function ListView({
) : null;
return (
- <Main aria-busy={isLoading}>
- <HeaderLayout
- primaryAction={getCreateAction()}
- subtitle={subtitle}
- title={headerLayoutTitle}
- navigationAction={
- <Link startIcon={<ArrowLeft />} to="/content-manager/">
- {formatMessage({
- id: 'global.back',
- defaultMessage: 'Back',
- })}
- </Link>
- }
- />
- {!canRead && (
- <ActionLayout endActions={<InjectionZone area="contentManager.listView.actions" />} />
- )}
- {canRead && (
- <ActionLayout
- endActions={
- <>
- <InjectionZone area="contentManager.listView.actions" />
- <FieldPicker layout={layout} />
- <CheckPermissions permissions={cmPermissions.collectionTypesConfigurations}>
- <ConfigureLayoutBox paddingTop={1} paddingBottom={1}>
- <IconButton
- onClick={() => {
- trackUsage('willEditListLayout');
- }}
- forwardedAs={ReactRouterLink}
- to={{ pathname: `${slug}/configurations/list`, search: pluginsQueryParams }}
- icon={<Cog />}
- label={formatMessage({
- id: 'app.links.configure-view',
- defaultMessage: 'Configure the view',
+ <div style={ isMobile() ? {marginLeft: '-50px', marginRight: '-50px'} : {}}>
+ <Main aria-busy={isLoading}>
+ <HeaderLayout
+ primaryAction={getCreateAction()}
+ subtitle={subtitle}
+ title={headerLayoutTitle}
+ navigationAction={
+ <Link startIcon={<ArrowLeft />} to="/content-manager/">
+ {formatMessage({
+ id: 'global.back',
+ defaultMessage: 'Back',
+ })}
+ </Link>
+ }
+ />
+ {!canRead && (
+ <ActionLayout endActions={<InjectionZone area="contentManager.listView.actions" />} />
+ )}
+ {canRead && (
+ <ActionLayout
+ endActions={
+ <>
+ <InjectionZone area="contentManager.listView.actions" />
+ <FieldPicker layout={layout} />
+ <CheckPermissions permissions={cmPermissions.collectionTypesConfigurations}>
+ <ConfigureLayoutBox paddingTop={1} paddingBottom={1}>
+ <IconButton
+ onClick={() => {
+ trackUsage('willEditListLayout');
+ }}
+ forwardedAs={ReactRouterLink}
+ to={{ pathname: `${slug}/configurations/list`, search: pluginsQueryParams }}
+ icon={<Cog />}
+ label={formatMessage({
+ id: 'app.links.configure-view',
+ defaultMessage: 'Configure the view',
+ })}
+ />
+ </ConfigureLayoutBox>
+ </CheckPermissions>
+ </>
+ }
+ startActions={
+ <>
+ {isSearchable && (
+ <SearchURLQuery
+ label={formatMessage(
+ { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
+ { target: headerLayoutTitle }
+ )}
+ placeholder={formatMessage({
+ id: 'global.search',
+ defaultMessage: 'Search',
})}
+ trackedEvent="didSearch"
/>
- </ConfigureLayoutBox>
- </CheckPermissions>
- </>
- }
- startActions={
+ )}
+ {isFilterable && (
+ <AttributeFilter contentType={contentType} slug={slug} metadatas={metadatas} />
+ )}
+ </>
+ }
+ />
+ )}
+ <ContentLayout>
+ {canRead ? (
<>
- {isSearchable && (
- <SearchURLQuery
- label={formatMessage(
- { id: 'app.component.search.label', defaultMessage: 'Search for {target}' },
- { target: headerLayoutTitle }
- )}
- placeholder={formatMessage({
- id: 'global.search',
- defaultMessage: 'Search',
- })}
- trackedEvent="didSearch"
- />
- )}
- {isFilterable && (
- <AttributeFilter contentType={contentType} slug={slug} metadatas={metadatas} />
- )}
+ <DynamicTable
+ canCreate={canCreate}
+ canDelete={canDelete}
+ contentTypeName={headerLayoutTitle}
+ onConfirmDeleteAll={handleConfirmDeleteAllData}
+ onConfirmDelete={handleConfirmDeleteData}
+ isBulkable={isBulkable}
+ isLoading={isLoading}
+ // FIXME: remove the layout props drilling
+ layout={layout}
+ rows={data}
+ action={getCreateAction({ variant: 'secondary' })}
+ />
+ <PaginationFooter pagination={{ pageCount: pagination?.pageCount || 1 }} />
</>
- }
- />
- )}
- <ContentLayout>
- {canRead ? (
- <>
- <DynamicTable
- canCreate={canCreate}
- canDelete={canDelete}
- contentTypeName={headerLayoutTitle}
- onConfirmDeleteAll={handleConfirmDeleteAllData}
- onConfirmDelete={handleConfirmDeleteData}
- isBulkable={isBulkable}
- isLoading={isLoading}
- // FIXME: remove the layout props drilling
- layout={layout}
- rows={data}
- action={getCreateAction({ variant: 'secondary' })}
- />
- <PaginationFooter pagination={{ pageCount: pagination?.pageCount || 1 }} />
- </>
- ) : (
- <NoPermissions />
- )}
- </ContentLayout>
- </Main>
+ ) : (
+ <NoPermissions />
+ )}
+ </ContentLayout>
+ </Main>
+ </div>
);
}
diff --git a/node_modules/@strapi/admin/admin/src/pages/Admin/index.js b/node_modules/@strapi/admin/admin/src/pages/Admin/index.js
index 13676c4..4089cd8 100644
--- a/node_modules/@strapi/admin/admin/src/pages/Admin/index.js
+++ b/node_modules/@strapi/admin/admin/src/pages/Admin/index.js
@@ -4,7 +4,7 @@
*
*/
-import React, { Suspense, useEffect, useMemo, lazy } from 'react';
+import React, { Suspense, useEffect, useMemo, useState, lazy } from 'react';
import { Switch, Route } from 'react-router-dom';
import { useTracking, LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
import { useDispatch, useSelector } from 'react-redux';
@@ -61,10 +61,13 @@ const useTrackUsage = () => {
}, [appStatus]);
};
+export const isMobile = () => window.innerWidth < 700
+
const Admin = () => {
useTrackUsage();
const { isLoading, generalSectionLinks, pluginsSectionLinks } = useMenu();
const { menu } = useStrapiApp();
+ const [isLeftMenuOpen, setIsLeftMenuOpen] = useState(!isMobile())
const routes = useMemo(() => {
return menu
@@ -83,6 +86,8 @@ const Admin = () => {
<LeftMenu
generalSectionLinks={generalSectionLinks}
pluginsSectionLinks={pluginsSectionLinks}
+ initCondensedState={!isLeftMenuOpen}
+ onToggle={setIsLeftMenuOpen}
/>
}
>
@@ -90,7 +95,7 @@ const Admin = () => {
<Switch>
<Route path="/" component={HomePage} exact />
<Route path="/me" component={ProfilePage} exact />
- <Route path="/content-manager" component={CM} />
+ <Route path="/content-manager" ><CM isLeftMenuOpen={isLeftMenuOpen} /></Route>
{routes}
<Route path="/settings/:settingId" component={SettingsPage} />
<Route path="/settings" component={SettingsPage} exact />
@hamzauly
Copy link

Hello Dominik, can I use this patch with 11x versions of the Strapi?

@tom-leamon
Copy link

How do you apply this patch? Thanks

@dominikjasek
Copy link
Author

Hi, use this package https://www.npmjs.com/package/patch-package

@SureshKumar311
Copy link

Hi @dominikjasek thanks for this patch and is there is any update for new versions like 4.12.X

@abanobmikaeel
Copy link

Hey @dominikjasek any interest in making a newer patch? tried doing it myself but struggling a lottt

@dominikjasek
Copy link
Author

hey, I don't plan to do so for now

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment