From 4ea557ccb4f6178ebea0ccadf5fe1fef58e57397 Mon Sep 17 00:00:00 2001 From: amirhouieh Date: Mon, 28 Aug 2023 19:29:39 +0200 Subject: [PATCH 1/3] adjust missing details from notion --- src/components/Footer/Footer.Link.tsx | 12 +++++++++--- src/components/Footer/Footer.tsx | 2 +- src/components/PostCard/PostCard.tsx | 11 ++++++++++- src/components/PostCard/PostResultCard.tsx | 2 +- src/components/Search/SearchResultList.Posts.tsx | 1 + src/containers/Search/ExploreView.tsx | 12 ++++++++---- src/pages/search.tsx | 8 +++++++- 7 files changed, 37 insertions(+), 11 deletions(-) diff --git a/src/components/Footer/Footer.Link.tsx b/src/components/Footer/Footer.Link.tsx index a88ba51..f39b2f3 100644 --- a/src/components/Footer/Footer.Link.tsx +++ b/src/components/Footer/Footer.Link.tsx @@ -5,10 +5,16 @@ export const FooterLink = styled(Typography)` width: fit-content; &:not(:last-child) { &:after { - content: '•'; - margin-left: 8px; - text-decoration: none; + width: 2px; + height: 2px; + background: rgb(var(--lsd-surface-secondary)); display: inline-block; + content: ' '; + margin-left: 8px; + border-radius: 50%; + transform: translateY(-2px); + //text-decoration: none; + //display: inline-block; } } ` diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 3a582de..1c0e349 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -17,7 +17,7 @@ export default function Footer() { - Back to up ↑ + Back to top ↑ ) diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index 5944510..75b9a75 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -407,6 +407,15 @@ PostCard.styles = { .show-details__logo { width: 16px; } + .post-card__label { + margin-bottom: 0; + } + + .post-card__title { + margin-bottom: -8px; + margin-top: -8px; + } + .show-details__title { ${lsdUtils.typography('subtitle3')} } @@ -418,7 +427,7 @@ PostCard.styles = { padding: 24px 0; display: grid; - gap: 8px 16px; + gap: 16px 16px; grid-template-columns: repeat(7, 1fr); &.post-card__article { diff --git a/src/components/PostCard/PostResultCard.tsx b/src/components/PostCard/PostResultCard.tsx index b26202e..b0484ba 100644 --- a/src/components/PostCard/PostResultCard.tsx +++ b/src/components/PostCard/PostResultCard.tsx @@ -98,7 +98,7 @@ const Container = styled.div` gap: 16px 0; .post-card__label { - margin-bottom: -8px; + margin-bottom: 0 !important; } .post-card__title { diff --git a/src/components/Search/SearchResultList.Posts.tsx b/src/components/Search/SearchResultList.Posts.tsx index 388e2b1..cd5bc6d 100644 --- a/src/components/Search/SearchResultList.Posts.tsx +++ b/src/components/Search/SearchResultList.Posts.tsx @@ -16,6 +16,7 @@ export const SearchResultListPosts = ({ posts, shows }: Props) => { data={{ ...data, coverImage: post.type === 'podcast' ? data.coverImage : undefined, + authors: [], }} className={'post-card__search-result'} size={'large'} diff --git a/src/containers/Search/ExploreView.tsx b/src/containers/Search/ExploreView.tsx index 13d8ae5..3934647 100644 --- a/src/containers/Search/ExploreView.tsx +++ b/src/containers/Search/ExploreView.tsx @@ -101,10 +101,13 @@ export const SearchResultsExploreView = (props: Props) => { case LPE.ContentTypes.Podcast: return ( @@ -118,6 +121,7 @@ export const SearchResultsExploreView = (props: Props) => { shows, ), coverImage: null, + authors: [], }} size={'medium'} contentType={result.type as LPE.PostType} diff --git a/src/pages/search.tsx b/src/pages/search.tsx index bfde0c4..d4874a2 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -101,7 +101,13 @@ export default function SearchPage({ topics, shows }: SearchPageProps) { SearchPage.getLayout = (page: ReactNode) => ( - {page} + + {page} + ) From 1be47766a5b6d99da19c2fba04a4836d56397ca5 Mon Sep 17 00:00:00 2001 From: amirhouieh Date: Mon, 28 Aug 2023 19:38:15 +0200 Subject: [PATCH 2/3] make search list scrollable separately --- src/containers/Search/ListView.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/containers/Search/ListView.tsx b/src/containers/Search/ListView.tsx index c650dde..de9bc49 100644 --- a/src/containers/Search/ListView.tsx +++ b/src/containers/Search/ListView.tsx @@ -9,6 +9,7 @@ import { SearchResultTopPost } from '@/components/Search/SearchResult.TopPost' import { SearchResultListBlocks } from '@/components/Search/SearchResult.Blocks' import { Typography } from '@acid-info/lsd-react' import { lsdUtils } from '@/utils/lsd.utils' +import { uiConfigs } from '@/configs/ui.configs' interface Props { posts: LPE.Search.ResultItemBase[] @@ -107,12 +108,12 @@ export const SearchResultsListView = (props: Props) => { {renderBlocks.length > 0 ? ( - <> + - + ) : ( !busy && ( @@ -144,3 +145,10 @@ const PostsListHeader = styled.div`` const PostsListContent = styled.div`` const BlocksList = styled(GridItem)`` + +const BlockListSticky = styled.div` + position: sticky; + top: ${uiConfigs.navbarRenderedHeight * 2 + 12}px; + height: 100vh; + overflow-y: auto; +` From 8975e192b79a70c9e675c07b5c51a0fb25c6ed40 Mon Sep 17 00:00:00 2001 From: amirhouieh Date: Mon, 28 Aug 2023 20:01:02 +0200 Subject: [PATCH 3/3] detailing based on notion --- src/components/NavBar/NavBar.tsx | 1 + src/components/PostCard/PostCard.tsx | 11 +++++++++++ src/containers/Search/ExploreView.tsx | 4 ++-- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx index e1b26f8..fd02238 100644 --- a/src/components/NavBar/NavBar.tsx +++ b/src/components/NavBar/NavBar.tsx @@ -105,6 +105,7 @@ export default function NavBar({ defaultState }: NavBarProps) { } const PressLogoType = styled(Typography)<{ display: boolean }>` + text-transform: uppercase; ${(props) => !props.display && css` diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx index 75b9a75..86d817e 100644 --- a/src/components/PostCard/PostCard.tsx +++ b/src/components/PostCard/PostCard.tsx @@ -244,6 +244,12 @@ PostCard.styles = { ${PostCardShowDetails.styles.large(theme)} } + &.post-card__search-explore { + .post-card__title h3 { + ${lsdUtils.typography('h6')} + } + } + ${lsdUtils.breakpoint(theme, 'md', 'down')} { .post-card__title-text { ${lsdUtils.typography('h5')} @@ -394,6 +400,10 @@ PostCard.styles = { } } + &.post-card__search-explore { + opacity: 0.5; + } + &.post-card__search-result { .post-card__subtitle { grid-area: info; @@ -445,6 +455,7 @@ PostCard.styles = { .post-card__title h3 { ${lsdUtils.typography('h6')} } + &.top-post { .post-card__title h3 { ${lsdUtils.typography('h4')} diff --git a/src/containers/Search/ExploreView.tsx b/src/containers/Search/ExploreView.tsx index 3934647..44189e7 100644 --- a/src/containers/Search/ExploreView.tsx +++ b/src/containers/Search/ExploreView.tsx @@ -108,8 +108,8 @@ export const SearchResultsExploreView = (props: Props) => { ), authors: [], }} - size={'medium'} contentType={result.type as LPE.PostType} + className={'post-card__search-explore'} /> ) case LPE.ContentTypes.Article: @@ -123,8 +123,8 @@ export const SearchResultsExploreView = (props: Props) => { coverImage: null, authors: [], }} - size={'medium'} contentType={result.type as LPE.PostType} + className={'post-card__search-explore'} /> ) case LPE.ContentTypes.Image: