regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Root mobile detection and some theming fixes

Browse Source
This commit is contained in:
regalijan 2023-10-19 16:49:49 -04:00
parent 9e753e033d
commit 672cd0c1b9
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/root.tsx
View File

@ -22,6 +22,7 @@ import {
} from "@remix-run/react"; } from "@remix-run/react";
import { type ErrorResponse } from "@remix-run/router"; import { type ErrorResponse } from "@remix-run/router";
import { LinksFunction } from "@remix-run/cloudflare"; import { LinksFunction } from "@remix-run/cloudflare";
import MobileDetect from "mobile-detect";
import Login from "../components/Login.js"; import Login from "../components/Login.js";
import Navigation from "../components/Navigation.js"; import Navigation from "../components/Navigation.js";
@ -117,6 +118,18 @@ export async function loader({
if (context.env.DSN) data.dsn = context.env.DSN; if (context.env.DSN) data.dsn = context.env.DSN;
if (context.data.theme) data.theme = context.data.theme; if (context.data.theme) data.theme = context.data.theme;
const isMobileCH = context.request.headers.get("sec-ch-ua-mobile");
if (isMobileCH) {
data.mobile = isMobileCH;
return data;
}
const ua = context.request.headers.get("user-agent");
if (!ua) data.mobile = "?0";
else data.mobile = `?${Number(new MobileDetect(ua).mobile())}`;
return data; return data;
} }
@ -164,7 +177,13 @@ function getMarkup(
); );
return ( return (
<html lang="en-US"> <html
lang="en-US"
{...(loaderData.theme && {
"data-theme": loaderData.theme,
style: { colorScheme: loaderData.theme },
})}
>
<head> <head>
<Links /> <Links />
{serverStyleData?.map(({ key, ids, css }) => ( {serverStyleData?.map(({ key, ids, css }) => (
@ -186,7 +205,13 @@ function getMarkup(
/> />
<Meta /> <Meta />
</head> </head>
<body>{body}</body> <body
{...(loaderData.theme && {
className: `chakra-ui-${loaderData.theme}`,
})}
>
{body}
</body>
</html> </html>
); );
} }