Merge from docusealco/wip

app/controllers/pwa_controller.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class PwaController < ActionController::Base
+end

app/javascript/submission_form/areas.vue

@@ -31,7 +31,7 @@
             :with-label="withLabel && !withFieldPlaceholder && step.length < 2"
             :is-value-set="step.some((f) => f.uuid in values)"
             :attachments-index="attachmentsIndex"
-            @click="$emit('focus-step', stepIndex)"
+            @click="[$emit('focus-step', stepIndex), maybeScrollOnClick(field, area)]"
           />
         </Teleport>
       </template>
@@ -109,6 +109,14 @@ export default {
       areaRefs: []
     }
   },
+  computed: {
+    isMobileContainer () {
+      const root = this.$root.$el.parentNode.getRootNode()
+      const container = root.body || root.querySelector('div')
+
+      return container.style.overflow === 'hidden'
+    }
+  },
   beforeUpdate () {
     this.areaRefs = []
   },
@@ -121,14 +129,16 @@ export default {
         this.scrollIntoArea(field.areas[0])
       }
     },
+    maybeScrollOnClick (field, area) {
+      if (['text', 'number', 'cells'].includes(field.type) && this.isMobileContainer) {
+        this.scrollIntoArea(area)
+      }
+    },
     scrollIntoArea (area) {
       const areaRef = this.areaRefs.find((a) => a.area === area)
 
       if (areaRef) {
-        const root = this.$root.$el.parentNode.getRootNode()
-        const container = root.body || root.querySelector('div')
-
-        if (container.style.overflow === 'hidden') {
+        if (this.isMobileContainer) {
           this.scrollInContainer(areaRef.$el)
         } else {
           const targetRect = areaRef.$refs.scrollToElem.getBoundingClientRect()

app/javascript/submission_form/attachment_step.vue

@@ -49,7 +49,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('files')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :multiple="true"
       :dry-run="dryRun"

app/javascript/submission_form/date_step.vue

@@ -1,22 +1,28 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 sm:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
+        v-if="showFieldNames"
         :for="field.uuid"
-        class="label text-2xl"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ field.name && showFieldNames ? field.name : t('date') }}
-          <template v-if="!field.required">
+          {{ field.name || t('date') }}
+        </template>
+        <template v-if="!field.required">
+          <span
+            class="ml-1"
+            :class="{ 'hidden sm:inline': (field.title || field.name || t('date') ).length > 10 }"
+          >
             ({{ t('optional') }})
-          </template>
+          </span>
         </template>
       </label>
       <button

app/javascript/submission_form/form.vue

@@ -164,7 +164,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -173,7 +173,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -221,7 +225,7 @@
               v-if="showFieldNames && (currentField.name || currentField.title)"
               :for="currentField.uuid"
               dir="auto"
-              class="label text-2xl"
+              class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
               :class="{ 'mb-2': !currentField.description }"
             >
               <MarkdownContent
@@ -230,7 +234,11 @@
               />
               <template v-else>
                 {{ currentField.name }}
-                <template v-if="!currentField.required">({{ t('optional') }})</template>
+              </template>
+              <template v-if="!currentField.required">
+                <span :class="{ 'hidden sm:inline': (currentField.title || currentField.name).length > 20 }">
+                  ({{ t('optional') }})
+                </span>
               </template>
             </label>
             <div
@@ -466,7 +474,7 @@
         </div>
         <div
           v-if="(currentField.type !== 'payment' && currentField.type !== 'verification') || submittedValues[currentField.uuid]"
-          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-6 md:mt-8'"
+          :class="currentField.type === 'signature' ? 'mt-2' : 'mt-4 md:mt-6'"
         >
           <button
             id="submit_form_button"
@@ -522,9 +530,9 @@
       />
       <div
         v-if="stepFields.length < 80"
-        class="flex justify-center"
+        class="flex justify-center mt-3 sm:mt-4 mb-0 sm:mb-1"
       >
-        <div class="flex items-center mt-4 mb-1 flex-wrap">
+        <div class="flex items-center flex-wrap">
           <a
             v-for="(step, index) in stepFields"
             :key="step[0].uuid"

app/javascript/submission_form/image_step.vue

@@ -1,9 +1,19 @@
 <template>
   <div v-if="modelValue">
-    <div class="flex justify-between items-center w-full mb-2">
+    <div class="flex justify-between items-end w-full mb-3.5 md:mb-4">
       <label
-        class="label text-2xl"
-      >{{ showFieldNames && field.name ? field.name : t('image') }}</label>
+        v-if="showFieldNames"
+        :for="field.uuid"
+        class="label text-xl sm:text-2xl py-0"
+      >
+        <MarkdownContent
+          v-if="field.title"
+          :string="field.title"
+        />
+        <template v-else>
+          {{ field.name || t('image') }}
+        </template>
+      </label>
       <button
         class="btn btn-outline btn-sm"
         @click.prevent="remove"
@@ -35,7 +45,7 @@
       <MarkdownContent :string="field.description" />
     </div>
     <FileDropzone
-      :message="`${t('upload')} ${field.name || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
+      :message="`${t('upload')} ${(field.title || field.name) || t('image')}${field.required ? '' : ` (${t('optional')})`}`"
       :submitter-slug="submitterSlug"
       :dry-run="dryRun"
       :accept="'image/*'"

app/javascript/submission_form/initials_step.vue

@@ -1,21 +1,22 @@
 <template>
   <div dir="auto">
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('initials') }}
+          {{ field.name || t('initials') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isDrawInitials"
           class="tooltip"

app/javascript/submission_form/invite_form.vue

@@ -40,7 +40,7 @@
       >
     </div>
     <div
-      class="mt-6 md:mt-8"
+      class="mt-4 md:mt-6"
     >
       <button
         type="submit"

app/javascript/submission_form/multi_select_step.vue

@@ -3,13 +3,19 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
+    <template v-if="!field.required">
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
+    </template>
   </label>
   <div
     v-if="field.description"

app/javascript/submission_form/number_step.vue

@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div

app/javascript/submission_form/payment_step.vue

@@ -1,7 +1,7 @@
 <template>
   <label
     v-if="!modelValue && !sessionId"
-    class="label text-2xl mb-2"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
   >
     <MarkdownContent
       v-if="field.title"

app/javascript/submission_form/phone_step.vue

@@ -1,19 +1,17 @@
 <template>
   <div>
     <label
+      v-if="showFieldNames"
       :for="isCodeSent ? 'one_time_code' : field.uuid"
-      class="label text-2xl"
+      class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
       :class="{ 'mb-2': !field.description }"
     >
       <MarkdownContent
         v-if="field.title"
         :string="field.title"
       />
       <template v-else>
-        {{ showFieldNames && field.name ? field.name : t('verified_phone_number') }}
-        <template v-if="!field.required">
-          ({{ t('optional') }})
-        </template>
+        {{ field.name || t('verified_phone_number') }}
       </template>
     </label>
     <div

app/javascript/submission_form/signature_step.vue

@@ -4,21 +4,22 @@
     class="relative"
   >
     <div
-      class="flex justify-between items-center w-full"
+      class="flex justify-between items-end w-full mb-3.5 md:mb-4"
       :class="{ 'mb-2': !field.description }"
     >
       <label
-        class="label text-2xl"
+        v-if="showFieldNames"
+        class="label text-xl sm:text-2xl py-0"
       >
         <MarkdownContent
           v-if="field.title"
           :string="field.title"
         />
         <template v-else>
-          {{ showFieldNames && field.name ? field.name : t('signature') }}
+          {{ field.name || t('signature') }}
         </template>
       </label>
-      <div class="space-x-2 flex">
+      <div class="space-x-2 flex flex-none">
         <span
           v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
           class="tooltip"
@@ -39,6 +40,7 @@
         <span
           v-else-if="withTypedSignature && format !== 'typed' && format !== 'drawn' && format !== 'upload'"
           class="tooltip ml-2"
+          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('type_text')"
         >
           <a
@@ -56,6 +58,7 @@
         <span
           v-if="format !== 'typed' && format !== 'drawn' && format !== 'upload' && format !== 'drawn_or_typed'"
           class="tooltip"
+          :class="{ 'hidden sm:inline': modelValue || computedPreviousValue }"
           :data-tip="t('take_photo')"
         >
           <label

app/javascript/submission_form/text_step.vue

@@ -3,15 +3,18 @@
     v-if="showFieldNames && (field.name || field.title)"
     :for="field.uuid"
     dir="auto"
-    class="label text-2xl"
+    class="label text-xl sm:text-2xl py-0 mb-2 sm:mb-3.5"
     :class="{ 'mb-2': !field.description }"
-  ><MarkdownContent
-     v-if="field.title"
-     :string="field.title"
-   />
+  >
+    <MarkdownContent
+      v-if="field.title"
+      :string="field.title"
+    />
     <template v-else>{{ field.name }}</template>
     <template v-if="!field.required">
-      ({{ t('optional') }})
+      <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 20 }">
+        ({{ t('optional') }})
+      </span>
     </template>
   </label>
   <div