ARC-1296: Align GesundheitsID Provider form

oviva-ag · Feb 15, 2024 · 7ba62b0 · 7ba62b0
1 parent d750ec2
commit 7ba62b0
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 30 deletions.
diff --git a/ehealthid-rp/src/main/resources/www/common.css.mustache b/ehealthid-rp/src/main/resources/www/common.css.mustache
@@ -1,7 +1,8 @@
 html body {
   position: relative;
+
   width: 100%;
-  height: 100%;
+  height: 100vh;
 
   font-family: Inter, sans-serif;
   font-style: normal;
@@ -14,13 +15,22 @@ html body {
   padding: 0;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+
   max-width: 400px;
-  margin: 1em auto 2em;
   padding: 20px;
 
   border-radius: 12px;
@@ -38,11 +48,12 @@ a {
 
 @media (max-width: 500px) {
   .container {
-    margin: 0 auto;
+    height: 100%;
     border: none;
   }
 
   html body {
+    height: 100svh;
     background: #FFF;
   }
 }
diff --git a/ehealthid-rp/src/main/resources/www/select-idp.html.mustache b/ehealthid-rp/src/main/resources/www/select-idp.html.mustache
@@ -2,10 +2,14 @@
   {{$head}}
     <style>
       .form-inline {
+        flex: 1;
         display: flex;
-        flex-flow: row wrap;
         flex-direction: column;
-        align-items: stretch;
+        justify-content: space-between;
+      }
+
+      .form-inline .provider-wrapper {
+        margin: auto 0;
       }
 
       .form-inline label {
@@ -19,9 +23,10 @@
       }
 
       .form-inline select, .form-inline input {
-        vertical-align: middle;
-        padding: 0 16px;
+        width: 100%;
         height: 40px;
+
+        padding: 0 16px;
         margin: 10px 0;
 
         border-radius: 8px;
@@ -36,6 +41,7 @@
       }
 
       .form-inline select {
+        outline: none;
         font-weight: 400;
       }
 
@@ -56,12 +62,14 @@
   {{$body}}
     <h1>GesundheitsID</h1>
     <form action="/auth/select-idp" method="post" class="form-inline">
-      <label for="idp-selection">Select your GesundheitsID Provider</label>
-      <select name="identityProvider" id="idp-selection">
-        {{#identityProviders}}
-          <option value="{{iss}}">{{name}}</option>
-        {{/identityProviders}}
-      </select>
+      <div class="provider-wrapper">
+        <label for="idp-selection">Select your GesundheitsID Provider</label>
+        <select name="identityProvider" id="idp-selection">
+          {{#identityProviders}}
+            <option value="{{iss}}">{{name}}</option>
+          {{/identityProviders}}
+        </select>
+      </div>
       <input type="submit" value="Login">
     </form>
   {{/body}}

diff --git a/ehealthid-rp/src/test/resources/fixtures/pages_golden_error.bin b/ehealthid-rp/src/test/resources/fixtures/pages_golden_error.bin
@@ -7,8 +7,9 @@
   <style>
       html body {
   position: relative;
+
   width: 100%;
-  height: 100%;
+  height: 100vh;
 
   font-family: Inter, sans-serif;
   font-style: normal;
@@ -21,13 +22,22 @@
   padding: 0;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+
   max-width: 400px;
-  margin: 1em auto 2em;
   padding: 20px;
 
   border-radius: 12px;
@@ -45,11 +55,12 @@ a {
 
 @media (max-width: 500px) {
   .container {
-    margin: 0 auto;
+    height: 100%;
     border: none;
   }
 
   html body {
+    height: 100svh;
     background: #FFF;
   }
 }

diff --git a/ehealthid-rp/src/test/resources/fixtures/pages_golden_idp-select-form.bin b/ehealthid-rp/src/test/resources/fixtures/pages_golden_idp-select-form.bin
@@ -7,8 +7,9 @@
   <style>
       html body {
   position: relative;
+
   width: 100%;
-  height: 100%;
+  height: 100vh;
 
   font-family: Inter, sans-serif;
   font-style: normal;
@@ -21,13 +22,22 @@
   padding: 0;
 }
 
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 * {
   box-sizing: border-box;
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
+
   max-width: 400px;
-  margin: 1em auto 2em;
   padding: 20px;
 
   border-radius: 12px;
@@ -45,22 +55,27 @@ a {
 
 @media (max-width: 500px) {
   .container {
-    margin: 0 auto;
+    height: 100%;
     border: none;
   }
 
   html body {
+    height: 100svh;
     background: #FFF;
   }
 }
 
   </style>
     <style>
       .form-inline {
+        flex: 1;
         display: flex;
-        flex-flow: row wrap;
         flex-direction: column;
-        align-items: stretch;
+        justify-content: space-between;
+      }
+
+      .form-inline .provider-wrapper {
+        margin: auto 0;
       }
 
       .form-inline label {
@@ -74,9 +89,10 @@ a {
       }
 
       .form-inline select, .form-inline input {
-        vertical-align: middle;
-        padding: 0 16px;
+        width: 100%;
         height: 40px;
+
+        padding: 0 16px;
         margin: 10px 0;
 
         border-radius: 8px;
@@ -91,6 +107,7 @@ a {
       }
 
       .form-inline select {
+        outline: none;
         font-weight: 400;
       }
 
@@ -113,13 +130,15 @@ a {
 <div class="container">
       <h1>GesundheitsID</h1>
     <form action="/auth/select-idp" method="post" class="form-inline">
-      <label for="idp-selection">Select your GesundheitsID Provider</label>
-      <select name="identityProvider" id="idp-selection">
-          <option value="https://a.example.com">AoK Tesfalen</option>
-          <option value="https://d.example.com">Barmer</option>
-          <option value="https://b.example.com">Siemens</option>
-          <option value="https://c.example.com">Zuse</option>
-      </select>
+      <div class="provider-wrapper">
+        <label for="idp-selection">Select your GesundheitsID Provider</label>
+        <select name="identityProvider" id="idp-selection">
+            <option value="https://a.example.com">AoK Tesfalen</option>
+            <option value="https://d.example.com">Barmer</option>
+            <option value="https://b.example.com">Siemens</option>
+            <option value="https://c.example.com">Zuse</option>
+        </select>
+      </div>
       <input type="submit" value="Login">
     </form>