Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-05-30 19:54:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Allow the login page to be scrolled

Browse Source
This commit is contained in:
Zoe Roux 2023-06-06 15:41:51 +09:00
parent 6349763abc
commit 86533153bf
1 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
front/packages/ui/src/login/form.tsx
View File

@ -20,7 +20,7 @@
import { ts } from "@kyoo/primitives"; import { ts } from "@kyoo/primitives";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { ImageBackground, ImageProps, Platform, View } from "react-native"; import { ScrollView, ImageBackground, ImageProps, Platform, View } from "react-native";
import Svg, { SvgProps, Path } from "react-native-svg"; import Svg, { SvgProps, Path } from "react-native-svg";
import { min, percent, px, Stylable, useYoshiki, vh, vw } from "yoshiki/native"; import { min, percent, px, Stylable, useYoshiki, vh, vw } from "yoshiki/native";
@ -28,7 +28,7 @@ const SvgBlob = (props: SvgProps) => {
const { css, theme } = useYoshiki(); const { css, theme } = useYoshiki();
return ( return (
<View {...css({ width: percent(100), aspectRatio: 5 / 6 }, props)}> <View {...css({ width: min(vh(90), px(1200)), aspectRatio: 5 / 6 }, props)}>
<Svg width="100%" height="100%" viewBox="0 0 500 600"> <Svg width="100%" height="100%" viewBox="0 0 500 600">
<Path <Path
d="M459.7 0c-20.2 43.3-40.3 86.6-51.7 132.6-11.3 45.9-13.9 94.6-36.1 137.6-22.2 43-64.1 80.3-111.5 88.2s-100.2-13.7-144.5-1.8C71.6 368.6 35.8 414.2 0 459.7V0h459.7z" d="M459.7 0c-20.2 43.3-40.3 86.6-51.7 132.6-11.3 45.9-13.9 94.6-36.1 137.6-22.2 43-64.1 80.3-111.5 88.2s-100.2-13.7-144.5-1.8C71.6 368.6 35.8 414.2 0 459.7V0h459.7z"
@ -61,26 +61,14 @@ export const FormPage = ({ children, ...props }: { children: ReactNode } & Styla
backgroundColor: (theme) => theme.dark.background, backgroundColor: (theme) => theme.dark.background,
})} })}
> >
<View <SvgBlob {...css({ position: "absolute", top: 0, left: 0 })} />
<ScrollView
{...css({ {...css({
width: min(vh(90), px(1200)), paddingHorizontal: ts(3),
height: min(vh(90), px(1200)),
})} })}
> >
<SvgBlob {...css({ position: "absolute", top: 0, left: 0 })} /> <View {...css({ maxWidth: px(600) }, props)}>{children}</View>
<View </ScrollView>
{...css(
{
width: percent(75),
paddingHorizontal: ts(3),
maxWidth: vw(100),
},
props,
)}
>
{children}
</View>
</View>
</ImageBackground> </ImageBackground>
); );
}; };