acid-info
/
logos-press-engine
mirror of https://github.com/acid-info/logos-press-engine.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[#121] add design style for mobile search

This commit is contained in:
amirhouieh 2023-08-28 18:42:12 +02:00
parent 6d587d498a
commit c6614f544f
2 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Search/SearchResult.TopPost.tsx
View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled'
import { PostCard } from '@/components/PostCard'
import { SearchResultTopPostBlocks } from '@/components/Search/SearchResult.TopPost.Blocks'
import { Typography } from '@acid-info/lsd-react'
import { lsdUtils } from '@/utils/lsd.utils'
interface Props {
post: LPE.Search.ResultItemBase<LPE.Post.Document>
@ -29,4 +30,8 @@ export const SearchResultTopPost = ({ post, shows, blocks }: Props) => {
const Container = styled.div`
padding: 24px 0;
${({ theme }) => lsdUtils.breakpoint(theme, 'xs', 'exact')} {
padding: 0;
}
`

7
src/containers/Search/ListView.tsx
View File

@ -8,6 +8,7 @@ import { useMemo } from 'react'
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'
interface Props {
posts: LPE.Search.ResultItemBase<LPE.Post.Document>[]
@ -126,12 +127,18 @@ export const SearchResultsListView = (props: Props) => {
const Container = styled(Grid)`
padding-top: 56px;
${({ theme }) => lsdUtils.breakpoint(theme, 'xs', 'exact')} {
padding-top: 32px;
}
`
const PostsList = styled(GridItem)`
display: flex;
flex-direction: column;
gap: 56px;
${({ theme }) => lsdUtils.breakpoint(theme, 'xs', 'exact')} {
gap: 32px;
}
`
const PostsListHeader = styled.div``
const PostsListContent = styled.div``