From 9c9d36363090922e99e104e60fcf199f8347b91f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 01:03:12 +0200
Subject: [PATCH] feat(nc-gui): add min heights to prevent title from jumping

---
 .../[projectType]/form/[viewId]/index.vue     |   2 +-
 .../form/[viewId]/index/index.vue             |   2 +-
 .../form/[viewId]/index/survey.vue            | 210 +++++++++---------
 3 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index ba8847962c..7dbc818b37 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -31,7 +31,7 @@ const onClick = () => {
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index e116cd3313..75aecb79dd 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index ba9a7ebf4d..bf05d3859e 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -105,127 +105,127 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div class="w-full flex flex-auto flex-col justify-center items-center">
+  <div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
     <template v-if="sharedFormView">
-      <div class="flex-1" />
+      <div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
-
-      <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
-        {{ sharedFormView.subheading }}
-      </h2>
+        <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
+          {{ sharedFormView.subheading }}
+        </h2>
+      </div>
     </template>
 
-    <Transition :name="`slide-${transitionName}`" mode="out-in">
-      <div
-        ref="el"
-        :key="field.title"
-        class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-      >
-        <div v-if="field && !submitted" class="flex flex-col gap-2">
-          <div class="flex nc-form-column-label">
-            <SmartsheetHeaderVirtualCell
-              v-if="isVirtualCol(field)"
-              :column="{ ...field, title: field.label || field.title }"
-              :required="isRequired(field, field.required)"
-              :hide-menu="true"
-            />
-
-            <SmartsheetHeaderCell
-              v-else
-              :column="{ ...field, title: field.label || field.title }"
-              :required="isRequired(field, field.required)"
-              :hide-menu="true"
-            />
-          </div>
-
-          <div>
-            <SmartsheetVirtualCell
-              v-if="isVirtualCol(field)"
-              class="mt-0 nc-input"
-              :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-              :column="field"
-            />
-
-            <SmartsheetCell
-              v-else
-              v-model="formState[field.title]"
-              class="nc-input"
-              :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-              :column="field"
-              :edit-enabled="true"
-            />
-
-            <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-              <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                {{ error.$message }}
-              </div>
+    <div class="h-1/2 w-full">
+      <Transition :name="`slide-${transitionName}`" mode="out-in">
+        <div
+          ref="el"
+          :key="field.title"
+          class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        >
+          <div v-if="field && !submitted" class="flex flex-col gap-2">
+            <div class="flex nc-form-column-label">
+              <SmartsheetHeaderVirtualCell
+                v-if="isVirtualCol(field)"
+                :column="{ ...field, title: field.label || field.title }"
+                :required="isRequired(field, field.required)"
+                :hide-menu="true"
+              />
 
-              {{ field.description }}
+              <SmartsheetHeaderCell
+                v-else
+                :column="{ ...field, title: field.label || field.title }"
+                :required="isRequired(field, field.required)"
+                :hide-menu="true"
+              />
             </div>
-          </div>
-        </div>
 
-        <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
-          <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
-            <button
-              class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
-              @click="goPrevious"
-            >
-              <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
-            </button>
-          </a-tooltip>
-
-          <div class="flex-1">
-            <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
-                {{ $t('general.submit') }}
-              </button>
-            </div>
-          </div>
+            <div>
+              <SmartsheetVirtualCell
+                v-if="isVirtualCol(field)"
+                class="mt-0 nc-input"
+                :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                :column="field"
+              />
 
-          <a-tooltip
-            v-if="!isLast"
-            placement="left"
-            :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-            :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
-            :mouse-leave-delay="0"
-          >
-            <button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext">
-              <TransitionGroup name="layout">
-                <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
-                <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
-              </TransitionGroup>
-            </button>
-          </a-tooltip>
-        </div>
+              <SmartsheetCell
+                v-else
+                v-model="formState[field.title]"
+                class="nc-input"
+                :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                :column="field"
+                :edit-enabled="true"
+              />
 
-        <Transition name="layout">
-          <div v-if="submitted" class="flex flex-col justify-center text-center">
-            <h2 class="prose-xl mb-2">Thank you!</h2>
+              <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                  {{ error.$message }}
+                </div>
 
-            <div v-if="sharedFormView" class="min-w-350px mt-3">
-              <a-alert
-                type="success"
-                class="my-4 text-center"
-                outlined
-                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-              />
+                {{ field.description }}
+              </div>
+            </div>
+          </div>
 
-              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
-                New form will be loaded after {{ secondsRemain }} seconds
-              </p>
+          <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
+            <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
+              <button
+                class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
+                @click="goPrevious"
+              >
+                <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
+              </button>
+            </a-tooltip>
 
-              <div v-if="sharedFormView?.submit_another_form" class="text-center">
-                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+            <div class="flex-1">
+              <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
+                <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
+                  {{ $t('general.submit') }}
+                </button>
               </div>
             </div>
+
+            <a-tooltip
+              v-if="!isLast"
+              placement="left"
+              :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+              :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
+              :mouse-leave-delay="0"
+            >
+              <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
+                <TransitionGroup name="layout">
+                  <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
+                  <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
+                </TransitionGroup>
+              </button>
+            </a-tooltip>
           </div>
-        </Transition>
-      </div>
-    </Transition>
 
-    <div v-if="sharedFormView" class="flex-1" />
+          <Transition name="layout">
+            <div v-if="submitted" class="flex flex-col justify-center text-center">
+              <h2 class="prose-xl mb-2">Thank you!</h2>
+
+              <div v-if="sharedFormView" class="min-w-350px mt-3">
+                <a-alert
+                  type="success"
+                  class="my-4 text-center"
+                  outlined
+                  :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+                />
+
+                <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
+                  New form will be loaded after {{ secondsRemain }} seconds
+                </p>
+
+                <div v-if="sharedFormView?.submit_another_form" class="text-center">
+                  <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+    </div>
 
     <div class="absolute bottom-12 right-12 flex flex-col">
       <div>{{ index + 1 }} / {{ formColumns?.length }}</div>