[#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

View File

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

View File

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