Fixed sizing
This commit is contained in:
parent
b0ace8b6a0
commit
b48bdd8f55
@ -170,123 +170,125 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
|
|||||||
<img
|
<img
|
||||||
src="https://cdn.tombutcher.work/logos/logo-auth-horizontal.png"
|
src="https://cdn.tombutcher.work/logos/logo-auth-horizontal.png"
|
||||||
alt="Logo"
|
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
|
<img
|
||||||
src="https://cdn.tombutcher.work/logos/logo-horizontal.svg"
|
src="https://cdn.tombutcher.work/logos/logo-horizontal.svg"
|
||||||
alt="Logo"
|
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
|
<Flex vertical gap={"middle"}>
|
||||||
style={{
|
<Card
|
||||||
background: darkMode ? "#00000025" : "#fffffff2",
|
style={{
|
||||||
borderRadius: isMobile ? "0px" : "20px",
|
background: darkMode ? "#00000025" : "#fffffff2",
|
||||||
width: isMobile ? "100vw" : "450px",
|
borderRadius: isMobile ? "0px" : "20px",
|
||||||
zIndex: 1,
|
width: isMobile ? "100vw" : "450px",
|
||||||
height: isMobile ? "100vh" : "unset",
|
zIndex: 1,
|
||||||
padding: "26px 15px 30px 15px",
|
height: isMobile ? "100vh" : "unset",
|
||||||
boxShadow: darkMode ? "0px 5px 30px 5px rgb(200 200 200 / 5%)" : "0px 5px 15px 5px rgb(0 0 0 / 10%)"
|
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={{
|
variant="borderless"
|
||||||
body: {
|
styles={{
|
||||||
padding: 0,
|
body: {
|
||||||
height: "100%"
|
padding: 0,
|
||||||
}
|
height: "100%"
|
||||||
}}
|
}
|
||||||
>
|
}}
|
||||||
<Flex style={{ height: "100%" }} vertical className={darkMode ? "darkMode" : ""}>
|
>
|
||||||
{isMobile && (
|
<Flex style={{ height: "100%" }} vertical className={darkMode ? "darkMode" : ""}>
|
||||||
<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 && (
|
{isMobile && (
|
||||||
<Flex gap={"large"} justify="center">
|
<Flex style={{ margin: "0 15px", paddingBottom: "16px" }} gap={"middle"} vertical>
|
||||||
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
<img
|
||||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
src="https://cdn.tombutcher.work/logos/logo-auth.png"
|
||||||
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
alt="Logo"
|
||||||
)}
|
style={{ width: "60%", margin: "0", marginBottom: "4px" }}
|
||||||
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
/>{" "}
|
||||||
|
<Divider style={{ margin: "4px 0" }} />
|
||||||
</Flex>
|
</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>
|
||||||
</Flex>
|
</Card>
|
||||||
</Card>
|
{!isMobile && (
|
||||||
{!isMobile && (
|
<Flex gap={"middle"} style={{ width: "100%" }} justify="center">
|
||||||
<Flex gap={"middle"}>
|
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
||||||
{client.name && <FooterCard darkMode={darkMode}>{clientInfo}</FooterCard>}
|
{auth !== undefined && auth.showTryAnotherWayLink && (
|
||||||
{auth !== undefined && auth.showTryAnotherWayLink && (
|
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
||||||
<FooterCard darkMode={darkMode}>{showTryAnotherWayLink}</FooterCard>
|
)}
|
||||||
)}
|
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
||||||
{displayInfo && <FooterCard darkMode={darkMode}>{infoNode}</FooterCard>}
|
</Flex>
|
||||||
</Flex>
|
)}
|
||||||
)}
|
</Flex>
|
||||||
|
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Flex style={{ zIndex: 1 }} gap={"large"}>
|
<Flex style={{ zIndex: 1 }} gap={"large"}>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user