feat: make wizard fixed height and scrollable content

DiscipleTools · Dec 19, 2024 · c96e20f · c96e20f
1 parent 7f78d33
commit c96e20f
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 6 deletions.
diff --git a/dt-core/admin/components/setup-wizard-keys.js b/dt-core/admin/components/setup-wizard-keys.js
@@ -53,8 +53,8 @@ export class SetupWizardKeys extends OpenLitElement {
     this._options.dt_google_map_key = this.step.config.dt_google_map_key;
     return html`
       <div class="cover">
+        <h2>Part 3: Mapping and Geocoding</h2>
         <div class="content flow">
-          <h2>Part 3: Mapping and Geocoding</h2>
           <p>
             Disciple.Tools provides basic mapping functionality for locations at
             the country, state, or county level. For more precise geolocation,

diff --git a/dt-core/admin/components/setup-wizard-modules.js b/dt-core/admin/components/setup-wizard-modules.js
@@ -90,8 +90,8 @@ export class SetupWizardModules extends OpenLitElement {
   render() {
     return html`
       <div class="cover">
+        <h2>Part 1: Module selection</h2>
         <div class="content flow">
-          <h2>Part 1: Module selection</h2>
           ${this.stage === 'work'
             ? html`
                 <p>

diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js
@@ -90,8 +90,8 @@ export class SetupWizardPlugins extends OpenLitElement {
   render() {
     return html`
       <div class="cover">
+        <h2>Part 2: Recommended Plugins</h2>
         <div class="content flow">
-          <h2>Part 2: Recommended Plugins</h2>
           <p>
             Plugins are optional and add additional functionality
             to Disciple.Tools based on your needs.

diff --git a/dt-core/admin/components/setup-wizard-use-cases.js b/dt-core/admin/components/setup-wizard-use-cases.js
@@ -100,8 +100,8 @@ export class SetupWizardUseCases extends OpenLitElement {
   render() {
     return html`
       <div class="cover">
+        <h2>Part 1: Use Cases</h2>
         <div class="content flow">
-          <h2>Part 1: Use Cases</h2>
           ${this.stage === 'work' && this.useCases
             ? html`
                 <p>

diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js
@@ -136,10 +136,10 @@ export class SetupWizard extends LitElement {
       .cover {
         display: flex;
         flex-direction: column;
-        min-block-size: min(80vh, 800px);
+        height: min(80vh, 800px);
       }
       .cover > * {
-        margin-block: 2rem;
+        margin-block: 1rem;
       }
       .cover > .content {
         margin-block-end: auto;
@@ -195,6 +195,9 @@ export class SetupWizard extends LitElement {
         padding: 1rem;
         border-radius: 10px;
       }
+      .content {
+        overflow-y: auto;
+      }
       .steps {
         padding-left: 24px;
       }