zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Updates to use dynamic/responsive styles on web (#1351)

Browse source 
* Move most responsive queries to the hook

* Fix invalid CSS value

* Fixes to tablet render of post thread

* Fix overflow issues on web

* Fix search header on tablet

* Fix QP margin in web composer

* Fix: only apply double gutter once to flatlist (close #1368)

* Fix styles on discover feeds header

* Fix double discover links in multifeed
This commit is contained in:
Paul Frazee 2023-09-05 10:42:19 -07:00 • committed by GitHub
parent be8084ae10
commit 764c7cd569
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
63 changed files with 762 additions and 461 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/lib/hooks/useWebMediaQueries.tsx
View file

@ -2,13 +2,19 @@ import {useMediaQuery} from 'react-responsive'
import {isNative} from 'platform/detection'
export function useWebMediaQueries() {
const isDesktop = useMediaQuery({
query: '(min-width: 1224px)',
})
const isTabletOrMobile = useMediaQuery({query: '(max-width: 1224px)'})
const isMobile = useMediaQuery({query: '(max-width: 800px)'})
const isDesktop = useMediaQuery({minWidth: 1300})
const isTablet = useMediaQuery({minWidth: 800, maxWidth: 1300})
const isMobile = useMediaQuery({maxWidth: 800})
const isTabletOrMobile = isMobile || isTablet
const isTabletOrDesktop = isDesktop || isTablet
if (isNative) {
return {isMobile: true, isTabletOrMobile: true, isDesktop: false}
return {
isMobile: true,
isTablet: false,
isTabletOrMobile: true,
isTabletOrDesktop: false,
isDesktop: false,
}
}
return {isMobile, isTabletOrMobile, isDesktop}
return {isMobile, isTablet, isTabletOrMobile, isTabletOrDesktop, isDesktop}
}