Merge pull request #9 from acid-info/mobile-css

update mobile css

packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx

@@ -1,71 +0,0 @@
-import styled from '@emotion/styled'
-
-export const Grid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(24, 1fr);
-  gap: 16px;
-`
-
-export const GridItem = styled.div`
-  grid-column: span 4;
-
-  &.w-1 {
-    grid-column: span 1;
-  }
-
-  &.w-2 {
-    grid-column: span 2;
-  }
-
-  &.w-3 {
-    grid-column: span 3;
-  }
-
-  &.w-4 {
-    grid-column: span 4;
-  }
-
-  &.w-6 {
-    grid-column: span 6;
-  }
-
-  &.w-7 {
-    grid-column: span 7;
-  }
-
-  &.w-8 {
-    grid-column: span 8;
-  }
-
-  &.w-10 {
-    grid-column: span 10;
-  }
-
-  &.w-12 {
-    grid-column: span 12;
-  }
-
-  &.w-14 {
-    grid-column: span 14;
-  }
-
-  &.w-16 {
-    grid-column: span 16;
-  }
-
-  &.w-17 {
-    grid-column: span 17;
-  }
-
-  &.w-18 {
-    grid-column: span 18;
-  }
-
-  &.w-24 {
-    grid-column: span 24;
-  }
-
-  @media (max-width: 768px) {
-    grid-column: span 24 !important;
-  }
-`

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -6,6 +6,8 @@ import styles from './style.module.scss'
 
 import ArrowLCircleSvg from '../../static/icons/arrow-left-circle.svg'
 import ArrowRCircleSvg from '../../static/icons/arrow-right-circle.svg'
+import ArrowL from '../../static/icons/arrow-left.svg'
+import ArrowR from '../../static/icons/arrow-right.svg'
 import DiscordSvg from '../../static/icons/discord.svg'
 import DiscourseSvg from '../../static/icons/discourse.svg'
 import DotSvg from '../../static/icons/dot.svg'
@@ -60,6 +62,18 @@ export const IconArrowLeftCircle = (props: TIconProps): JSX.Element => (
   </Icon>
 )
 
+export const IconArrowRight = (props: TIconProps): JSX.Element => (
+  <Icon {...props}>
+    <ArrowR />
+  </Icon>
+)
+
+export const IconArrowLeft = (props: TIconProps): JSX.Element => (
+  <Icon>
+    <ArrowL />
+  </Icon>
+)
+
 export const IconFolder = (props: TIconProps): JSX.Element => (
   <Icon {...props}>
     <FolderSvg />

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -237,7 +237,113 @@ body {
 }
 
 svg * {
-  stroke: rgb(var(--lsd-text-primary));
+  fill: rgb(var(--lsd-text-primary));
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+  gap: 16px;
+}
+
+.grid-item {
+  grid-column: span 4;
+
+  &.w-1 {
+    grid-column: span 1;
+  }
+
+  &.w-2 {
+    grid-column: span 2;
+  }
+
+  &.w-3 {
+    grid-column: span 3;
+  }
+
+  &.w-4 {
+    grid-column: span 4;
+  }
+
+  &.w-5 {
+    grid-column: span 4;
+  }
+
+  &.w-6 {
+    grid-column: span 6;
+  }
+
+  &.w-7 {
+    grid-column: span 7;
+  }
+
+  &.w-8 {
+    grid-column: span 8;
+  }
+
+  &.w-9 {
+    grid-column: span 8;
+  }
+
+  &.w-10 {
+    grid-column: span 10;
+  }
+
+  &.w-11 {
+    grid-column: span 10;
+  }
+
+  &.w-12 {
+    grid-column: span 12;
+  }
+
+  &.w-13 {
+    grid-column: span 12;
+  }
+
+  &.w-14 {
+    grid-column: span 14;
+  }
+
+  &.w-15 {
+    grid-column: span 14;
+  }
+
+  &.w-16 {
+    grid-column: span 16;
+  }
+
+  &.w-17 {
+    grid-column: span 17;
+  }
+
+  &.w-18 {
+    grid-column: span 18;
+  }
+
+  &.w-19 {
+    grid-column: span 18;
+  }
+
+  &.w-20 {
+    grid-column: span 18;
+  }
+
+  &.w-21 {
+    grid-column: span 18;
+  }
+
+  &.w-22 {
+    grid-column: span 18;
+  }
+
+  &.w-23 {
+    grid-column: span 18;
+  }
+
+  &.w-24 {
+    grid-column: span 24;
+  }
 }
 
 .table-of-contents__link--active {
@@ -253,11 +359,13 @@ svg * {
 }
 
 code {
-  color: rgb(var(--lsd-text-secondary));
+  color: rgb(var(--lsd-text-primary));
+  border-radius: 0;
+  background: rgba(255, 255, 255, 0.15);
 }
 
 a code {
-  color: rgb(var(--lsd-text-secondary));
+  color: rgb(var(--lsd-text-primary));
 }
 
 /* sidebar */
@@ -357,6 +465,7 @@ small {
 .breadcrumbs__item:not(:last-child):after {
   content: '/';
   opacity: 1;
+  background: none;
 }
 
 .breadcrumbs__link {
@@ -374,6 +483,7 @@ small {
 
 .row {
   position: relative;
+  margin: 0;
 }
 
 // TODO temporary style fix for the logo
@@ -432,7 +542,71 @@ div.w-10 > a:not(:last-child) {
   border-left: 1px solid rgb(var(--lsd-border-primary));
 }
 
-@media (max-width: 576px) {
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.navbar__item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.dropdown > .navbar__link:after {
+  display: none;
+}
+
+.margin-left-8 {
+  margin-left: 8px;
+}
+
+.pagination-nav__link {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  border: 1px solid rgb(var(--lsd-border-primary));
+  border-radius: 0;
+  padding: 10px 14px;
+}
+
+.pagination-nav__link--next {
+  justify-content: flex-end;
+}
+
+.pagination-nav__label::after {
+  display: none;
+}
+
+.pagination-nav__label::before {
+  display: none;
+}
+
+@include utils.responsive('lg', 'down') {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .footer-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .navbar {
+    display: flex;
+    padding-inline: 0;
+    height: 56px;
+    padding: 12px 16px;
+  }
+
+  .footer {
+    margin-left: -16px;
+    padding: 24px 16px;
+  }
+
+  .desktop {
+    display: none;
+  }
+}
+
+@include utils.responsive('sm', 'down') {
   :root {
     --ifm-global-spacing: 0.5rem;
     --ifm-spacing-vertical: var(--ifm-global-spacing);

packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6668 6.41683H4.56766L7.8285 3.156L7.00016 2.3335L2.3335 7.00016L7.00016 11.6668L7.82266 10.8443L4.56766 7.5835H11.6668V6.41683Z" fill="white"/>
+</svg>

packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99992 2.3335L6.17742 3.156L9.43242 6.41683H2.33325V7.5835H9.43242L6.17742 10.8443L6.99992 11.6668L11.6666 7.00016L6.99992 2.3335Z" fill="white"/>
+</svg>

packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx

@@ -7,7 +7,6 @@ import {
 } from '@docusaurus/theme-common/internal'
 import Link from '@docusaurus/Link'
 import { translate } from '@docusaurus/Translate'
-import HomeBreadcrumbItem from '@theme/DocBreadcrumbs/Items/Home'
 import styles from './styles.module.css'
 import { Typography } from '@acid-info/lsd-react'
 
@@ -87,7 +86,16 @@ export default function DocBreadcrumbs() {
         itemScope
         itemType="https://schema.org/BreadcrumbList"
       >
-        {homePageRoute && <HomeBreadcrumbItem />}
+        {homePageRoute && (
+          <Typography
+            className={clsx('breadcrumbs__item')}
+            variant="body3"
+            component="a"
+            href="/"
+          >
+            Home
+          </Typography>
+        )}
         {breadcrumbs.map((item, idx) => {
           const isLast = idx === breadcrumbs.length - 1
           return (

packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css

@@ -7,17 +7,10 @@
   grid-column: span 10;
 }
 
-@media (min-width: 997px) {
-  /* .docItemCol {
-    max-width: 75% !important;
-  } */
-}
-
 .docItemGrid {
   display: grid;
   grid-template-columns: repeat(14, 1fr);
   gap: 16px;
-  padding-left: 12px; /* Temporary offset */
 }
 
 .toc {
@@ -27,3 +20,15 @@
 .gap1 {
   grid-column: span 1;
 }
+
+@media (max-width: 997px) {
+  .docItemGrid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    padding-left: 0;
+  }
+
+  .docItemCol {
+    grid-column: span 2;
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css

@@ -10,18 +10,9 @@
   padding-bottom: 80px !important;
 }
 
-@media (min-width: 997px) {
-  /* .docMainContainer {
-    max-width: calc(100% - var(--doc-sidebar-width));
+@media (max-width: 997px) {
+  .docMainContainer {
+    width: 100%;
+    grid-column: span 2;
   }
-
-  .docMainContainerEnhanced {
-    max-width: calc(100% - var(--doc-sidebar-hidden-width));
-  }
-
-  .docItemWrapperEnhanced {
-    max-width: calc(
-      var(--ifm-container-width) + var(--doc-sidebar-width)
-    ) !important;
-  } */
 }

packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx

@@ -5,7 +5,7 @@ import BackToTopButton from '@theme/BackToTopButton'
 import DocPageLayoutSidebar from '@theme/DocPage/Layout/Sidebar'
 import DocPageLayoutMain from '@theme/DocPage/Layout/Main'
 import styles from './styles.module.css'
-import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
+import clsx from 'clsx'
 
 export default function DocPageLayout({ children }) {
   const sidebar = useDocsSidebar()
@@ -13,8 +13,8 @@ export default function DocPageLayout({ children }) {
   return (
     <Layout wrapperClassName={styles.docsWrapper}>
       <BackToTopButton />
-      <Grid>
-        <GridItem className="w-3" />
+      <div className="grid">
+        <div className={clsx('grid-item', 'w-3', 'desktop')} />
         {sidebar && (
           <DocPageLayoutSidebar
             sidebar={sidebar.items}
@@ -22,12 +22,12 @@ export default function DocPageLayout({ children }) {
             setHiddenSidebarContainer={setHiddenSidebarContainer}
           />
         )}
-        <GridItem className="w-1" />
+        <div className={clsx('grid-item', 'w-1', 'desktop')} />
         <DocPageLayoutMain hiddenSidebarContainer={hiddenSidebarContainer}>
           {children}
         </DocPageLayoutMain>
-        <GridItem className="w-3" />
-      </Grid>
+        <div className={clsx('grid-item', 'w-3', 'desktop')} />
+      </div>
     </Layout>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import clsx from 'clsx'
-import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
 import { Typography } from '@acid-info/lsd-react'
 import styles from './style.module.css'
 
@@ -11,17 +10,17 @@ export default function FooterLayout({ style, copyright }) {
         'footer--dark': style === 'dark',
       })}
     >
-      <Grid>
-        <GridItem className="w-6">
+      <div className={clsx('grid', 'footer-grid')}>
+        <div className={clsx('grid-item', 'w-6', styles.footerInfo)}>
           <Typography component="div" variant="body2">
             Copyright © 2023 Logos
           </Typography>
           <Typography component="div" variant="body2">
             Built with Docusaurus.
           </Typography>
-        </GridItem>
-        <GridItem className="w-1" />
-        <GridItem className="w-6">
+        </div>
+        <div className={clsx('grid-item', 'w-1', 'desktop')} />
+        <div className={clsx('grid-item', 'w-6')}>
           <div className={styles.section}>
             <div>
               <Typography component="div" variant="body2">
@@ -59,9 +58,9 @@ export default function FooterLayout({ style, copyright }) {
               </div>
             </div>
           </div>
-        </GridItem>
-        <GridItem className="w-1" />
-        <GridItem className="w-6">
+        </div>
+        <div className={clsx('grid-item', 'w-1')} />
+        <div className={clsx('grid-item', 'w-6')}>
           <div className={styles.section}>
             <div>
               <Typography component="div" variant="body2">
@@ -102,9 +101,9 @@ export default function FooterLayout({ style, copyright }) {
               </div>
             </div>
           </div>
-        </GridItem>
-        <GridItem className="w-4" />
-      </Grid>
+        </div>
+        <div className={clsx('grid-item', 'w-4')} />
+      </div>
     </footer>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css

@@ -3,6 +3,7 @@
   align-items: center;
   gap: 8px;
   white-space: nowrap;
+  flex-wrap: wrap;
 }
 
 .flexRow a:not(:last-child) {
@@ -23,3 +24,13 @@
   flex-direction: column;
   gap: 32px;
 }
+
+@media (max-width: 997px) {
+  .section {
+    gap: 24px;
+  }
+
+  .footerInfo {
+    margin-bottom: 56px;
+  }
+}

packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx

@@ -11,7 +11,6 @@ import NavbarMobileSidebarToggle from '@theme/Navbar/MobileSidebar/Toggle'
 import NavbarLogo from '@theme/Navbar/Logo'
 import NavbarSearch from '@theme/Navbar/Search'
 import styles from './styles.module.css'
-import { Grid, GridItem } from '@logos-theme/components/Grid/Grid'
 import clsx from 'clsx'
 
 function useNavbarItems() {
@@ -49,17 +48,17 @@ export default function NavbarContent() {
   const searchBarItem = items.find((item) => item.type === 'search')
 
   return (
-    <Grid className="navbar__inner">
+    <div className={clsx('grid', 'navbar__inner')}>
       {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
-      <GridItem className="w-1">
+      <div className={clsx('grid-item', 'w-1')}>
         <NavbarLogo />
-      </GridItem>
-      <GridItem className="w-6" />
-      <GridItem className="w-10">
+      </div>
+      <div className={clsx('grid-item', 'w-6', 'desktop')} />
+      <div className={clsx('grid-item', 'w-10')}>
         <NavbarItems items={leftItems} />
-      </GridItem>
-      <GridItem className="w-1" />
-      <GridItem className={clsx('w-6', styles.rightSection)}>
+      </div>
+      <div className={clsx('grid-item', 'w-1', 'desktop')} />
+      <div className={clsx('grid-item', 'w-6', styles.rightSection)}>
         <NavbarItems items={rightItems} />
         <NavbarColorModeToggle className={styles.colorModeToggle} />
         {!searchBarItem && (
@@ -67,7 +66,7 @@ export default function NavbarContent() {
             <SearchBar />
           </NavbarSearch>
         )}
-      </GridItem>
-    </Grid>
+      </div>
+    </div>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useRef, useEffect } from 'react'
+import clsx from 'clsx'
+import {
+  isRegexpStringMatch,
+  useCollapsible,
+  Collapsible,
+} from '@docusaurus/theme-common'
+import { isSamePath, useLocalPathname } from '@docusaurus/theme-common/internal'
+import NavbarNavLink from '@theme/NavbarItem/NavbarNavLink'
+import NavbarItem from '@theme/NavbarItem'
+import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react'
+
+function isItemActive(item, localPathname) {
+  if (isSamePath(item.to, localPathname)) {
+    return true
+  }
+  if (isRegexpStringMatch(item.activeBaseRegex, localPathname)) {
+    return true
+  }
+  if (item.activeBasePath && localPathname.startsWith(item.activeBasePath)) {
+    return true
+  }
+  return false
+}
+
+function containsActiveItems(items, localPathname) {
+  return items.some((item) => isItemActive(item, localPathname))
+}
+
+function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}) {
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const [showDropdown, setShowDropdown] = useState(false)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (!dropdownRef.current || dropdownRef.current.contains(event.target)) {
+        return
+      }
+      setShowDropdown(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('touchstart', handleClickOutside)
+    document.addEventListener('focusin', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('touchstart', handleClickOutside)
+      document.removeEventListener('focusin', handleClickOutside)
+    }
+  }, [dropdownRef])
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
+        'dropdown--right': position === 'right',
+        'dropdown--show': showDropdown,
+      })}
+    >
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e) => e.preventDefault()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            setShowDropdown(!showDropdown)
+          }
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ArrowDownIcon className={clsx('margin-left-8', 'cursor-pointer')} />
+      <ul className="dropdown__menu">
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function DropdownNavbarItemMobile({
+  items,
+  className,
+  position, // Need to destructure position from props so that it doesn't get passed on.
+  onClick,
+  ...props
+}) {
+  const localPathname = useLocalPathname()
+  const containsActive = containsActiveItems(items, localPathname)
+  const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({
+    initialState: () => !containsActive,
+  })
+
+  // Expand/collapse if any item active after a navigation
+  useEffect(() => {
+    if (containsActive) {
+      setCollapsed(!containsActive)
+    }
+  }, [localPathname, containsActive, setCollapsed])
+  return (
+    <li
+      className={clsx('menu__list-item', {
+        'menu__list-item--collapsed': collapsed,
+      })}
+    >
+      <NavbarNavLink
+        role="button"
+        className={clsx(
+          'menu__link menu__link--sublist menu__link--sublist-caret',
+          className,
+        )}
+        {...props}
+        onClick={(e) => {
+          e.preventDefault()
+          toggleCollapsed()
+        }}
+      >
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <Collapsible lazy as="ul" className="menu__list" collapsed={collapsed}>
+        {items.map((childItemProps, i) => (
+          <NavbarItem
+            mobile
+            isDropdownItem
+            onClick={onClick}
+            activeClassName="menu__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </Collapsible>
+    </li>
+  )
+}
+export default function DropdownNavbarItem({ mobile = false, ...props }) {
+  const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop
+  //@ts-ignore
+  return <Comp {...props} />
+}

packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -4,8 +4,7 @@ import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'
 import { translate } from '@docusaurus/Translate'
 import { useLocation } from '@docusaurus/router'
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'
-import IconLanguage from '@theme/Icon/Language'
-import styles from './styles.module.css'
+
 export default function LocaleDropdownNavbarItem({
   mobile,
   dropdownItemsBefore,
@@ -50,7 +49,8 @@ export default function LocaleDropdownNavbarItem({
         id: 'theme.navbar.mobileLanguageDropdown.label',
         description: 'The label for the mobile language switcher dropdown',
       })
-    : localeConfigs[currentLocale]?.label
+    : localeConfigs[currentLocale]?.label.substring(0, 2).toUpperCase()
+
   return (
     <DropdownNavbarItem
       {...props}

packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import clsx from 'clsx'
+import Link from '@docusaurus/Link'
+import {
+  NavigateBeforeIcon,
+  NavigateNextIcon,
+  Typography,
+} from '@acid-info/lsd-react'
+import { IconArrowLeft, IconArrowRight } from '@logos-theme/components/Icon'
+
+export default function PaginatorNavLink(props) {
+  const { permalink, title, subLabel, isNext } = props
+
+  return (
+    <Link
+      className={clsx(
+        'pagination-nav__link',
+        isNext ? 'pagination-nav__link--next' : 'pagination-nav__link--prev',
+      )}
+      to={permalink}
+    >
+      {!isNext ? <IconArrowLeft /> : null}
+      <Typography variant="body2" className="pagination-nav__label">
+        {title}
+      </Typography>
+      {isNext ? <IconArrowRight /> : null}
+    </Link>
+  )
+}

packages/logos-docusaurus-theme/src/client/theme/style.module.css

@@ -1,3 +1,9 @@
 .root {
   padding-inline: 32px;
 }
+
+@media (max-width: 997px) {
+  .root {
+    padding-inline: 16px;
+  }
+}