Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 01:41:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mobile responsive onboarding start

Browse Source
This commit is contained in:
mrjvs 2024-01-24 14:17:23 +01:00
parent a91e2b6e2e
commit 8abcd6c43a
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/pages/onboarding/Onboarding.tsx
View File

@ -39,7 +39,7 @@ export function OnboardingPage() {
<Paragraph className="!mt-1 !mb-12"> <Paragraph className="!mt-1 !mb-12">
{t("onboarding.defaultConfirm.description")} {t("onboarding.defaultConfirm.description")}
</Paragraph> </Paragraph>
<div className="flex items-end justify-between"> <div className="flex flex-col-reverse gap-3 md:flex-row md:justify-between">
<Button theme="secondary" onClick={skipModal.hide}> <Button theme="secondary" onClick={skipModal.hide}>
{t("onboarding.defaultConfirm.cancel")} {t("onboarding.defaultConfirm.cancel")}
</Button> </Button>
@ -58,7 +58,7 @@ export function OnboardingPage() {
{t("onboarding.start.explainer")} {t("onboarding.start.explainer")}
</Paragraph> </Paragraph>
<div className="w-full grid grid-cols-[1fr,auto,1fr] gap-3"> <div className="w-full flex flex-col-reverse md:flex-row gap-3">
<Card onClick={() => navigate("/onboarding/proxy")}> <Card onClick={() => navigate("/onboarding/proxy")}>
<CardContent <CardContent
colorClass="!text-onboarding-good" colorClass="!text-onboarding-good"
@ -69,7 +69,7 @@ export function OnboardingPage() {
<Link>{t("onboarding.start.options.proxy.action")}</Link> <Link>{t("onboarding.start.options.proxy.action")}</Link>
</CardContent> </CardContent>
</Card> </Card>
<div className="grid grid-rows-[1fr,auto,1fr] justify-center gap-4"> <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
<VerticalLine className="items-end" /> <VerticalLine className="items-end" />
<span className="text-xs uppercase font-bold">or</span> <span className="text-xs uppercase font-bold">or</span>
<VerticalLine /> <VerticalLine />
@ -86,7 +86,7 @@ export function OnboardingPage() {
</Card> </Card>
</div> </div>
<p className="text-center mt-12"> <p className="text-center hidden md:block mt-12">
<Trans i18nKey="onboarding.start.options.default.text"> <Trans i18nKey="onboarding.start.options.default.text">
<br /> <br />
<a <a
@ -96,6 +96,21 @@ export function OnboardingPage() {
/> />
</Trans> </Trans>
</p> </p>
<div className=" max-w-[300px] mx-auto md:hidden mt-12 ">
<Button
className="!text-type-text !bg-opacity-50"
theme="secondary"
onClick={skipModal.show}
>
<span>
<Trans i18nKey="onboarding.start.options.default.text">
<span />
<span />
</Trans>
</span>
</Button>
</div>
</CenterContainer> </CenterContainer>
</MinimalPageLayout> </MinimalPageLayout>
); );