byte/imprink
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change auth0 template to satisfy safe mobile render areas

Browse Source
This commit is contained in:
lumijiez
2025-06-06 18:53:17 +03:00
parent 61ec568db1
commit e90cc93e9f
1 changed files with 843 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
webui/auth0-templates/login.html
View File

@@ -3,20 +3,21 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="icon" href="https://i.ibb.co/gbthcbnP/logo-sm.png" type="image/png" />
<title>Sign In | Imprink</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<style>
<style>
* {
box-sizing: border-box;
}
body, html {
height: 100%;
height: 100dvh;
min-height: 100dvh;
margin: 0;
padding: 0;
background-color: #f9f9f9;
@@ -53,7 +54,8 @@
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
height: 100dvh;
min-height: 100dvh;
position: fixed;
top: 0;
left: 0;
@@ -64,6 +66,10 @@
max-width: 1400px;
margin: 0 auto;
gap: clamp(20px, 5vw, 150px);
padding-top: max(0px, env(safe-area-inset-top));
padding-bottom: max(0px, env(safe-area-inset-bottom));
padding-left: max(5%, env(safe-area-inset-left));
padding-right: max(5%, env(safe-area-inset-right));
}
.logo-section {
@@ -103,7 +109,7 @@
max-width: 400px;
min-width: 360px;
animation: fadeIn 0.5s ease-out;
max-height: 90vh;
max-height: 90dvh;
overflow-y: auto;
position: relative;
}
@@ -400,7 +406,8 @@
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
height: 100dvh;
min-height: 100dvh;
}
.login-container {
@@ -410,6 +417,12 @@
align-items: center;
position: fixed;
inset: 0;
height: 100dvh;
min-height: 100dvh;
padding-top: max(8px, env(safe-area-inset-top));
padding-bottom: max(8px, env(safe-area-inset-bottom));
padding-left: max(8px, env(safe-area-inset-left));
padding-right: max(8px, env(safe-area-inset-right));
}
.logo-section {
@@ -432,7 +445,7 @@
animation: none;
margin: 0;
padding: 24px;
max-height: calc(100vh - 32px);
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
overflow-y: auto;
}
@@ -481,9 +494,17 @@
}
@media (max-width: 480px) {
.login-container {
padding-top: max(6px, env(safe-area-inset-top));
padding-bottom: max(6px, env(safe-area-inset-bottom));
padding-left: max(4px, env(safe-area-inset-left));
padding-right: max(4px, env(safe-area-inset-right));
}
.login-box {
width: calc(100% - 16px);
padding: 20px;
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);
}
.form-control {
@@ -522,9 +543,47 @@
border-top: 1px solid #e0e0e0;
margin: 24px 0;
}
</style>
@supports not (height: 100dvh) {
html, body {
height: 100vh;
min-height: 100vh;
}
.login-container {
height: 100vh;
min-height: 100vh;
}
.login-box {
max-height: 90vh;
}
@media (max-width: 992px) {
html, body {
height: 100vh;
min-height: 100vh;
}
.login-container {
height: 100vh;
min-height: 100vh;
}
.login-box {
max-height: calc(100vh - 64px);
}
}
@media (max-width: 480px) {
.login-box {
max-height: calc(100vh - 48px);
}
}
}
</style>
<body>
<div class="login-container">
<div class="login-container">
<div class="logo-section">
<img src="https://i.ibb.co/0RK5CM5Q/logo-light.png" class="img-fluid"/>
</div>
@@ -615,20 +674,20 @@
</form>
</div>
</div>
</div>
</div>
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/polyfills/1.0/base64.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="https://cdn.auth0.com/js/polyfills/1.0/base64.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/es5-shim.min.js"></script>
<![endif]-->
<script src="https://cdn.auth0.com/js/auth0/9.28/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
<script src="https://cdn.auth0.com/js/auth0/9.28/auth0.min.js"></script>
<script src="https://cdn.auth0.com/js/polyfills/1.0/object-assign.min.js"></script>
<script>
function capitalizeFirstLetter(str) {
if (!str) return '';
return str.charAt(0).toUpperCase() + str.slice(1);
@@ -877,6 +936,6 @@
document.getElementById('forgot-password-link').addEventListener('click', forgotPassword);
document.querySelector('form').addEventListener('submit', login);
});
</script>
</script>
</body>
</html>