Fixed sizing
This commit is contained in:
parent
b0ace8b6a0
commit
b48bdd8f55
@ -170,123 +170,125 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
||||
<img
|
||||
src="https://cdn.tombutcher.work/logos/logo-auth-horizontal.png"
|
||||
alt="Logo"
|
||||
style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10 }}
|
||||
style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10, marginTop: 10 }}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src="https://cdn.tombutcher.work/logos/logo-horizontal.svg"
|
||||
alt="Logo"
|
||||
style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10 }}
|
||||
style={{ height: "60px", padding: "0 30px", zIndex: 1, marginBottom: 10, marginTop: 10 }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<Card
|
||||
style={{
|
||||
background: darkMode ? "#00000025" : "#fffffff2",
|
||||
borderRadius: isMobile ? "0px" : "20px",
|
||||
width: isMobile ? "100vw" : "450px",
|
||||
zIndex: 1,
|
||||
height: isMobile ? "100vh" : "unset",
|
||||
padding: "26px 15px 30px 15px",
|
||||
boxShadow: darkMode ? "0px 5px 30px 5px rgb(200 200 200 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
|
||||
}}
|
||||
variant="borderless"
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
height: "100%"
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Flex style={{ height: "100%" }} vertical className={darkMode ? "darkMode" : ""}>
|
||||
{isMobile && (
|
||||
<Flex style={{ margin: "0 15px", paddingBottom: "16px" }} gap={"middle"} vertical>
|
||||
<img
|
||||
src="https://cdn.tombutcher.work/logos/logo-auth.png"
|
||||
alt="Logo"
|
||||
style={{ width: "60%", margin: "0", marginBottom: "4px" }}
|
||||
/>{" "}
|
||||
<Divider style={{ margin: "4px 0" }} />
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
<Flex style={{ margin: "0 15px", paddingBottom: "18px" }} vertical gap={"middle"}>
|
||||
{headerNode && (
|
||||
<>
|
||||
<Title level={2} style={{ marginBottom: "0", flexGrow: 1 }} className={darkMode ? "dark" : ""}>
|
||||
{headerNode}
|
||||
</Title>
|
||||
{isMobile && <Divider style={{ margin: "4px 0" }} />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{showImutableUsername && (
|
||||
<>
|
||||
<Card
|
||||
style={{ display: "flex", alignItems: "center", margin: 0 }}
|
||||
styles={{ body: { padding: "8px 12px" } }}
|
||||
>
|
||||
<Flex gap={"small"}>
|
||||
<img
|
||||
src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
|
||||
width={14}
|
||||
style={{ marginTop: "0px" }}
|
||||
/>
|
||||
<Text strong>{auth.attemptedUsername}</Text>
|
||||
<Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
|
||||
{msg("restartLoginTooltip")}
|
||||
</Link>
|
||||
</Flex>
|
||||
</Card>
|
||||
{isMobile && <Divider style={{ margin: "4px 0" }} />}
|
||||
</>
|
||||
)}
|
||||
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
||||
{showMessage && (
|
||||
<>
|
||||
<Alert
|
||||
message={<span dangerouslySetInnerHTML={{ __html: kcSanitize(message.summary) }} />}
|
||||
type={
|
||||
message.type === "error"
|
||||
? "error"
|
||||
: message.type === "success"
|
||||
? "success"
|
||||
: message.type === "warning"
|
||||
? "warning"
|
||||
: "info"
|
||||
}
|
||||
showIcon
|
||||
style={{ margin: 0, width: "100%" }}
|
||||
/>
|
||||
{isMobile && <Divider style={{ margin: "4px 0" }} />}
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Flex vertical style={{ height: "100%" }} gap={"middle"}>
|
||||
{children}
|
||||
<Flex vertical gap={"middle"}>
|
||||
<Card
|
||||
style={{
|
||||
background: darkMode ? "#00000025" : "#fffffff2",
|
||||
borderRadius: isMobile ? "0px" : "20px",
|
||||
width: isMobile ? "100vw" : "450px",
|
||||
zIndex: 1,
|
||||
height: isMobile ? "100vh" : "unset",
|
||||
padding: "26px 15px 30px 15px",
|
||||
boxShadow: darkMode ? "0px 5px 30px 5px rgb(200 200 200 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
|
||||
}}
|
||||
variant="borderless"
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
height: "100%"
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Flex style={{ height: "100%" }} vertical className={darkMode ? "darkMode" : ""}>
|
||||
{isMobile && (
|
||||
<Flex gap={"large"} justify="center">
|
||||
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
||||
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
||||
)}
|
||||
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
||||
<Flex style={{ margin: "0 15px", paddingBottom: "16px" }} gap={"middle"} vertical>
|
||||
<img
|
||||
src="https://cdn.tombutcher.work/logos/logo-auth.png"
|
||||
alt="Logo"
|
||||
style={{ width: "60%", margin: "0", marginBottom: "4px" }}
|
||||
/>{" "}
|
||||
<Divider style={{ margin: "4px 0" }} />
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
<Flex style={{ margin: "0 15px", paddingBottom: "18px" }} vertical gap={"middle"}>
|
||||
{headerNode && (
|
||||
<>
|
||||
<Title level={2} style={{ marginBottom: "0", flexGrow: 1 }} className={darkMode ? "dark" : ""}>
|
||||
{headerNode}
|
||||
</Title>
|
||||
{isMobile && <Divider style={{ margin: "4px 0" }} />}
|
||||
</>
|
||||
)}
|
||||
|
||||
{showImutableUsername && (
|
||||
<>
|
||||
<Card
|
||||
style={{ display: "flex", alignItems: "center", margin: 0 }}
|
||||
styles={{ body: { padding: "8px 12px" } }}
|
||||
>
|
||||
<Flex gap={"small"}>
|
||||
<img
|
||||
src={"https://cdn.tombutcher.work/icons/auth/c-person.svg"}
|
||||
width={14}
|
||||
style={{ marginTop: "0px" }}
|
||||
/>
|
||||
<Text strong>{auth.attemptedUsername}</Text>
|
||||
<Link href={url.loginRestartFlowUrl} style={{ marginLeft: "12px" }}>
|
||||
{msg("restartLoginTooltip")}
|
||||
</Link>
|
||||
</Flex>
|
||||
</Card>
|
||||
{isMobile && <Divider style={{ margin: "4px 0" }} />}
|
||||
</>
|
||||
)}
|
||||
{/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
|
||||
{showMessage && (
|
||||
<>
|
||||
<Alert
|
||||
message={<span dangerouslySetInnerHTML={{ __html: kcSanitize(message.summary) }} />}
|
||||
type={
|
||||
message.type === "error"
|
||||
? "error"
|
||||
: message.type === "success"
|
||||
? "success"
|
||||
: message.type === "warning"
|
||||
? "warning"
|
||||
: "info"
|
||||
}
|
||||
showIcon
|
||||
style={{ margin: 0, width: "100%" }}
|
||||
/>
|
||||
{isMobile && <Divider style={{ margin: "4px 0" }} />}
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Flex vertical style={{ height: "100%" }} gap={"middle"}>
|
||||
{children}
|
||||
{isMobile && (
|
||||
<Flex gap={"large"} justify="center">
|
||||
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
||||
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
||||
)}
|
||||
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
{!isMobile && (
|
||||
<Flex gap={"middle"}>
|
||||
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
||||
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
||||
)}
|
||||
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
||||
</Flex>
|
||||
)}
|
||||
</Card>
|
||||
{!isMobile && (
|
||||
<Flex gap={"middle"} style={{ width: "100%" }} justify="center">
|
||||
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
||||
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
||||
)}
|
||||
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{!isMobile && (
|
||||
<Flex style={{ zIndex: 1 }} gap={"large"}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user