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