Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-30 20:35:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix PWA searchbar padding

Browse source
This commit is contained in:
Pas 2025-12-05 16:06:08 -07:00
parent c1bdcdf9df
commit 84b1de91c4
3 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/hooks/useIsMobile.ts
View file

@ -28,3 +28,11 @@ export function useIsMobile(horizontal?: boolean) {
isMobile, isMobile,
}; };
} }
export function useIsPWA() {
return window.matchMedia("(display-mode: standalone)").matches;
}
export function useIsIOS() {
return /iPad|iPhone|iPod/.test(navigator.userAgent);
}

10
src/pages/Settings.tsx
View file

@ -22,7 +22,7 @@ import { Heading1 } from "@/components/utils/Text";
import { Transition } from "@/components/utils/Transition"; import { Transition } from "@/components/utils/Transition";
import { useAuth } from "@/hooks/auth/useAuth"; import { useAuth } from "@/hooks/auth/useAuth";
import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
import { useIsMobile } from "@/hooks/useIsMobile"; import { useIsIOS, useIsMobile, useIsPWA } from "@/hooks/useIsMobile";
import { useSettingsState } from "@/hooks/useSettingsState"; import { useSettingsState } from "@/hooks/useSettingsState";
import { AccountActionsPart } from "@/pages/parts/settings/AccountActionsPart"; import { AccountActionsPart } from "@/pages/parts/settings/AccountActionsPart";
import { AccountEditPart } from "@/pages/parts/settings/AccountEditPart"; import { AccountEditPart } from "@/pages/parts/settings/AccountEditPart";
@ -60,11 +60,17 @@ function SettingsLayout(props: {
const searchRef = useRef<HTMLInputElement>(null); const searchRef = useRef<HTMLInputElement>(null);
const bannerSize = useBannerSize(); const bannerSize = useBannerSize();
const isPWA = useIsPWA();
const isIOS = useIsIOS();
const isIOSPWA = isIOS && isPWA;
// Navbar height is 80px (h-20) // Navbar height is 80px (h-20)
const navbarHeight = 80; const navbarHeight = 80;
// On desktop: inline with navbar (same top position + 14px adjustment) // On desktop: inline with navbar (same top position + 14px adjustment)
// On mobile: below navbar (navbar height + banner) // On mobile: below navbar (navbar height + banner)
const topOffset = isMobile ? navbarHeight + bannerSize : bannerSize + 14; const topOffset = isMobile
? navbarHeight + bannerSize + (isIOSPWA ? 34 : 0)
: bannerSize + 14;
return ( return (
<WideContainer ultraWide classNames="overflow-visible"> <WideContainer ultraWide classNames="overflow-visible">

12
src/pages/parts/home/HeroPart.tsx
View file

@ -6,7 +6,7 @@ import { SearchBarInput } from "@/components/form/SearchBar";
import { ThinContainer } from "@/components/layout/ThinContainer"; import { ThinContainer } from "@/components/layout/ThinContainer";
import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; import { useSlashFocus } from "@/components/player/hooks/useSlashFocus";
import { HeroTitle } from "@/components/text/HeroTitle"; import { HeroTitle } from "@/components/text/HeroTitle";
import { useIsMobile } from "@/hooks/useIsMobile"; import { useIsIOS, useIsMobile, useIsPWA } from "@/hooks/useIsMobile";
import { useIsTV } from "@/hooks/useIsTv"; import { useIsTV } from "@/hooks/useIsTv";
import { useRandomTranslation } from "@/hooks/useRandomTranslation"; import { useRandomTranslation } from "@/hooks/useRandomTranslation";
import { useSearchQuery } from "@/hooks/useSearchQuery"; import { useSearchQuery } from "@/hooks/useSearchQuery";
@ -55,11 +55,17 @@ export function HeroPart({
[setIsSticky], [setIsSticky],
); );
const isPWA = useIsPWA();
const isIOS = useIsIOS();
const isIOSPWA = isIOS && isPWA;
// Navbar height is 80px (h-20) // Navbar height is 80px (h-20)
const navbarHeight = 80; const navbarHeight = 80;
// On desktop: inline with navbar (same top position) // On desktop: inline with navbar (same top position + 14px adjustment)
// On mobile: below navbar (navbar height + banner) // On mobile: below navbar (navbar height + banner)
const topOffset = isMobile ? navbarHeight + bannerSize : bannerSize + 14; const topOffset = isMobile
? navbarHeight + bannerSize + (isIOSPWA ? 34 : 0)
: bannerSize + 14;
const time = getTimeOfDay(new Date()); const time = getTimeOfDay(new Date());
const title = randomT(`home.titles.${time}`); const title = randomT(`home.titles.${time}`);