From 9a1950253a9c40b667851fad0c136ec5e26f0aa2 Mon Sep 17 00:00:00 2001
From: Chirag Chhatrala <chirag.chhatrala@gmail.com>
Date: Tue, 10 Dec 2024 12:49:32 +0530
Subject: [PATCH] When form is focused mode make cover image screen

---
 client/pages/forms/[slug]/index.vue | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/client/pages/forms/[slug]/index.vue b/client/pages/forms/[slug]/index.vue
index 969dfbb66..892662a72 100644
--- a/client/pages/forms/[slug]/index.vue
+++ b/client/pages/forms/[slug]/index.vue
@@ -7,12 +7,14 @@
       <div v-if="form.cover_picture">
         <div
           id="cover-picture"
-          class="max-h-56 w-full overflow-hidden flex items-center justify-center"
+          class="w-full overflow-hidden flex items-center justify-center"
+          :class="{'h-screen': isFocused, 'max-h-56': !isFocused}"
         >
           <img
             alt="Form Cover Picture"
             :src="form.cover_picture"
             class="w-full"
+            :class="{'h-screen object-cover': isFocused}"
           >
         </div>
       </div>
@@ -59,14 +61,16 @@
             <loader class="h-6 w-6 text-nt-blue mx-auto" />
           </p>
         </div>
-        <OpenCompleteForm
-          v-show="!recordLoading"
-          ref="openCompleteForm"
-          :form="form"
-          class="mb-10"
-          :dark-mode="darkMode"
-          @password-entered="passwordEntered"
-        />
+        <div :class="{'absolute inset-0 flex items-center justify-center': isFocused}">
+          <OpenCompleteForm
+            v-show="!recordLoading"
+            ref="openCompleteForm"
+            :form="form"
+            class="mb-10"
+            :dark-mode="darkMode"
+            @password-entered="passwordEntered"
+          />
+        </div>
       </template>
     </div>
   </div>
@@ -95,6 +99,8 @@ const slug = useRoute().params.slug
 const form = computed(() => formsStore.getByKey(slug))
 const $t = useI18n()
 
+const isFocused = computed(() => form.value.format === 'focused')
+
 const openCompleteForm = ref(null)
 
 const passwordEntered = function (password) {