feat: responsive layout (#631)

* feat: wip of responsiveness

* feat: stash

* feat: responsive layout

* fix: run prettier

Author: mateusz-kleszcz

admin/src/pages/HomePage/components/CollapseButton/index.tsx

@@ -3,6 +3,7 @@ import { CaretDown, CaretUp } from '@strapi/icons';
 import styled from 'styled-components';
 
 import { Effect } from '../../../../types';
+import { usePluginMediaQuery } from '../../hooks/usePluginMediaQuery';
 
 const Wrapper = styled.div`
   border-radius: 50%;
@@ -21,17 +22,28 @@ interface Props {
   itemsCount?: number;
 }
 
-export const CollapseButton = ({ toggle, collapsed, itemsCount }: Props) => (
-  <Flex
-    justifyContent="space-between"
-    alignItems="center"
-    onClick={toggle}
-    cursor="pointer"
-    style={{ marginRight: '16px' }}
-  >
-    <Wrapper>
-      {collapsed ? <CaretDown width="16px" height="9px" /> : <CaretUp width="16px" height="9px" />}
-    </Wrapper>
-    <Typography variant="pi">{itemsCount} nested items</Typography>
-  </Flex>
-);
+export const CollapseButton = ({ toggle, collapsed, itemsCount }: Props) => {
+  const { isSmallMobile } = usePluginMediaQuery();
+  return (
+    <Flex
+      justifyContent="space-between"
+      alignItems="center"
+      onClick={toggle}
+      cursor="pointer"
+      style={{ marginRight: '16px' }}
+    >
+      <Wrapper>
+        {collapsed ? (
+          <CaretDown width="16px" height="9px" />
+        ) : (
+          <CaretUp width="16px" height="9px" />
+        )}
+      </Wrapper>
+      {!isSmallMobile && (
+        <Typography variant="pi">
+          {itemsCount} nested {itemsCount === 1 ? 'item' : 'items'}
+        </Typography>
+      )}
+    </Flex>
+  );
+};

admin/src/pages/HomePage/components/DragButton/index.tsx

@@ -1,15 +1,16 @@
 import { Drag } from '@strapi/icons';
 import React from 'react';
 import styled, { DefaultTheme } from 'styled-components';
+import { usePluginMediaQuery } from '../../hooks';
 
-const DragButtonWrapper = styled.span<{ ref: unknown; isActive?: boolean }>`
+const DragButtonWrapper = styled.span<{ ref: unknown; isActive?: boolean; isMobile?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  height: 32px;
-  width: 32px;
-  padding: ${({ theme }) => theme.spaces[2]};
+  height: ${({ isMobile }) => (isMobile ? '24px' : '32px')};
+  width: ${({ isMobile }) => (isMobile ? '24px' : '32px')};
+  padding: ${({ theme, isMobile }) => (isMobile ? theme.spaces[1] : theme.spaces[2])};
 
   background: ${({ theme, isActive }) =>
     isActive ? theme.colors.neutral150 : theme.colors.neutral0};
@@ -53,10 +54,13 @@ const DragButtonWrapper = styled.span<{ ref: unknown; isActive?: boolean }>`
   }
 `;
 
-const DragButton = React.forwardRef<unknown, { isActive?: boolean }>((props, ref) => (
-  <DragButtonWrapper {...props} ref={ref}>
-    <Drag />
-  </DragButtonWrapper>
-));
+const DragButton = React.forwardRef<unknown, { isActive?: boolean }>((props, ref) => {
+  const { isSmallMobile } = usePluginMediaQuery();
+  return (
+    <DragButtonWrapper {...props} ref={ref} isMobile={isSmallMobile}>
+      <Drag />
+    </DragButtonWrapper>
+  );
+});
 
 export default DragButton;

admin/src/pages/HomePage/components/NavigationContentHeader/ManageNavigationItems/index.tsx

@@ -98,7 +98,7 @@ export const ManageNavigationItems: React.FC<ManageNavigationItemsProps> = ({
   }
 
   return actions.map(({ tradId, margin, ...item }, i) => (
-    <Box marginLeft={margin} key={i}>
+    <Box marginLeft={{ initial: 0, small: margin }} key={i}>
       <Button {...item}> {formatMessage(getTrad(tradId))} </Button>
     </Box>
   ));

admin/src/pages/HomePage/components/NavigationContentHeader/Search/index.tsx

@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../../../../translations';
 import { Effect } from '../../../../../types';
+import { usePluginMediaQuery } from '../../../hooks';
 
 interface Props {
   value: string;
@@ -18,7 +19,9 @@ export const Search = ({ value, setValue, initialIndex = DEFAULT_INDEX }: Props)
   const [currentValue, setCurrentValue] = useState(value);
   const [previousValue, setPreviousValue] = useState(value);
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [isOpen, setIsOpen] = useState(!!value);
+  const { isSmallMobile, isMobile } = usePluginMediaQuery();
+
+  const [isOpen, setIsOpen] = useState(!!value || isSmallMobile);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const { formatMessage } = useIntl();
 
@@ -68,7 +71,7 @@ export const Search = ({ value, setValue, initialIndex = DEFAULT_INDEX }: Props)
 
   if (isOpen) {
     return (
-      <div ref={wrapperRef}>
+      <div ref={wrapperRef} style={{ width: '100%' }}>
         <Searchbar
           name="searchbar"
           onClear={onClear}
@@ -86,7 +89,8 @@ export const Search = ({ value, setValue, initialIndex = DEFAULT_INDEX }: Props)
         <Typography
           variant="pi"
           fontColor="neutral150"
-          style={{ margin: '3px 0 0', display: 'inline-block' }}
+          style={{ margin: '3px 0 0' }}
+          display={{ initial: 'none', medium: 'inline-block' }}
         >
           {formatMessage(
             getTrad('pages.main.search.subLabel', 'press ENTER to highlight next item')

admin/src/pages/HomePage/components/NavigationContentHeader/index.tsx

@@ -8,9 +8,23 @@ interface Props {
 
 export const NavigationContentHeader = ({ startActions, endActions }: Props) => {
   return (
-    <Flex justifyContent="space-between" width="100%">
-      <Flex alignItems="space-between">{startActions}</Flex>
-      <Flex alignItems="space-between">{endActions}</Flex>
+    <Flex
+      direction={{ initial: 'column-reverse', small: 'row' }}
+      justifyContent={{ initial: 'flex-start', small: 'space-between' }}
+      width="100%"
+      gap={{ initial: 2, small: 0 }}
+    >
+      <Flex alignItems="space-between" width="100%">
+        {startActions}
+      </Flex>
+      <Flex
+        gap={{ initial: 2, small: 0 }}
+        alignItems="space-between"
+        width="100%"
+        justifyContent={{ initial: 'flex-start', small: 'flex-end' }}
+      >
+        {endActions}
+      </Flex>
     </Flex>
   );
 };

admin/src/pages/HomePage/components/NavigationHeader/index.tsx

@@ -12,12 +12,29 @@ import { Check, Information } from '@strapi/icons';
 import { Layouts } from '@strapi/strapi/admin';
 import React from 'react';
 import { useIntl } from 'react-intl';
+import styled from 'styled-components';
 import { NavigationSchema } from '../../../../api/validators';
 import { getTrad } from '../../../../translations';
 import { Effect } from '../../../../types';
-import { useConfig } from '../../hooks';
+import { useConfig, usePluginMediaQuery } from '../../hooks';
 import { useNavigationManager } from './hooks';
 
+const StyledGridItem = styled(Grid.Item)<{
+  orderInitial?: number;
+  orderSmall?: number;
+  orderMedium?: number;
+}>`
+  order: ${({ orderInitial }) => orderInitial ?? 'unset'};
+
+  @media (min-width: 520px) {
+    order: ${({ orderSmall }) => orderSmall ?? 'unset'};
+  }
+
+  @media (min-width: 768px) {
+    order: ${({ orderMedium }) => orderMedium ?? 'unset'};
+  }
+`;
+
 const submitIcon = <Check />;
 
 interface Props {
@@ -55,27 +72,41 @@ export const NavigationHeader: React.FC<Props> = ({
   const { formatMessage } = useIntl();
   const { openNavigationManagerModal, navigationManagerModal } = useNavigationManager();
 
-  const hasLocalizations = !!locale.restLocale;
+  const configQuery = useConfig();
+
+  const hasLocalizations = !!locale.restLocale?.length;
+  const hasCache = configQuery.data?.isCacheEnabled;
 
   const { canUpdate } = permissions;
 
-  const configQuery = useConfig();
+  const { isDesktop, isMobile, isLargeDesktop } = usePluginMediaQuery();
 
   return (
     <>
       <Layouts.Header
         title={formatMessage(getTrad('header.title', 'UI Navigation'))}
-        subtitle={formatMessage(getTrad('header.description'))}
+        subtitle={isLargeDesktop && formatMessage(getTrad('header.description'))}
         primaryAction={
-          <Flex direction="row" size={2}>
-            <Box>
+          <Flex
+            direction="row"
+            size={2}
+            width={isLargeDesktop ? 'auto' : !isMobile ? '728px' : '100%'}
+          >
+            <Box width="100%">
               <Grid.Root
-                gap={4}
+                gap={{ initial: 2, medium: 4 }}
+                width="100%"
                 style={configQuery.data?.isCacheEnabled ? { display: 'flex' } : undefined}
               >
-                {!hasLocalizations ? <Grid.Item col={2} /> : null}
+                {!hasLocalizations && isLargeDesktop ? <Grid.Item m={2} xs={0} /> : null}
                 {canUpdate && (
-                  <Grid.Item col={3}>
+                  <StyledGridItem
+                    m={3}
+                    xs={hasCache ? 4 : 6}
+                    orderInitial={3}
+                    orderSmall={3}
+                    orderMedium={1}
+                  >
                     <Button
                       onClick={openNavigationManagerModal}
                       startIcon={null}
@@ -86,9 +117,15 @@ export const NavigationHeader: React.FC<Props> = ({
                     >
                       {formatMessage(getTrad('header.action.manage'))}
                     </Button>
-                  </Grid.Item>
+                  </StyledGridItem>
                 )}
-                <Grid.Item col={canUpdate ? 4 : 10}>
+                <StyledGridItem
+                  m={canUpdate ? 4 : 10}
+                  xs={hasLocalizations ? 9 : 12}
+                  orderInitial={1}
+                  orderSmall={1}
+                  orderMedium={2}
+                >
                   <Field.Root width="100%">
                     <SingleSelect
                       type="select"
@@ -116,29 +153,37 @@ export const NavigationHeader: React.FC<Props> = ({
                         ))}
                     </SingleSelect>
                   </Field.Root>
-                </Grid.Item>
+                </StyledGridItem>
                 {hasLocalizations ? (
-                  <Grid.Item col={2}>
-                    <SingleSelect
-                      type="select"
-                      placeholder={formatMessage(
-                        getTrad('pages.main.header.localization.select.placeholder')
-                      )}
-                      name="navigationLocalizationSelect"
-                      onChange={handleLocalizationSelection}
-                      value={currentLocale}
-                      size="S"
-                    >
-                      {[locale.defaultLocale, ...locale.restLocale].map((code) => (
-                        <SingleSelectOption key={code} value={code}>
-                          {code}
-                        </SingleSelectOption>
-                      ))}
-                    </SingleSelect>
-                  </Grid.Item>
+                  <StyledGridItem m={2} xs={3} orderInitial={2} orderSmall={2} orderMedium={3}>
+                    <Field.Root width="100%">
+                      <SingleSelect
+                        type="select"
+                        placeholder={formatMessage(
+                          getTrad('pages.main.header.localization.select.placeholder')
+                        )}
+                        name="navigationLocalizationSelect"
+                        onChange={handleLocalizationSelection}
+                        value={currentLocale}
+                        size="S"
+                      >
+                        {[locale.defaultLocale, ...locale.restLocale].map((code) => (
+                          <SingleSelectOption key={code} value={code}>
+                            {code}
+                          </SingleSelectOption>
+                        ))}
+                      </SingleSelect>
+                    </Field.Root>
+                  </StyledGridItem>
                 ) : null}
                 {canUpdate && (
-                  <Grid.Item col={3}>
+                  <StyledGridItem
+                    m={3}
+                    xs={hasCache ? 4 : 6}
+                    orderInitial={4}
+                    orderSmall={4}
+                    orderMedium={4}
+                  >
                     <Button
                       onClick={handleSave}
                       startIcon={submitIcon}
@@ -149,36 +194,43 @@ export const NavigationHeader: React.FC<Props> = ({
                     >
                       {formatMessage(getTrad('submit.cta.save'))}
                     </Button>
-                  </Grid.Item>
+                  </StyledGridItem>
                 )}
-                {configQuery.data?.isCacheEnabled && (
-                  <Grid.Item col={3}>
-                    <Button
-                      onClick={handleCachePurge}
-                      startIcon={submitIcon}
-                      variant="danger"
-                      type="submit"
-                      fullWidth
-                      size="S"
-                    >
-                      {formatMessage(getTrad('submit.cta.cache.purge'))}
-                    </Button>
-                  </Grid.Item>
+                {hasCache && (
+                  <>
+                    {isDesktop && (
+                      <StyledGridItem m={9} orderInitial={5} orderSmall={5} orderMedium={5} />
+                    )}
+                    <StyledGridItem m={3} xs={4} orderInitial={6} orderSmall={6} orderMedium={6}>
+                      <Button
+                        onClick={handleCachePurge}
+                        startIcon={submitIcon}
+                        variant="danger"
+                        type="submit"
+                        fullWidth
+                        size="S"
+                      >
+                        {formatMessage(getTrad('submit.cta.cache.purge'))}
+                      </Button>
+                    </StyledGridItem>
+                  </>
                 )}
               </Grid.Root>
             </Box>
             {canUpdate && navigationManagerModal}
           </Flex>
         }
         secondaryAction={
-          <Tag icon={<Information aria-hidden={true} />}>
-            {activeNavigation
-              ? formatMessage(getTrad('header.meta'), {
-                  id: activeNavigation?.documentId,
-                  key: activeNavigation?.slug,
-                })
-              : null}
-          </Tag>
+          !isMobile && (
+            <Tag icon={<Information aria-hidden={true} />}>
+              {activeNavigation
+                ? formatMessage(getTrad('header.meta'), {
+                    id: activeNavigation?.documentId,
+                    key: activeNavigation?.slug,
+                  })
+                : null}
+            </Tag>
+          )
         }
       />
     </>

admin/src/pages/HomePage/components/NavigationItemForm/components/AdditionalFields/CustomFieldsField/index.tsx

@@ -14,7 +14,7 @@ export const CustomFieldsField: React.FC<CustomFieldsFieldProps> = ({ additional
     useNavigationItemFormContext();
 
   return (
-    <Grid.Item alignItems="flex-start" key={additionalField.name} col={6}>
+    <Grid.Item alignItems="flex-start" key={additionalField.name} s={6} xs={12}>
       <Field
         name={`additionalFields.${additionalField.name}`}
         label={additionalField.label}