From db4210b1ad9021a7ea998db716cd1e3c2686a419 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Sat, 27 May 2023 23:49:14 +0900 Subject: [PATCH 1/6] update mobile css --- .../src/client/components/Grid/Grid.tsx | 8 ++++++-- .../src/client/css/custom.scss | 20 +++++++++++++++++++ .../theme/DocItem/Layout/styles.module.css | 19 +++++++++++------- .../DocPage/Layout/Main/styles.module.css | 17 ++++------------ .../src/client/theme/DocPage/Layout/index.tsx | 7 ++++--- .../src/client/theme/Navbar/Content/index.tsx | 4 ++-- .../src/client/theme/style.module.css | 6 ++++++ 7 files changed, 54 insertions(+), 27 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx index 1cdf591..43ecd25 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx @@ -4,6 +4,10 @@ export const Grid = styled.div` display: grid; grid-template-columns: repeat(24, 1fr); gap: 16px; + + @media (max-width: 997px) { + grid-template-columns: repeat(2, 1fr); + } ` export const GridItem = styled.div` @@ -65,7 +69,7 @@ export const GridItem = styled.div` grid-column: span 24; } - @media (max-width: 768px) { - grid-column: span 24 !important; + @media (max-width: 997px) { + grid-column: span 1 !important; } ` diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index b5bc45d..337b6be 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -357,6 +357,7 @@ small { .breadcrumbs__item:not(:last-child):after { content: '/'; opacity: 1; + background: none; } .breadcrumbs__link { @@ -374,6 +375,7 @@ small { .row { position: relative; + margin: 0; } // TODO temporary style fix for the logo @@ -432,6 +434,24 @@ div.w-10 > a:not(:last-child) { border-left: 1px solid rgb(var(--lsd-border-primary)); } +@media (max-width: 997px) { + .navbar { + display: flex; + padding-inline: 0; + height: 56px; + padding: 12px 16px; + } + + .footer { + margin-left: -16px; + padding: 24px 16px; + } + + .desktop { + display: none; + } +} + @media (max-width: 576px) { :root { --ifm-global-spacing: 0.5rem; diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css index f103bec..ae50191 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocItem/Layout/styles.module.css +++ b/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; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css index 7b579cc..4c0ba40 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/Main/styles.module.css +++ b/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; - } */ } diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx index ede7f32..5c0b14b 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx @@ -6,6 +6,7 @@ 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() @@ -14,7 +15,7 @@ export default function DocPageLayout({ children }) { - + {sidebar && ( )} - + {children} - + ) diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx index ccab8bb..bfffe0d 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx @@ -54,11 +54,11 @@ export default function NavbarContent() { - + - + diff --git a/packages/logos-docusaurus-theme/src/client/theme/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/style.module.css index 2470ba0..aa01acb 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/style.module.css +++ b/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; + } +} From 280ecdfd952a744129816b8cd41841f911092bb0 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Sun, 28 May 2023 00:02:15 +0900 Subject: [PATCH 2/6] update mobile footer css --- .../src/client/theme/Footer/Layout/index.tsx | 15 +++++++++++---- .../client/theme/Footer/Layout/style.module.css | 11 +++++++++++ 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx index e79829a..778fb2c 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx @@ -3,6 +3,7 @@ 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' +import styled from '@emotion/styled' export default function FooterLayout({ style, copyright }) { return ( @@ -11,8 +12,8 @@ export default function FooterLayout({ style, copyright }) { 'footer--dark': style === 'dark', })} > - - + + Copyright © 2023 Logos @@ -20,7 +21,7 @@ export default function FooterLayout({ style, copyright }) { Built with Docusaurus. - +
@@ -104,7 +105,13 @@ export default function FooterLayout({ style, copyright }) {
- + ) } + +const CustomGrid = styled(Grid)` + @media (max-width: 997px) { + grid-template-columns: 1fr; + } +` diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css index 6f82a7b..a87625b 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/style.module.css +++ b/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; + } +} From 1a758a85507d12cc80eb7fd0ab7cbc69bec16dba Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 30 May 2023 01:10:57 +0900 Subject: [PATCH 3/6] remove Grid styled component and update CSS --- .../src/client/components/Grid/Grid.tsx | 75 --------- .../src/client/css/custom.scss | 150 +++++++++++++++--- .../src/client/theme/DocPage/Layout/index.tsx | 11 +- .../src/client/theme/Footer/Layout/index.tsx | 30 ++-- .../src/client/theme/Navbar/Content/index.tsx | 21 ++- 5 files changed, 158 insertions(+), 129 deletions(-) delete mode 100644 packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx diff --git a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx deleted file mode 100644 index 43ecd25..0000000 --- a/packages/logos-docusaurus-theme/src/client/components/Grid/Grid.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import styled from '@emotion/styled' - -export const Grid = styled.div` - display: grid; - grid-template-columns: repeat(24, 1fr); - gap: 16px; - - @media (max-width: 997px) { - grid-template-columns: repeat(2, 1fr); - } -` - -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: 997px) { - grid-column: span 1 !important; - } -` diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index 337b6be..e91c8bf 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -240,6 +240,112 @@ svg * { stroke: 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 { color: rgb(var(--lsd-text-primary)) !important; } @@ -434,24 +540,6 @@ div.w-10 > a:not(:last-child) { border-left: 1px solid rgb(var(--lsd-border-primary)); } -@media (max-width: 997px) { - .navbar { - display: flex; - padding-inline: 0; - height: 56px; - padding: 12px 16px; - } - - .footer { - margin-left: -16px; - padding: 24px 16px; - } - - .desktop { - display: none; - } -} - @media (max-width: 576px) { :root { --ifm-global-spacing: 0.5rem; @@ -478,3 +566,29 @@ div.w-10 > a:not(:last-child) { --ifm-h4-font-size: 1.25rem !important; } } + +@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; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx index 5c0b14b..1f67fb5 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/DocPage/Layout/index.tsx @@ -5,7 +5,6 @@ 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 }) { @@ -14,8 +13,8 @@ export default function DocPageLayout({ children }) { return ( - - +
+
{sidebar && ( )} - +
{children} - - +
+
) } diff --git a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx index 778fb2c..5792625 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx +++ b/packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx @@ -1,9 +1,7 @@ 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' -import styled from '@emotion/styled' export default function FooterLayout({ style, copyright }) { return ( @@ -12,17 +10,17 @@ export default function FooterLayout({ style, copyright }) { 'footer--dark': style === 'dark', })} > - - +
+
Copyright © 2023 Logos Built with Docusaurus. - - - +
+
+
@@ -60,9 +58,9 @@ export default function FooterLayout({ style, copyright }) {
- - - +
+
+
@@ -103,15 +101,9 @@ export default function FooterLayout({ style, copyright }) {
- - - +
+
+
) } - -const CustomGrid = styled(Grid)` - @media (max-width: 997px) { - grid-template-columns: 1fr; - } -` diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx index bfffe0d..c70eb01 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/Navbar/Content/index.tsx +++ b/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 ( - +
{!mobileSidebar.disabled && } - +
- - - +
+
+
- - - +
+
+
{!searchBarItem && ( @@ -67,7 +66,7 @@ export default function NavbarContent() { )} - - +
+
) } From f2428e028e75625db1bd82c0cecb36aa7af88b0b Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 30 May 2023 01:47:15 +0900 Subject: [PATCH 4/6] update Navbar icons and svg CSS --- .../src/client/css/custom.scss | 63 ++++--- .../src/client/theme/DocBreadcrumbs/index.tsx | 12 +- .../theme/NavbarItem/DropdownNavbarItem.tsx | 155 ++++++++++++++++++ .../LocaleDropdownNavbarItem/index.tsx | 6 +- 4 files changed, 208 insertions(+), 28 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index e91c8bf..f311bbf 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -237,7 +237,7 @@ body { } svg * { - stroke: rgb(var(--lsd-text-primary)); + fill: rgb(var(--lsd-text-primary)); } .grid { @@ -540,31 +540,21 @@ div.w-10 > a:not(:last-child) { border-left: 1px solid rgb(var(--lsd-border-primary)); } -@media (max-width: 576px) { - :root { - --ifm-global-spacing: 0.5rem; - --ifm-spacing-vertical: var(--ifm-global-spacing); - --ifm-spacing-horizontal: var(--ifm-global-spacing); +.cursor-pointer { + cursor: pointer; +} - --ifm-button-size-multiplier: 1.25; +.navbar__item { + display: inline-flex; + align-items: center; +} - --ifm-button-padding-horizontal: calc( - var(--ifm-button-size-multiplier) * var(--ifm-spacing-horizontal) - ); - --ifm-button-padding-vertical: calc( - var(--ifm-button-size-multiplier) * var(--ifm-spacing-vertical) - ); +.dropdown > .navbar__link:after { + display: none; +} - --ifm-alert-padding-horizontal: calc(2 * var(--ifm-spacing-horizontal)); - --ifm-alert-padding-vertical: calc(2 * var(--ifm-spacing-vertical)); - } - - .markdown > h2 { - --ifm-h2-font-size: 1.75rem; - } - .markdown h4 { - --ifm-h4-font-size: 1.25rem !important; - } +.margin-left-8 { + margin-left: 8px; } @include utils.responsive('lg', 'down') { @@ -592,3 +582,30 @@ div.w-10 > a:not(:last-child) { display: none; } } + +@include utils.responsive('sm', 'down') { + :root { + --ifm-global-spacing: 0.5rem; + --ifm-spacing-vertical: var(--ifm-global-spacing); + --ifm-spacing-horizontal: var(--ifm-global-spacing); + + --ifm-button-size-multiplier: 1.25; + + --ifm-button-padding-horizontal: calc( + var(--ifm-button-size-multiplier) * var(--ifm-spacing-horizontal) + ); + --ifm-button-padding-vertical: calc( + var(--ifm-button-size-multiplier) * var(--ifm-spacing-vertical) + ); + + --ifm-alert-padding-horizontal: calc(2 * var(--ifm-spacing-horizontal)); + --ifm-alert-padding-vertical: calc(2 * var(--ifm-spacing-vertical)); + } + + .markdown > h2 { + --ifm-h2-font-size: 1.75rem; + } + .markdown h4 { + --ifm-h4-font-size: 1.25rem !important; + } +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx index dcb367e..6f64a34 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/DocBreadcrumbs/index.tsx +++ b/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 && } + {homePageRoute && ( + + Home + + )} {breadcrumbs.map((item, idx) => { const isLast = idx === breadcrumbs.length - 1 return ( diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/DropdownNavbarItem.tsx new file mode 100644 index 0000000..456b304 --- /dev/null +++ b/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(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 ( +
+ e.preventDefault()} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault() + setShowDropdown(!showDropdown) + } + }} + > + {props.children ?? props.label} + + +
    + {items.map((childItemProps, i) => ( + + ))} +
+
+ ) +} + +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 ( +
  • + { + e.preventDefault() + toggleCollapsed() + }} + > + {props.children ?? props.label} + + + {items.map((childItemProps, i) => ( + + ))} + +
    • + ) +} +export default function DropdownNavbarItem({ mobile = false, ...props }) { + const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop + //@ts-ignore + return +} diff --git a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 9dbcaea..b503ac1 100644 --- a/packages/logos-docusaurus-theme/src/client/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/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 ( Date: Tue, 30 May 2023 01:53:53 +0900 Subject: [PATCH 5/6] update inline code css --- packages/logos-docusaurus-theme/src/client/css/custom.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index f311bbf..bc044a8 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -359,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 */ From 6fc3121100274fb87347fb147ca4bcee51d99721 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 30 May 2023 02:10:39 +0900 Subject: [PATCH 6/6] update page nav buttons --- .../src/client/components/Icon/Icon.tsx | 14 +++++++++ .../src/client/css/custom.scss | 21 ++++++++++++++ .../src/client/static/icons/arrow-left.svg | 3 ++ .../src/client/static/icons/arrow-right.svg | 3 ++ .../client/theme/PaginatorNavLink/index.tsx | 29 +++++++++++++++++++ 5 files changed, 70 insertions(+) create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg create mode 100644 packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg create mode 100644 packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx diff --git a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx b/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx index 8d2511d..a8299c4 100644 --- a/packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx +++ b/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 => ( ) +export const IconArrowRight = (props: TIconProps): JSX.Element => ( + + + +) + +export const IconArrowLeft = (props: TIconProps): JSX.Element => ( + + + +) + export const IconFolder = (props: TIconProps): JSX.Element => ( diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss index bc044a8..5ba0f33 100644 --- a/packages/logos-docusaurus-theme/src/client/css/custom.scss +++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss @@ -559,6 +559,27 @@ div.w-10 > a:not(:last-child) { 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); diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg new file mode 100644 index 0000000..51142a1 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg new file mode 100644 index 0000000..5c92dbb --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/static/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/PaginatorNavLink/index.tsx new file mode 100644 index 0000000..923cf7c --- /dev/null +++ b/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 ( + + {!isNext ? : null} + + {title} + + {isNext ? : null} + + ) +}