From 3eea66a23bde79fb64e8e3565a6b8f6d61d73fd2 Mon Sep 17 00:00:00 2001 From: amirhouieh Date: Tue, 16 May 2023 22:56:44 +0200 Subject: [PATCH] last detailing --- .../{Navbar/Navbar.tsx => AppBar/AppBar.tsx} | 27 +++--- .../{Navbar => AppBar}/NavbarFiller.tsx | 0 src/components/AppBar/index.ts | 1 + src/components/Article/Article.Body.tsx | 6 -- src/components/Article/Article.Heading.tsx | 4 +- .../Article/Header/Article.Header.tsx | 90 ++++++++++++++----- .../Article/Header/Article.Summary.tsx | 38 ++------ src/components/Hero/Hero.tsx | 3 +- src/components/Main/Main.tsx | 8 +- src/components/Navbar/index.ts | 1 - src/components/Post/Post.tsx | 25 ++++-- src/components/PostList/PostList.tsx | 1 + .../RelatedArticles/RelatedArticles.tsx | 4 +- src/components/Searchbar/Searchbar.tsx | 21 +++-- .../Searchbar/SearchbarContainer.tsx | 20 ++++- src/components/Section/Section.tsx | 4 - src/components/Tags/Tags.tsx | 4 +- src/configs/ui.configs.ts | 2 +- src/layouts/ArticleLayout/Article.layout.tsx | 7 +- src/layouts/DefaultLayout/Default.layout.tsx | 29 +++--- src/layouts/SearchLayout/Search.layout.tsx | 22 +++-- src/pages/article/[slug].tsx | 1 - src/pages/search.tsx | 7 +- src/services/search.service.ts | 4 - src/utils/ui.utils.ts | 1 + 25 files changed, 195 insertions(+), 135 deletions(-) rename src/components/{Navbar/Navbar.tsx => AppBar/AppBar.tsx} (91%) rename src/components/{Navbar => AppBar}/NavbarFiller.tsx (100%) create mode 100644 src/components/AppBar/index.ts delete mode 100644 src/components/Navbar/index.ts diff --git a/src/components/Navbar/Navbar.tsx b/src/components/AppBar/AppBar.tsx similarity index 91% rename from src/components/Navbar/Navbar.tsx rename to src/components/AppBar/AppBar.tsx index 72477be..b700c36 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -12,19 +12,19 @@ import { useScrollDirection } from '@/utils/ui.utils' import { useRouter } from 'next/router' import { useSearchBarContext } from '@/context/searchbar.context' -interface NavbarProps { +interface AppBarProps { isDark: boolean toggle: () => void onSearch?: (query: string, tags: string[]) => void onReset?: () => void } -export default function Navbar({ +export default function AppBar({ isDark, toggle, onReset, onSearch, -}: NavbarProps) { +}: AppBarProps) { const { resultsNumber } = useSearchBarContext() const { pathname } = useRouter() const isSearchPage = pathname === '/search' @@ -52,7 +52,7 @@ export default function Navbar({ return ( - + @@ -69,10 +69,10 @@ export default function Navbar({ size="small" onClick={() => onSearchIconClick()} > - + - + @@ -92,8 +92,8 @@ const Container = styled.div` transition: top 0.2s; position: fixed; top: 0; - left: 0; z-index: 101; + left: calc(calc(100% - ${uiConfigs.maxContainerWidth}px) / 2); &._page { @media (min-width: 768px) { @@ -110,7 +110,14 @@ const Container = styled.div` &.search_page { } + @media (max-width: ${uiConfigs.maxContainerWidth}px) { + left: 16px; + width: calc(100% - 32px); + } + @media (max-width: 768px) { + left: 0; + width: 100%; &.hide { top: -44px; } @@ -137,7 +144,7 @@ const MobileSearchContainer = styled.div` } ` -const AppBar = styled.nav` +const NavBar = styled.nav` display: flex; padding: 8px 0; align-items: center; @@ -204,7 +211,3 @@ const Icons = styled.div` } } ` - -const Selector = styled(IconButton)` - border-left: none; -` diff --git a/src/components/Navbar/NavbarFiller.tsx b/src/components/AppBar/NavbarFiller.tsx similarity index 100% rename from src/components/Navbar/NavbarFiller.tsx rename to src/components/AppBar/NavbarFiller.tsx diff --git a/src/components/AppBar/index.ts b/src/components/AppBar/index.ts new file mode 100644 index 0000000..44b3413 --- /dev/null +++ b/src/components/AppBar/index.ts @@ -0,0 +1 @@ +export { default as AppBar } from './AppBar' diff --git a/src/components/Article/Article.Body.tsx b/src/components/Article/Article.Body.tsx index e8632d8..fa96542 100644 --- a/src/components/Article/Article.Body.tsx +++ b/src/components/Article/Article.Body.tsx @@ -43,13 +43,7 @@ const ArticleContainer = styled.article` flex-direction: column; gap: 16px; max-width: 700px; - margin-inline: 5%; padding-bottom: 80px; - - // temporary breakpoint - @media (max-width: 1024px) { - margin-inline: 16px; - } ` const TextContainer = styled.div` diff --git a/src/components/Article/Article.Heading.tsx b/src/components/Article/Article.Heading.tsx index a55b15b..d108db3 100644 --- a/src/components/Article/Article.Heading.tsx +++ b/src/components/Article/Article.Heading.tsx @@ -18,6 +18,7 @@ export const ArticleHeading = ({ block, headingElementsRef, typographyProps, + ...props }: Props) => { const id = extractIdFromFirstTag(block.html) || `${block.tagName}-${block.order}` @@ -37,6 +38,7 @@ export const ArticleHeading = ({ className={extractClassFromFirstTag(block.html) || ''} dangerouslySetInnerHTML={{ __html: `${extractInnerHtml(block.html)}` }} {...(typographyProps || {})} + {...props} /> ) @@ -48,7 +50,7 @@ const Headline = styled(Typography)` @media (max-width: 768px) { &.title { - font-size: var(--lsd-h3-fontSize); + font-size: var(--lsd-h4-fontSize); line-height: var(--lsd-h4-lineHeight); } diff --git a/src/components/Article/Header/Article.Header.tsx b/src/components/Article/Header/Article.Header.tsx index 84fa514..7ef4076 100644 --- a/src/components/Article/Header/Article.Header.tsx +++ b/src/components/Article/Header/Article.Header.tsx @@ -6,7 +6,7 @@ import { PostImageRatio } from '../../Post/Post' import ArticleStats from '../Article.Stats' import { Typography } from '@acid-info/lsd-react' import styled from '@emotion/styled' -import ArticleSummary, { MobileSummary } from './Article.Summary' +import ArticleSummary from './Article.Summary' import { calcReadingTime } from '@/utils/string.utils' import { Authors } from '@/components/Authors' import { Tags } from '@/components/Tags' @@ -14,12 +14,8 @@ import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types' import { ArticleHeading } from '@/components/Article/Article.Heading' import { useArticleContainerContext } from '@/containers/ArticleContainer.Context' import { useIntersectionObserver } from '@/utils/ui.utils' -import { MobileToc } from '@/components/Article/Article.MobileToc' -import { useSearchBarContext } from '@/context/searchbar.context' const ArticleHeader = ({ - title, - toc, summary, subtitle, mentions, @@ -27,9 +23,8 @@ const ArticleHeader = ({ modifiedAt, blocks, }: GoogleDocEnhanced) => { - const { setTocId, tocId } = useArticleContainerContext() + const { setTocId } = useArticleContainerContext() const headingElementsRef = useIntersectionObserver(setTocId) - const { resultsNumber } = useSearchBarContext() const _thumbnail = useMemo(() => { const coverImage = getArticleCover(blocks) @@ -58,15 +53,14 @@ const ArticleHeader = ({ }, [blocks]) return ( -
+ - @@ -79,22 +73,60 @@ const ArticleHeader = ({ {subtitle} )} - + - - {resultsNumber === null && } - {resultsNumber === null && } - + {/**/} + {/* {resultsNumber === null && }*/} + {/* {resultsNumber === null && }*/} + {/**/} + {_thumbnail} - -
+ + ) } -const MobileCollapseContainer = styled.div` - margin-bottom: 32px; +const ArticleHeaderContainer = styled.header` + .mobileSummary { + display: none; + } + + .desktopSummary { + display: block; + } + + @media (max-width: 768px) { + .mobileSummary { + color: red; + display: block; + p { + font-size: var(--lsd-body3-fontSize); + line-height: var(--lsd-body3-lineHeight); + margin-bottom: 24px; + } + hr { + display: none; + } + } + + .desktopSummary { + display: none; + } + + .articleTags { + display: none; + } + } ` const CustomTypography = styled(Typography)` @@ -103,18 +135,34 @@ const CustomTypography = styled(Typography)` white-space: pre-wrap; ` -const ArticleTitle = styled(CustomTypography)` - margin-bottom: 24px; +const ArticleTitle = styled(ArticleHeading)` + margin-bottom: 16px; + @media (max-width: 768px) { + margin-bottom: 8px; + } ` const ArticleSubtitle = styled(CustomTypography)` margin-bottom: 16px; + + @media (max-width: 768px) { + font-size: var(--lsd-subtitle1-fontSize); + } ` const AuthorsContainer = styled.div` //margin-block: 24px; margin-top: 24px; margin-bottom: 32px; + + @media (max-width: 768px) { + margin-top: 16px; + margin-bottom: 24px; + + a[href^='mailto:'] { + display: none; + } + } ` export default ArticleHeader diff --git a/src/components/Article/Header/Article.Summary.tsx b/src/components/Article/Header/Article.Summary.tsx index 31a3fcd..434bec0 100644 --- a/src/components/Article/Header/Article.Summary.tsx +++ b/src/components/Article/Header/Article.Summary.tsx @@ -4,24 +4,14 @@ import React from 'react' import { Collapse } from '@/components/Collapse' import useIsDarkState from '@/states/isDarkState/isDarkState' -export const MobileSummary = ({ summary }: { summary: string }) => { - const isDark = useIsDarkState().get() - return ( - - - {summary} - - - ) +type Props = { + summary: string + className?: string + showLabel?: boolean } - -const ArticleSummary = ({ summary }: { summary: string }) => ( - - summary +const ArticleSummary = ({ summary, className, showLabel }: Props) => ( + + {showLabel && summary} {summary} @@ -35,6 +25,7 @@ const ArticleSummaryContainer = styled('div')` @media (max-width: 770px) { display: none; } + > span { margin-bottom: 16px; display: block; @@ -46,17 +37,4 @@ const SummaryParagraph = styled(Typography)` display: block; ` -const SummaryContainerMobile = styled(Collapse)` - display: none; - @media (max-width: 770px) { - display: block; - p { - padding: 12px 14px; - margin-bottom: 0; - font-size: var(--lsd-font-size-body2); - line-height: var(--lsd-line-height-body2); - } - } -` - export default ArticleSummary diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx index b38fdf6..f3d02d3 100644 --- a/src/components/Hero/Hero.tsx +++ b/src/components/Hero/Hero.tsx @@ -1,7 +1,7 @@ import { Typography } from '@acid-info/lsd-react' import styled from '@emotion/styled' import { uiConfigs } from '@/configs/ui.configs' -import { NavbarFiller } from '@/components/Navbar/NavbarFiller' +import { NavbarFiller } from '@/components/AppBar/NavbarFiller' import { Searchbar } from '@/components/Searchbar' export default function Hero() { @@ -18,7 +18,6 @@ export default function Hero() { - ) } diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index 8738bd8..5af0e35 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -2,8 +2,8 @@ import styled from '@emotion/styled' import { uiConfigs } from '@/configs/ui.configs' import { PropsWithChildren } from 'react' -const Main = ({ children }: PropsWithChildren) => { - return {children} +const Main = ({ children, ...props }: PropsWithChildren) => { + return {children} } const Container = styled.main` @@ -11,6 +11,10 @@ const Container = styled.main` margin-left: auto; margin-right: auto; + @media (max-width: ${uiConfigs.maxContainerWidth}px) { + padding: 0 16px; + } + @media (max-width: 768px) { margin-top: ${uiConfigs.postSectionMobileMargin}px; } diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts deleted file mode 100644 index 2fc16d5..0000000 --- a/src/components/Navbar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Navbar } from './Navbar'; \ No newline at end of file diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx index 32484ac..9187724 100644 --- a/src/components/Post/Post.tsx +++ b/src/components/Post/Post.tsx @@ -137,13 +137,20 @@ export default function Post({ const _thumbnail = useMemo(() => { if (!showImage || !coverImage) return null + let allImageProps = [ + ...imagePropsArray, + ...(imageProps ? [imageProps] : []), + ] + if (postType === PostType.BODY) { return ( - {[...imagePropsArray, ...(imageProps ? [imageProps] : [])].map( - (imageProps, index) => ( - - ), + {allImageProps.length > 0 ? ( + allImageProps.map((_imageProps, index) => ( + + )) + ) : ( + )} ) @@ -151,14 +158,16 @@ export default function Post({ return ( <> - {[...imagePropsArray, ...(imageProps ? [imageProps] : [])].map( - (imageProps, index) => ( + {allImageProps.length > 0 ? ( + allImageProps.map((_imageProps, index) => ( - ), + )) + ) : ( + )} {_title} diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx index c36da99..343314b 100644 --- a/src/components/PostList/PostList.tsx +++ b/src/components/PostList/PostList.tsx @@ -79,6 +79,7 @@ const CustomGrid = styled(Grid)` min-height: 500px; @media (max-width: 768px) { gap: 8px; + min-height: auto; } ` diff --git a/src/components/RelatedArticles/RelatedArticles.tsx b/src/components/RelatedArticles/RelatedArticles.tsx index b2d5a4c..1e66b45 100644 --- a/src/components/RelatedArticles/RelatedArticles.tsx +++ b/src/components/RelatedArticles/RelatedArticles.tsx @@ -29,7 +29,9 @@ export default function RelatedArticles({ data }: Props) { tags: article.doc.tags, coverImage: getArticleCover(article.doc.blocks), }))} - pageSize={4} + pageSize={ + typeof window !== 'undefined' && window.innerWidth < 768 ? 2 : 4 + } loading={data.loading} /> } diff --git a/src/components/Searchbar/Searchbar.tsx b/src/components/Searchbar/Searchbar.tsx index 86bd854..f80daf9 100644 --- a/src/components/Searchbar/Searchbar.tsx +++ b/src/components/Searchbar/Searchbar.tsx @@ -103,7 +103,6 @@ export default function Searchbar(props: SearchbarProps) { performSearch('', []) return } - setQuery('') setFilterTags([]) setActive(false) @@ -126,7 +125,8 @@ export default function Searchbar(props: SearchbarProps) { } } - const isCollapsed = isValidSearchInput(filterTags) && !active + const withValue = isValidSearchInput(filterTags) || resultsNumber !== null + const isCollapsed = withValue && !active useEffect(() => { if (active && query.length > 0) { @@ -203,11 +203,13 @@ export default function Searchbar(props: SearchbarProps) {
- isValidSearchInput() ? performClear() : performSearch() - } + onClick={() => (withValue ? performClear() : performSearch())} > - {isValidSearchInput() ? : } + {withValue ? ( + + ) : ( + + )}
@@ -231,8 +233,10 @@ export default function Searchbar(props: SearchbarProps) { variant={'subtitle2'} dangerouslySetInnerHTML={{ __html: [ - `${resultsNumber} matches`, - `${resultsHelperText}`, + ...(resultsNumber !== null ? [`${resultsNumber} matches`] : []), + ...(resultsHelperText !== null + ? [`${resultsHelperText}`] + : []), ].join('.'), }} /> @@ -249,6 +253,7 @@ const TagsWrapper = styled.div` margin-top: 19px; height: 24px; } + @media (max-width: 768px) { &.active { margin-top: 10px; diff --git a/src/components/Searchbar/SearchbarContainer.tsx b/src/components/Searchbar/SearchbarContainer.tsx index 7a7c56f..8e483df 100644 --- a/src/components/Searchbar/SearchbarContainer.tsx +++ b/src/components/Searchbar/SearchbarContainer.tsx @@ -20,10 +20,6 @@ export function SearchbarContainer({ className, beSticky = false, }: Props) { - const { pathname } = useRouter() - const isSearchPage = pathname === '/search' - const isArticlePage = pathname === '/article/[slug]' - const { sticky, stickyRef, height } = useSticky( uiConfigs.navbarRenderedHeight, ) @@ -74,9 +70,25 @@ const SearchBarWrapper = styled.div` &.sticky { position: fixed; + top: ${uiConfigs.navbarRenderedHeight - 1}px; z-index: 100; max-width: ${uiConfigs.maxContainerWidth}px; border-top: none; } + + @media (max-width: ${uiConfigs.maxContainerWidth}px) { + &.sticky { + width: calc(100% - 32px); + left: 16px; + } + } + + @media (max-width: 768px) { + &.sticky { + width: 100%; + left: 0; + top: 0; + } + } ` diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx index b9db8b7..3f2d041 100644 --- a/src/components/Section/Section.tsx +++ b/src/components/Section/Section.tsx @@ -35,10 +35,6 @@ export const Section = ({ title, subtitle, children, ...props }: Props) => { const SectionContainer = styled.section` width: 100%; box-sizing: border-box; - - @media (max-width: 1440px) { - padding-inline: 16px; - } ` const Container = styled.div` diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx index 8cb1067..4891ca3 100644 --- a/src/components/Tags/Tags.tsx +++ b/src/components/Tags/Tags.tsx @@ -4,13 +4,13 @@ import styled from '@emotion/styled' import Link from 'next/link' import { useRouter } from 'next/router' -const Tags = ({ tags }: { tags: string[] }) => { +const Tags = ({ tags, className }: { tags: string[]; className?: string }) => { const router = useRouter() const { query } = router const { topics } = query return tags.length > 0 ? ( - + {tags.map((tag, idx) => ( void @@ -19,7 +16,7 @@ export default function ArticleLayout({ children }: Props) { return ( <>
- ) { const isDarkState = useIsDarkState() return ( <> -
-
- +
+
- -
+ +
{props.children}