mobile fixes

mimecuvalo · Nov 23, 2023 · f13401f · f13401f · vercel · Nov 23, 2023
1 parent 7c12ad6
commit f13401f
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 52 deletions.
diff --git a/components/ItemWrapper.tsx b/components/ItemWrapper.tsx
@@ -32,7 +32,20 @@ const StyledItemWrapper = styled('div', { label: 'ItemWrapper' })`
     margin-block-end: ${(props) => props.theme.spacing(0.5)};
     margin-inline-start: 0;
     margin-inline-end: 0;
-    padding-inline-start: ${(props) => props.theme.spacing(2)};
+  }
+
+  ${(props) => props.theme.breakpoints.down('sm')} {
+    & ul,
+    & ol,
+    & blockquote {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-around;
+
+      li {
+        flex: 0 0 40%;
+      }
+    }
   }
 
   & blockquote {

diff --git a/components/content/ContentBase.tsx b/components/content/ContentBase.tsx
@@ -1,6 +1,6 @@
 import { Content, UserPublic } from 'data/graphql-generated';
 import { CssBaseline, GlobalStyles } from '@mui/material';
-import { Grid, Typography, styled } from 'components';
+import { Box, Grid, Typography, styled } from 'components';
 import { themeGlobalCss, themes } from 'styles/theme';
 
 import ContentHead from './ContentHead';
@@ -44,7 +44,7 @@ export default function ContentBase(
 
         <Grid container flexWrap="nowrap" alignItems="flex-start">
           <SiteMap content={content} username={username} />
-          {children}
+          <Box sx={{ mt: { xs: 6, md: 0 }, px: { xs: 2, md: 0 } }}>{children}</Box>
         </Grid>
       </Container>
     </ThemeProvider>

diff --git a/components/content/Header.tsx b/components/content/Header.tsx
@@ -5,8 +5,9 @@ import ContentLink from 'components/ContentLink';
 import { F } from 'i18n';
 import UserContext from 'app/UserContext';
 import { useContext } from 'react';
+import { transientOptions } from '@/util/css';
 
-const StyledHeader = styled('header')`
+const StyledHeader = styled('header', { ...transientOptions })<{ $isMainAlbum: boolean }>`
   position: sticky;
   top: ${(props) => props.theme.spacing(1)};
   max-height: 77px;
@@ -26,6 +27,10 @@ const StyledHeader = styled('header')`
     -webkit-line-clamp: 2;
     overflow: hidden;
   }
+
+  ${(props) => props.theme.breakpoints.down('md')} {
+    top: ${(props) => props.theme.spacing(props.$isMainAlbum ? 8 : 0)};
+  }
 `;
 
 // const EditButton = styled(Button)`
@@ -42,7 +47,7 @@ export default function Header({ content }: { content: Content }) {
   }
 
   return (
-    <StyledHeader>
+    <StyledHeader $isMainAlbum={content.album === 'main'}>
       <Tooltip title={content.title} placement="top-start">
         <Typography variant="h1">
           <ContentLink item={content} currentContent={content}>

diff --git a/components/content/Nav.tsx b/components/content/Nav.tsx
@@ -161,7 +161,13 @@ const Nav = forwardRef(({ content }: { content: Content }, ref) => {
     );
     if (!url) {
       return (
-        <Link href={url} title={contentMeta.title} {...linkCommonProperties}>
+        <Link
+          href="#"
+          onClick={(evt: MouseEvent) => evt.preventDefault()}
+          title={contentMeta.title}
+          {...linkCommonProperties}
+          style={{ cursor: 'default' }}
+        >
           {msg}
         </Link>
       );

diff --git a/components/content/SiteMap.tsx b/components/content/SiteMap.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Box, IconButton, Link, TextField, styled, useTheme } from 'components';
+import { AppBar, Avatar, Box, IconButton, Link, TextField, Toolbar, styled, useTheme } from 'components';
 import { Content, SiteMapAndUserQuery } from 'data/graphql-generated';
 import { F, defineMessages, useIntl } from 'i18n';
 import { FormEvent, ReactNode, useContext, useEffect, useState } from 'react';
@@ -15,10 +15,27 @@ import baseTheme from 'styles';
 import constants from 'util/constants';
 import { transientOptions } from 'util/css';
 import { useRouter } from 'next/router';
+import { SwipeableDrawer, useMediaQuery } from '@mui/material';
 
 export const SITE_MAP_WIDTH = 175;
 
-const Nav = styled('nav', transientOptions)<{ $isMenuOpen: boolean }>`
+const Nav = styled('nav', transientOptions)`
+  height: calc(100vh - ${(props) => props.theme.spacing(1)} * 2);
+  width: ${SITE_MAP_WIDTH}px;
+  overflow: auto;
+  background: ${(props) => props.theme.palette.background.default};
+  margin: ${(props) => props.theme.spacing(1)};
+  margin-right: ${(props) => props.theme.spacing(3.5)};
+  padding: ${(props) => props.theme.spacing(0.5)};
+
+  border: 1px solid ${(props) => props.theme.palette.primary.light};
+  box-shadow:
+    1px 1px ${(props) => props.theme.palette.primary.light},
+    2px 2px ${(props) => props.theme.palette.primary.light},
+    3px 3px ${(props) => props.theme.palette.primary.light};
+`;
+
+const SwipeableDrawerStyled = styled(SwipeableDrawer)`
   height: calc(100vh - ${(props) => props.theme.spacing(1)} * 2);
   width: ${SITE_MAP_WIDTH}px;
   overflow: auto;
@@ -34,7 +51,6 @@ const Nav = styled('nav', transientOptions)<{ $isMenuOpen: boolean }>`
     3px 3px ${(props) => props.theme.palette.primary.light};
 
   ${(props) => props.theme.breakpoints.down('md')} {
-    ${(props) => !props.$isMenuOpen && 'display: none;'}
     background: ${(props) => props.theme.palette.background.default};
     position: fixed;
     inset: 0;
@@ -45,16 +61,20 @@ const Nav = styled('nav', transientOptions)<{ $isMenuOpen: boolean }>`
     padding: ${(props) => props.theme.spacing(2)};
     z-index: ${baseTheme.zindex.siteMap};
 
-    & > ul > li {
-      margin-bottom: ${(props) => props.theme.spacing(2)};
-    }
+    .MuiPaper-root {
+      padding-top: ${(props) => props.theme.spacing(8)};
 
-    & > ul > li > ul {
-      display: none;
-    }
+      & > ul > li {
+        margin-bottom: ${(props) => props.theme.spacing(2)};
+      }
 
-    ul {
-      padding-left: 0;
+      & > ul > li > ul {
+        display: none;
+      }
+
+      ul {
+        padding-left: 0;
+      }
     }
   }
 `;
@@ -80,6 +100,7 @@ const License = styled('div')`
 const Hamburger = styled(IconButton)`
   display: none;
   z-index: ${baseTheme.zindex.siteMapHamburger};
+  margin-left: ${(props) => props.theme.spacing(-2)};
 
   ${(props) => props.theme.breakpoints.down('md')} {
     width: 45px;
@@ -129,14 +150,15 @@ export default function SiteMap({ content, username }: { content?: Content; user
   const intl = useIntl();
   const theme = useTheme();
   const { user } = useContext(UserContext);
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { loading, data, client } = useQuery<SiteMapAndUserQuery>(SITE_MAP_AND_USER_QUERY, {
     variables: {
       username,
     },
   });
   const menuButtonLabel = intl.formatMessage(messages.menu);
   const searchLabel = intl.formatMessage(messages.search);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const isTablet = useMediaQuery(theme.breakpoints.down(baseTheme.breakpoints.md));
 
   useEffect(() => {
     if (user?.username === username) {
@@ -196,10 +218,10 @@ export default function SiteMap({ content, username }: { content?: Content; user
   }
 
   const handleMobileClick = () => {
-    setIsMenuOpen(!isMenuOpen);
+    setIsDrawerOpen(!isDrawerOpen);
   };
   const handleCloseMenu = () => {
-    setIsMenuOpen(false);
+    setIsDrawerOpen(false);
   };
 
   const handleSearchSubmit = (evt: FormEvent) => {
@@ -214,17 +236,21 @@ export default function SiteMap({ content, username }: { content?: Content; user
 
   if (loading) {
     return (
-      <>
-        <Hamburger
-          aria-label={menuButtonLabel}
-          onClick={handleMobileClick}
-          size="large"
-          sx={{ color: theme.palette.text.primary }}
-        >
-          {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
-        </Hamburger>
-        <Nav $isMenuOpen={isMenuOpen} />
-      </>
+      <AppBar
+        sx={{ background: theme.palette.background.paper, boxShadow: 'none', display: { xs: 'block', md: 'none' } }}
+      >
+        <Toolbar>
+          <Hamburger
+            aria-label={menuButtonLabel}
+            onClick={handleMobileClick}
+            size="large"
+            sx={{ color: theme.palette.text.primary }}
+          >
+            {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+          </Hamburger>
+          <Nav />
+        </Toolbar>
+      </AppBar>
     );
   }
 
@@ -240,19 +266,36 @@ export default function SiteMap({ content, username }: { content?: Content; user
   }
 
   const items = generateItems(siteMap);
+  const DrawerComponent = isTablet ? SwipeableDrawerStyled : Nav;
 
   return (
     <>
-      <Hamburger
-        id="hw-hamburger"
-        aria-label={menuButtonLabel}
-        onClick={handleMobileClick}
-        size="large"
-        sx={{ color: theme.palette.text.primary }}
+      <AppBar
+        sx={{ background: theme.palette.background.paper, boxShadow: 'none', display: { xs: 'block', md: 'none' } }}
+      >
+        <Toolbar>
+          <Hamburger
+            id="hw-hamburger"
+            aria-label={menuButtonLabel}
+            onClick={handleMobileClick}
+            size="large"
+            sx={{ color: theme.palette.text.primary }}
+          >
+            {isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
+          </Hamburger>
+        </Toolbar>
+      </AppBar>
+
+      <DrawerComponent
+        id="hw-sitemap"
+        title="sitemap"
+        onMouseUp={handleCloseMenu}
+        anchor="left"
+        open={isDrawerOpen}
+        onClose={() => setIsDrawerOpen(false)}
+        onOpen={() => setIsDrawerOpen(true)}
+        PaperProps={{ sx: { width: '100%' } }}
       >
-        {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
-      </Hamburger>
-      <Nav id="hw-sitemap" title="sitemap" $isMenuOpen={isMenuOpen} onMouseUp={handleCloseMenu}>
         <ul>
           {contentOwner.logo ? (
             <LogoWrapper id="hw-sitemap-logo" className="h-card">
@@ -271,7 +314,7 @@ export default function SiteMap({ content, username }: { content?: Content; user
               </Link>
             </LogoWrapper>
           ) : null}
-          {isMenuOpen && (
+          {isDrawerOpen && (
             <li>
               <LoginLogoutButton />
             </li>
@@ -319,7 +362,7 @@ export default function SiteMap({ content, username }: { content?: Content; user
             }}
           />
         </Box>
-      </Nav>
+      </DrawerComponent>
     </>
   );
 }
diff --git a/components/content/templates/Album.tsx b/components/content/templates/Album.tsx
@@ -1,5 +1,5 @@
 import { Alert, Snackbar, styled } from 'components';
-import { THUMB_HEIGHT, THUMB_WIDTH } from 'util/constants';
+import { THUMB_WIDTH } from 'util/constants';
 import { gql, useQuery } from '@apollo/client';
 
 import { Content } from 'data/graphql-generated';
@@ -36,7 +36,7 @@ const LinkWrapper = styled('span')`
   & a {
     display: block;
     width: ${THUMB_WIDTH}px;
-    max-width: ${THUMB_HEIGHT}px;
+    max-width: ${THUMB_WIDTH}px;
     min-height: 1.1em;
   }
 `;

diff --git a/pages/[[...slug]].tsx b/pages/[[...slug]].tsx
@@ -20,15 +20,13 @@ import { styled } from 'components';
 import { useQuery } from '@apollo/client';
 import { useRouter } from 'next/router';
 
-const MOBILE_NAV_WIDTH = '45px';
-
 const StyledContent = styled('article', { label: 'StyledContent' })`
   margin-top: ${(props) => props.theme.spacing(1)};
   padding: ${(props) => props.theme.spacing(0, 0.5, 1, 0)};
   width: 75vw;
 
   ${(props) => props.theme.breakpoints.down('md')} {
-    width: calc(100% - ${MOBILE_NAV_WIDTH} - ${(props) => props.theme.spacing(1)});
+    width: 100%;
   }
 `;
 
@@ -63,7 +61,11 @@ export default function Content({ username, name, host }: { username: string; na
       setCurrentCanonicalUrl(canonicalUrl);
     }
 
-    setupSwipe();
+    // Only swipe on photos section.
+    if (data.fetchContent.section === 'photos' && data.fetchContent.album !== 'main') {
+      setupSwipe();
+    }
+
     return () => {
       // @ts-ignore this is fine.
       swipeListener?.current && swipeListener.current.off();

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,7 +7,7 @@ import { ApolloProvider, NormalizedCacheObject, gql } from '@apollo/client';
 import { CacheProvider, EmotionCache } from '@emotion/react';
 import { DebugWrapper, Header } from 'components';
 import { IntlProvider, setupCreateIntl } from 'i18n';
-import { Marck_Script, Press_Start_2P } from 'next/font/google';
+import { Marck_Script, Press_Start_2P, Noto_Color_Emoji } from 'next/font/google';
 import { createEmotionCache, muiTheme } from 'styles';
 import { disposeAnalytics, setupAnalytics } from 'app/analytics';
 import { useEffect, useState } from 'react';
@@ -34,6 +34,7 @@ const pressStart2P = Press_Start_2P({
   variable: '--font-press-start-2p',
   display: 'swap',
 });
+const notoColorEmoji = Noto_Color_Emoji({ subsets: ['emoji'], weight: '400', variable: '--noto-color-emoji' });
 const marckScript = Marck_Script({
   weight: '400',
   subsets: ['latin'],
@@ -120,14 +121,15 @@ function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }:
                 <ErrorBoundary>
                   <style jsx global>{`
                     :root {
+                      --font-noto-color-emoji: ${notoColorEmoji.style.fontFamily};
                       --font-press-start-2p: ${pressStart2P.style.fontFamily};
                       --font-marck-script: ${marckScript.style.fontFamily};
                     }
                   `}</style>
                   <div
                     className={
                       (process.env.NODE_ENV === 'development' ? 'App App-is-development' : 'App') +
-                      ` ${pressStart2P.variable} ${marckScript.variable}`
+                      ` ${pressStart2P.variable} ${marckScript.variable} ${notoColorEmoji.variable}`
                     }
                   >
                     <Header />

diff --git a/styles/typography.ts b/styles/typography.ts
@@ -1,9 +1,9 @@
 import { spacing } from './constants';
 
 const SYSTEM_FONTS =
-  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+  'var(--font-noto-color-emoji), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 const MONOSPACE_FONTS =
-  'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+  'Menlo, var(--font-noto-color-emoji), Monaco, Consolas, "Liberation Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 
 const constants = {
   fontFamily: MONOSPACE_FONTS,