adjust ui

app/javascript/elements/autoresize_textarea.js

@@ -1,5 +1,7 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.id = `autoresize-textarea-${Math.random().toString(32).split('.')[1]}`
+
     this.resize()
 
     this.textarea.addEventListener('input', () => this.resize())

app/javascript/elements/disable_hidden.js

@@ -2,6 +2,18 @@ export default class extends HTMLElement {
   static observedAttributes = ['class']
 
   connectedCallback () {
+    this.addEventListener('turbo:morph-element', this.onMorph)
+
+    this.trigger()
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('turbo:morph-element', this.onMorph)
+  }
+
+  onMorph = (event) => {
+    if (event.target !== this) return
+
     this.trigger()
   }
 

app/javascript/elements/search_input.js

@@ -9,6 +9,11 @@ export default class extends HTMLElement {
     })
 
     document.addEventListener('turbo:before-cache', this.onBeforeCache)
+
+    if (this.input.value) {
+      this.input.focus()
+      this.input.setSelectionRange(this.input.value.length, this.input.value.length)
+    }
   }
 
   disconnectedCallback () {

app/javascript/template_builder/builder.vue

@@ -105,7 +105,7 @@
           :fields="template.fields"
           :submitters="template.submitters"
           :selected-submitter="selectedSubmitter"
-          :with-help="false"
+          :with-help="withHelp"
           :default-submitters="defaultSubmitters"
           :draw-field-type="drawFieldType"
           :custom-fields="customFields"

app/javascript/template_builder/contenteditable.vue

@@ -10,7 +10,7 @@
       :data-placeholder="placeholder"
       :data-empty="isEmpty"
       :style="{ minWidth }"
-      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '']"
+      :class="[iconInline ? (isEmpty ? 'inline-block' : 'inline') : 'block', hideIcon ? 'focus:block' : '', { 'py-2 -my-2': isMobile && iconInline && !isEmpty }]"
       class="peer relative inline-block outline-none before:pointer-events-none before:absolute before:left-0 before:top-0 before:select-none before:whitespace-pre before:text-neutral-400 before:content-[attr(data-placeholder)] before:opacity-0 data-[empty=true]:before:opacity-100"
       @paste.prevent="onPaste"
       @keydown.enter.prevent="blurContenteditable"

app/javascript/template_builder/field.vue

@@ -111,7 +111,7 @@
               <label
                 tabindex="0"
                 :title="t('settings')"
-                class="cursor-pointer flex items-center pr-1"
+                class="cursor-pointer flex items-center pr-0.5 py-2 -my-2 pl-2 -ml-2"
                 :class="iconColorClass"
                 @touchstart="onHandleTouchstart"
                 @touchmove="onHandleTouchmove"
@@ -156,7 +156,7 @@
               tabindex="0"
               :title="t('settings')"
               class="cursor-pointer flex items-center"
-              :class="[iconColorClass, { 'pr-1': isMobile }]"
+              :class="[iconColorClass, { 'pr-0.5 py-2 -my-2 pl-2 -ml-2': isMobile }]"
               @touchstart="onHandleTouchstart"
               @touchmove="onHandleTouchmove"
               @touchend="onHandleTouchend"

app/javascript/template_builder/fields.vue

@@ -330,10 +330,17 @@
     </template>
   </div>
   <div
-    v-if="!isShowVariables && fields.length < 4 && editable && withHelp && !showTourStartForm"
+    v-if="!isShowVariables && (isMobile ? !fields.length : fields.length < 4) && editable && withHelp && !showTourStartForm"
     class="text-xs p-2 border border-base-200 rounded"
+    :class="{ 'text-center': isMobile }"
   >
-    <ul class="list-disc list-outside ml-3">
+    <template v-if="isMobile">
+      {{ t('tap_on_the_field_type_above_to_start_drawing_the_field') }}
+    </template>
+    <ul
+      v-else
+      class="list-disc list-outside ml-3"
+    >
       <li>
         {{ t('draw_a_text_field_on_the_page_with_a_mouse') }}
       </li>

app/javascript/template_builder/i18n.js

@@ -190,6 +190,7 @@ const en = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Draw a text field on the page with a mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Drag & drop any other field type on the page',
   click_on_the_field_type_above_to_start_drawing_it: 'Click on the field type above to start drawing it',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tap a field type above to draw it on the page',
   please_draw_fields_to_prepare_the_document: 'Please draw fields to prepare the document.',
   only_pdf_and_images_are_supported: 'Only PDF and images are supported.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Unlock SMS-verified phone number field with paid plan. Use text field for phone numbers without verification.',
@@ -435,6 +436,7 @@ const es = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Dibujar un campo de texto en la página con el mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Arrastra y suelta cualquier otro tipo de campo en la página',
   click_on_the_field_type_above_to_start_drawing_it: 'Haz clic en el tipo de campo de arriba para comenzar a dibujarlo',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Toca un tipo de campo de arriba para dibujarlo en la página',
   please_draw_fields_to_prepare_the_document: 'Por favor, dibuja los campos para preparar el documento.',
   only_pdf_and_images_are_supported: 'Solo se admiten PDF e imágenes.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloquea el campo de número de teléfono verificado por SMS con un plan pago. Usa el campo de texto para números de teléfono sin verificación.',
@@ -692,6 +694,7 @@ const it = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Disegna un campo di testo sulla pagina con il mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Trascina e rilascia qualsiasi altro tipo di campo sulla pagina',
   click_on_the_field_type_above_to_start_drawing_it: 'Clicca sul tipo di campo sopra per iniziare a disegnarlo',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tocca un tipo di campo sopra per disegnarlo sulla pagina',
   please_draw_fields_to_prepare_the_document: 'Per favore, disegna i campi per preparare il documento.',
   only_pdf_and_images_are_supported: 'Sono supportati solo PDF e immagini.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Sblocca il campo numero di telefono verificato tramite SMS con un piano a pagamento. Usa il campo di testo per numeri di telefono senza verifica.',
@@ -937,6 +940,7 @@ const pt = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Desenhar um campo de texto na página com o mouse',
   drag_and_drop_any_other_field_type_on_the_page: 'Arraste e solte qualquer outro tipo de campo na página',
   click_on_the_field_type_above_to_start_drawing_it: 'Clique no tipo de campo acima para começar a desenhá-lo',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Toque em um tipo de campo acima para desenhá-lo na página',
   please_draw_fields_to_prepare_the_document: 'Por favor, desenhe os campos para preparar o documento.',
   only_pdf_and_images_are_supported: 'Apenas PDFs e imagens são suportados.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Desbloqueie o campo de número de telefone verificado por SMS com um plano pago. Use o campo de texto para números de telefone sem verificação.',
@@ -1194,6 +1198,7 @@ const fr = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Dessinez un champ de texte sur la page avec la souris',
   drag_and_drop_any_other_field_type_on_the_page: 'Glissez-déposez tout autre type de champ sur la page',
   click_on_the_field_type_above_to_start_drawing_it: 'Cliquez sur le type de champ ci-dessus pour commencer à le dessiner',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Appuyez sur un type de champ ci-dessus pour le dessiner sur la page',
   please_draw_fields_to_prepare_the_document: 'Veuillez dessiner des champs pour préparer le document.',
   only_pdf_and_images_are_supported: 'Seuls les PDF et les images sont pris en charge.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Débloquez le champ de numéro de téléphone vérifié par SMS avec un forfait payant. Utilisez un champ texte pour les numéros sans vérification.',
@@ -1445,6 +1450,7 @@ const de = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Ein Textfeld mit der Maus auf der Seite zeichnen',
   drag_and_drop_any_other_field_type_on_the_page: 'Jeden anderen Feldtyp auf die Seite ziehen und ablegen',
   click_on_the_field_type_above_to_start_drawing_it: 'Klicken Sie oben auf den Feldtyp, um mit dem Zeichnen zu beginnen',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tippen Sie oben auf einen Feldtyp, um ihn auf der Seite zu zeichnen',
   please_draw_fields_to_prepare_the_document: 'Bitte zeichnen Sie Felder, um das Dokument vorzubereiten.',
   only_pdf_and_images_are_supported: 'Nur PDF und Bilder werden unterstützt.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'SMS-verifiziertes Telefonnummernfeld mit kostenpflichtigem Plan freischalten. Verwenden Sie für Telefonnummern ohne Verifizierung das Textfeld.',
@@ -1696,6 +1702,7 @@ const nl = {
   draw_a_text_field_on_the_page_with_a_mouse: 'Teken met de muis een tekstveld op de pagina',
   drag_and_drop_any_other_field_type_on_the_page: 'Sleep elk ander veldtype naar de pagina',
   click_on_the_field_type_above_to_start_drawing_it: 'Klik op het bovenstaande veldtype om te beginnen met tekenen',
+  tap_on_the_field_type_above_to_start_drawing_the_field: 'Tik op een veldtype hierboven om het op de pagina te tekenen',
   please_draw_fields_to_prepare_the_document: 'Teken velden om het document voor te bereiden.',
   only_pdf_and_images_are_supported: 'Alleen PDF en afbeeldingen worden ondersteund.',
   unlock_sms_verified_phone_number_field_with_paid_plan_use_text_field_for_phone_numbers_without_verification: 'Ontgrendel het SMS-geverifieerde veld voor telefoonnummer met een betaald abonnement. Gebruik het tekstveld voor telefoonnummers zonder verificatie.',