From ee6f8b2964917a72617040cbeab73c5ae3e65731 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:46:29 +0200
Subject: [PATCH] refactor(nc-gui): use grid for survey layout

---
 packages/nc-gui/components/general/PoweredBy.vue   |  2 +-
 .../pages/[projectType]/form/[viewId]/index.vue    |  2 +-
 .../[projectType]/form/[viewId]/index/survey.vue   | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index 1e46e1b345..92f32da4b6 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -9,7 +9,7 @@ import { openLink } from '#imports'
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
     <span class="rounded">
-      <GeneralNocoIcon class="!relative !top-0" width="32" height="32" />
+      <GeneralNocoIcon class="!relative !top-0" :width="32" :height="32" />
     </span>
 
     <span>Powered by NocoDB</span>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index c9cb03c506..752e0ca3b2 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -40,7 +40,7 @@ const onClick = () => {
     </div>
 
     <div
-      class="color-transition flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
+      class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
     >
       <Transition name="slide-left" duration="250" mode="out-in">
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 2f662e1807..8404cdeebf 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -133,10 +133,10 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div ref="el" class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
+  <div ref="el" class="w-full min-h-2/3 grid grid-rows-2">
     <template v-if="sharedFormView">
-      <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>
+      <div class="max-w-[max(33%,600px)] m-auto flex flex-col justify-end">
+        <h1 class="prose-2xl font-bold my-4">{{ sharedFormView.heading }}</h1>
 
         <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
           {{ sharedFormView.subheading }}
@@ -195,7 +195,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div class="ml-1 mt-2 flex w-full text-lg">
+          <div class="ml-1 mt-4 flex w-full text-lg">
             <div class="flex-1 flex justify-center">
               <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
                 <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
@@ -231,7 +231,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div class="text-right text-gray-500">{{ index + 1 }} / {{ formColumns?.length }}</div>
+          <div class="mt-12 select-none text-center text-gray-500 dark:text-slate-200">
+            {{ index + 1 }} / {{ formColumns?.length }}
+          </div>
 
           <Transition name="layout">
             <div v-if="submitted" class="flex flex-col justify-center text-center">
@@ -260,7 +262,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
     </div>
 
     <div
-      class="color-transition shadow-sm absolute bottom-12 right-12 flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
+      class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
     >
       <a-tooltip title="Go to previous" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
         <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">