Hydrogen/Passport
Hydrogen/Passport
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimized styles

Browse Source
This commit is contained in:
LittleSheep 2024-02-07 23:06:27 +08:00
parent 3b43205583
commit cc2fa06c72
6 changed files with 47 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pkg/view/src/layouts/RootLayout.tsx
View File

@ -1,8 +1,8 @@
import Navbar from "./shared/Navbar.tsx";
import { readProfiles, useUserinfo } from "../stores/userinfo.tsx";
import { createEffect, createSignal, Show } from "solid-js";
import { createEffect, createMemo, createSignal, Show } from "solid-js";
import { readWellKnown } from "../stores/wellKnown.tsx";
import { BeforeLeaveEventArgs, useLocation, useNavigate } from "@solidjs/router";
import { BeforeLeaveEventArgs, useLocation, useNavigate, useSearchParams } from "@solidjs/router";
export default function RootLayout(props: any) {
const [ready, setReady] = createSignal(false);
@ -13,6 +13,7 @@ export default function RootLayout(props: any) {
const userinfo = useUserinfo();
const location = useLocation();
const [searchParams] = useSearchParams();
createEffect(() => {
if (ready()) {
@ -30,6 +31,14 @@ export default function RootLayout(props: any) {
}
}
const mainContentStyles = createMemo(() => {
if (searchParams["embedded"]) {
return "h-screen";
} else {
return "h-[calc(100vh-64px)] mt-[64px]";
}
});
return (
<Show when={ready()} fallback={
<div class="h-screen w-screen flex justify-center items-center">
@ -38,8 +47,11 @@ export default function RootLayout(props: any) {
</div>
</div>
}>
<Navbar />
<main class="h-[calc(100vh-68px)] mt-[68px]">{props.children}</main>
<Show when={!searchParams["embedded"]}>
<Navbar />
</Show>
<main class={`${mainContentStyles()} px-5`}>{props.children}</main>
</Show>
);
}

4
pkg/view/src/pages/auth/callback.tsx
View File

@ -4,8 +4,8 @@ export default function DefaultCallbackPage() {
const [searchParams] = useSearchParams();
return (
<div class="w-full h-full flex justify-center items-center">
<div class="card w-[480px] max-w-screen shadow-xl">
<div class="h-full flex justify-center items-center mx-5">
<div class="card w-screen max-w-[480px] shadow-xl">
<div class="card-body">
<div id="header" class="text-center mb-5">
{/* Just Kidding */}

4
pkg/view/src/pages/auth/connect.tsx
View File

@ -79,8 +79,8 @@ export default function OauthConnectPage() {
preConnect();
return (
<div class="w-full h-full flex justify-center items-center">
<div class="card w-[480px] max-w-screen shadow-xl">
<div class="h-full flex justify-center items-center mx-5">
<div class="card w-screen max-w-[480px] shadow-xl">
<div class="card-body">
<div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">{title()}</h1>

37
pkg/view/src/pages/auth/login.tsx
View File

@ -140,9 +140,9 @@ export default function LoginPage() {
}
return (
<div class="w-full h-full flex justify-center items-center">
<div class="h-full flex justify-center items-center mx-5">
<div>
<div class="card w-[480px] max-w-screen shadow-xl">
<div class="card w-screen max-w-[480px] shadow-xl">
<div class="card-body">
<div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">{title()}</h1>
@ -210,20 +210,29 @@ export default function LoginPage() {
</button>
</form>
</div>
</div>
<Show when={searchParams["redirect_uri"]}>
<div id="redirect-info" class="mt-3">
<div role="alert" class="alert shadow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="stroke-info shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>You need to login before access that.</span>
</div>
<div id="tips" class="flex flex-col gap-4">
<Show when={challenge()}>
<div class="px-7 py-5 text-center bg-base-200">
<progress
class="progress w-2/3"
value={challenge().progress / challenge().requirements * 100}
max="100"
/>
<div class="mt-3 flex justify-center gap-2">
<span>Risk <b>{challenge().risk_level}</b></span>
<span>Progress <b>{challenge().progress}/{challenge().requirements}</b></span>
</div>
</div>
</Show>
<Show when={searchParams["redirect_uri"]}>
<div role="alert" class="px-7 py-5 text-center bg-base-200">
<span>You need to login before access that.</span>
</div>
</Show>
</div>
</Show>
</div>
<div class="text-sm text-center mt-3">
<a target="_blank" href="/auth/register?closable=yes" class="link">Haven't an account? Click here to create

4
pkg/view/src/pages/auth/register.tsx
View File

@ -47,9 +47,9 @@ export default function RegisterPage() {
}
return (
<div class="w-full h-full flex justify-center items-center">
<div class="h-full flex justify-center items-center mx-5">
<div>
<div class="card w-[480px] max-w-screen shadow-xl">
<div class="card w-screen max-w-[480px] shadow-xl">
<div class="card-body">
<div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">{title()}</h1>

4
pkg/view/src/pages/users/confirm.tsx
View File

@ -34,8 +34,8 @@ export default function ConfirmRegistrationPage() {
doConfirm();
return (
<div class="w-full h-full flex justify-center items-center">
<div class="card w-[480px] max-w-screen shadow-xl">
<div class="h-full flex justify-center items-center mx-5">
<div class="card w-screen max-w-[480px] shadow-xl">
<div class="card-body">
<div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">Confirm your account</h1>