installer design wip

src/Umbraco.Web.UI.Client/src/installer/installer-consent.element.ts

@@ -10,6 +10,23 @@ import { UmbInstallerContext } from './installer-context';
 export class UmbInstallerConsent extends UmbContextConsumerMixin(LitElement) {
   static styles: CSSResultGroup = [
     css`
+      :host,
+      #container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      uui-form {
+        height: 100%;
+      }
+
+      form {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
       h1 {
         text-align: center;
         margin-bottom: var(--uui-size-layout-3);
@@ -17,7 +34,7 @@ export class UmbInstallerConsent extends UmbContextConsumerMixin(LitElement) {
 
       #buttons {
         display: flex;
-        margin-top: var(--uui-size-layout-3);
+        margin-top: auto;
       }
 
       #button-install {
@@ -107,7 +124,7 @@ export class UmbInstallerConsent extends UmbContextConsumerMixin(LitElement) {
 
   render() {
     return html`
-      <div class="uui-text">
+      <div id="container" class="uui-text">
         <h1>Consent Level</h1>
         ${this._renderSlider()}
         <div id="buttons">

src/Umbraco.Web.UI.Client/src/installer/installer-database.element.ts

@@ -10,12 +10,34 @@ import { UUIButtonElement } from '@umbraco-ui/uui';
 export class UmbInstallerDatabase extends UmbContextConsumerMixin(LitElement) {
   static styles: CSSResultGroup = [
     css`
+      :host,
+      #container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      uui-form {
+        height: 100%;
+      }
+
+      form {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
       uui-input,
       uui-input-password,
       uui-combobox {
         width: 100%;
       }
 
+      hr {
+        width: 100%;
+        border-bottom: 1px solid var(--uui-color-divider);
+      }
+
       h1 {
         text-align: center;
         margin-bottom: var(--uui-size-layout-3);
@@ -28,7 +50,7 @@ export class UmbInstallerDatabase extends UmbContextConsumerMixin(LitElement) {
 
       #buttons {
         display: flex;
-        margin-top: var(--uui-size-layout-3);
+        margin-top: auto;
       }
 
       #button-install {
@@ -257,7 +279,7 @@ export class UmbInstallerDatabase extends UmbContextConsumerMixin(LitElement) {
   `;
 
   render() {
-    return html` <div class="uui-text">
+    return html` <div id="container" class="uui-text">
       <h1 class="uui-h3">Database Configuration</h1>
       <uui-form>
         <form id="database-form" name="database" @submit="${this._handleSubmit}">

src/Umbraco.Web.UI.Client/src/installer/installer-layout.element.ts

@@ -30,16 +30,20 @@ export class UmbInstallerLayout extends LitElement {
       #container {
         position: relative;
         display: flex;
-        align-items: center;
-        justify-content: center;
+        justify-content: flex-end;
         width: 100vw;
         height: 100vh;
       }
 
       #box {
-        width: 450px;
+        max-width: 500px;
+        width: 100%;
         box-sizing: border-box;
-        padding: var(--uui-size-layout-1) var(--uui-size-layout-2) var(--uui-size-layout-2) var(--uui-size-layout-2);
+        border-radius: 30px 0 0 30px;
+        background-color: var(--uui-color-surface);
+        display: flex;
+        flex-direction: column;
+        padding: var(--uui-size-layout-4) var(--uui-size-layout-4) var(--uui-size-layout-2) var(--uui-size-layout-4);
       }
     `,
   ];
@@ -53,9 +57,9 @@ export class UmbInstallerLayout extends LitElement {
       </div>
 
       <div id="container">
-        <uui-box id="box">
+        <div id="box">
           <slot></slot>
-        </uui-box>
+        </div>
       </div>
     </div>`;
   }

src/Umbraco.Web.UI.Client/src/installer/installer-user.element.ts

@@ -8,6 +8,23 @@ import { UmbInstallerContext } from './installer-context';
 export class UmbInstallerUser extends UmbContextConsumerMixin(LitElement) {
   static styles: CSSResultGroup = [
     css`
+      :host,
+      #container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      uui-form {
+        height: 100%;
+      }
+
+      form {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+
       uui-input,
       uui-input-password {
         width: 100%;
@@ -24,7 +41,7 @@ export class UmbInstallerUser extends UmbContextConsumerMixin(LitElement) {
 
       #buttons {
         display: flex;
-        margin-top: var(--uui-size-layout-3);
+        margin-top: auto;
       }
 
       #button-install {
@@ -92,7 +109,7 @@ export class UmbInstallerUser extends UmbContextConsumerMixin(LitElement) {
   };
 
   render() {
-    return html` <div class="uui-text">
+    return html` <div id="container" class="uui-text">
       <h1>Install Umbraco</h1>
       <uui-form>
         <form id="LoginForm" name="login" @submit="${this._handleSubmit}">

src/Umbraco.Web.UI.Client/src/installer/installer.element.ts

@@ -15,7 +15,7 @@ export class UmbInstaller extends UmbContextProviderMixin(LitElement) {
   static styles: CSSResultGroup = [css``];
 
   @state()
-  step = 1;
+  step = 3;
 
   constructor() {
     super();
@@ -55,7 +55,6 @@ export class UmbInstaller extends UmbContextProviderMixin(LitElement) {
   }
 }
 
-
 export default UmbInstaller;
 
 declare global {