💄 Optimized styles

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

View File

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

View File

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

View File

@ -79,8 +79,8 @@ export default function OauthConnectPage() {
preConnect(); preConnect();
return ( return (
<div class="w-full h-full flex justify-center items-center"> <div class="h-full flex justify-center items-center mx-5">
<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 class="card-body">
<div id="header" class="text-center mb-5"> <div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">{title()}</h1> <h1 class="text-xl font-bold">{title()}</h1>

View File

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

View File

@ -47,9 +47,9 @@ export default function RegisterPage() {
} }
return ( 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>
<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 class="card-body">
<div id="header" class="text-center mb-5"> <div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">{title()}</h1> <h1 class="text-xl font-bold">{title()}</h1>

View File

@ -34,8 +34,8 @@ export default function ConfirmRegistrationPage() {
doConfirm(); doConfirm();
return ( return (
<div class="w-full h-full flex justify-center items-center"> <div class="h-full flex justify-center items-center mx-5">
<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 class="card-body">
<div id="header" class="text-center mb-5"> <div id="header" class="text-center mb-5">
<h1 class="text-xl font-bold">Confirm your account</h1> <h1 class="text-xl font-bold">Confirm your account</h1>