From c2014a1549fa543b6e4fc4398cac1d1c88b17042 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Sun, 8 Dec 2024 22:34:52 +0200
Subject: [PATCH] fix field drawings on tablets

---
 app/javascript/template_builder/area.vue      |  2 +-
 app/javascript/template_builder/builder.vue   | 20 ++++++++++++-------
 .../template_builder/mobile_draw_field.vue    |  2 +-
 .../template_builder/mobile_fields.vue        |  9 +++++----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index 6211bf51..db5d2783 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -237,7 +237,7 @@
     />
     <span
       v-if="field?.type && editable"
-      class="h-4 w-4 md:h-2.5 md:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
+      class="h-4 w-4 lg:h-2.5 lg:w-2.5 -right-1 rounded-full -bottom-1 border-gray-400 bg-white shadow-md border absolute cursor-nwse-resize"
       @mousedown.stop="startResize"
       @touchstart="startTouchResize"
     />
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 99550031..f140d7b3 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     style="max-width: 1600px"
-    class="mx-auto pl-3 md:pl-4 h-full"
+    class="mx-auto pl-3 h-full"
+    :class="isMobile ? 'pl-4' : 'md:pl-4'"
   >
     <div
       v-if="pendingFieldAttachmentUuids.length && editable"
@@ -163,7 +164,7 @@
     <div
       id="main_container"
       class="flex"
-      :class="$slots.buttons || withTitle ? 'md:max-h-[calc(100%_-_60px)]' : 'md:max-h-[100%]'"
+      :class="$slots.buttons || withTitle ? (isMobile ? 'max-h-[calc(100%_-_60px)]' : 'md:max-h-[calc(100%_-_60px)]') : (isMobile ? 'max-h-[100%]' : 'md:max-h-[100%]')"
     >
       <div
         v-if="withDocumentsList"
@@ -219,7 +220,8 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-y-hidden md:overflow-y-auto overflow-x-hidden mt-0.5 pt-0.5"
+        class="w-full overflow-y-hidden overflow-x-hidden mt-0.5 pt-0.5"
+        :class="isMobile ? 'overflow-y-auto' : 'md:overflow-y-auto'"
       >
         <div
           ref="documents"
@@ -320,7 +322,7 @@
         </div>
       </div>
       <div
-        v-if="withFieldsList"
+        v-if="withFieldsList && !isMobile"
         id="fields_list_container"
         class="relative w-80 flex-none mt-1 pr-4 pl-0.5 hidden md:block"
         :class="drawField ? 'overflow-hidden' : 'overflow-y-auto overflow-x-hidden'"
@@ -379,14 +381,14 @@
         </div>
       </div>
     </div>
-    <div class="sticky bottom-0">
+    <div class="sticky bottom-0 z-10">
       <MobileDrawField
-        v-if="drawField && isBreakpointLg"
+        v-if="drawField && (isBreakpointLg || isMobile)"
         :draw-field="drawField"
         :fields="template.fields"
         :submitters="template.submitters"
         :selected-submitter="selectedSubmitter"
-        class="md:hidden"
+        :class="{ 'md:hidden': !isMobile }"
         :editable="editable"
         @cancel="[drawField = null, drawOption = null]"
         @change-submitter="[selectedSubmitter = $event, drawField.submitter_uuid = $event.uuid]"
@@ -397,6 +399,7 @@
         :default-fields="[...defaultRequiredFields, ...defaultFields]"
         :default-required-fields="defaultRequiredFields"
         :field-types="fieldTypes"
+        :class="{ 'md:hidden': !isMobile }"
         :selected-submitter="selectedSubmitter"
         @select="startFieldDraw($event)"
       />
@@ -696,6 +699,9 @@ export default {
     language () {
       return this.locale.split('-')[0].toLowerCase()
     },
+    isMobile () {
+      return /android|iphone|ipad/i.test(navigator.userAgent)
+    },
     defaultDateFormat () {
       const isUsBrowser = Intl.DateTimeFormat().resolvedOptions().locale.endsWith('-US')
       const isUsTimezone = new Intl.DateTimeFormat('en-US', { timeZoneName: 'short' }).format(new Date()).match(/\s(?:CST|CDT|PST|PDT|EST|EDT)$/)
diff --git a/app/javascript/template_builder/mobile_draw_field.vue b/app/javascript/template_builder/mobile_draw_field.vue
index 556d2209..c8644766 100644
--- a/app/javascript/template_builder/mobile_draw_field.vue
+++ b/app/javascript/template_builder/mobile_draw_field.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="absolute text-center w-full bottom-0 pr-3 mb-4">
-    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 md:hidden">
+    <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20">
       <div class="flex items-center space-x-2">
         <component
           :is="fieldIcons[drawField.type]"
diff --git a/app/javascript/template_builder/mobile_fields.vue b/app/javascript/template_builder/mobile_fields.vue
index cde9f606..97def3cc 100644
--- a/app/javascript/template_builder/mobile_fields.vue
+++ b/app/javascript/template_builder/mobile_fields.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10 md:hidden"
+    class="dropdown dropdown-top dropdown-end absolute bottom-4 right-4 z-10"
   >
     <label
       class="btn btn-neutral text-white btn-circle btn-lg group"
@@ -12,9 +12,10 @@
         height="28"
       />
       <IconX
-        class="hidden group-focus:inline"
-        width="28"
-        height="28"
+        class="hidden group-focus:inline p-3"
+        width="64"
+        height="50"
+        @click="closeDropdown"
       />
     </label>
     <ul