Merge pull request #120 from szymonpoltorak/DEV-99-LoginAndRegisterMo…

…bileScaling added support for scaling login screens on mobile devices
szymonpoltorak · May 12, 2024 · d6ef38a · d6ef38a
2 parents 5a952b0 + 81af9df
commit d6ef38a
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl b/auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl
@@ -25,20 +25,26 @@
 
     <body class="h-screen flex flex-col bg-yellow-400">
         <div class="flex">
-            <div class="ml-auto h-screen">
+            <div class="ml-auto h-screen hidden lg:block">
                 <div class="max-h-[0px] max-w-[0px]">
                     <div class="min-h-screen flex items-center">
-                        <img class="min-h-[512px] min-w-[512px] ml-[-352px]" src="${url.resourcesPath}/../../common/corn/img/corn.png" />
+                        <img class="min-h-[472px] min-w-[472px] ml-[-312px] xl:min-h-[512px] xl:min-w-[512px] xl:ml-[-352px]"
+                            src="${url.resourcesPath}/../../common/corn/img/corn.png" />
                     </div>
                 </div>
                 <div class="bg-yellowishDark rounded-l-[32px] w-[160px] h-screen"></div>
             </div>
-            <div class="bg-yellowishDark h-screen pl-[32px] pr-[32px] w-[50%]">
+            <div class="bg-yellowishDark h-screen pl-[32px] pr-[32px] w-full lg:w-[50%]">
                 <div class="h-screen flex items-center relative">
-                    <div class="min-w-[512px]">
-                        <h1 class="mt-[12px] mb-[12px] text-center font-semibold text-white text-5xl">
-                            ${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}
-                        </h1>
+                    <div class="w-full xl:w-[0px] xl:min-w-[512px]">
+                        <div class="flex mt-[12px] mb-[12px] text-center font-semibold text-white text-5xl">
+                            <div class="flex mx-auto space-x-[16px]">
+                                <img class="lg:hidden h-[40px] w-[40px] my-auto" src="${url.resourcesPath}/../../common/corn/img/corn.png" />
+                                <h1>
+                                    ${kcSanitize(msg("loginTitleHtml",(realm.displayNameHtml!'')))?no_esc}
+                                </h1>
+                            </div>
+                        </div>
                         <#nested "main">
                     </div>
                 </div>