didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make custom fields titles smaller on mobile devices

Browse Source
This commit is contained in:
Alex Turchyn
2025-01-27 13:30:34 +02:00
committed by Pete Matsyburka
parent 6d2a8ca3d3
commit 5bed6448dc
12 changed files with 78 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/attachment_step.vue
+1 -1
View File
@@ -49,7 +49,7 @@
<MarkdownContent :string="field.description" /> <MarkdownContent :string="field.description" />
</div> </div>
<FileDropzone <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" :submitter-slug="submitterSlug"
:multiple="true" :multiple="true"
:dry-run="dryRun" :dry-run="dryRun"
app/javascript/submission_form/date_step.vue
+10 -4
View File
@@ -5,18 +5,24 @@
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
> >
<label <label
v-if="showFieldNames"
:for="field.uuid" :for="field.uuid"
class="label text-2xl" class="label text-lg sm:text-2xl"
> >
<MarkdownContent <MarkdownContent
v-if="field.title" v-if="field.title"
:string="field.title" :string="field.title"
/> />
<template v-else> <template v-else>
{{ field.name && showFieldNames ? field.name : t('date') }} {{ field.name || t('date') }}
<template v-if="!field.required"> </template>
<template v-if="!field.required">
<span
class="ml-1"
:class="{ 'hidden sm:inline': (field.title || field.name || t('date') ).length > 10 }"
>
({{ t('optional') }}) ({{ t('optional') }})
</template> </span>
</template> </template>
</label> </label>
<button <button
app/javascript/submission_form/form.vue
+12 -4
View File
@@ -164,7 +164,7 @@
v-if="showFieldNames && (currentField.name || currentField.title)" v-if="showFieldNames && (currentField.name || currentField.title)"
:for="currentField.uuid" :for="currentField.uuid"
dir="auto" dir="auto"
class="label text-2xl" class="label text-lg sm:text-2xl"
:class="{ 'mb-2': !currentField.description }" :class="{ 'mb-2': !currentField.description }"
> >
<MarkdownContent <MarkdownContent
@@ -173,7 +173,11 @@
/> />
<template v-else> <template v-else>
{{ currentField.name }} {{ 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 > 24 }">
({{ t('optional') }})
</span>
</template> </template>
</label> </label>
<div <div
@@ -221,7 +225,7 @@
v-if="showFieldNames && (currentField.name || currentField.title)" v-if="showFieldNames && (currentField.name || currentField.title)"
:for="currentField.uuid" :for="currentField.uuid"
dir="auto" dir="auto"
class="label text-2xl" class="label text-lg sm:text-2xl"
:class="{ 'mb-2': !currentField.description }" :class="{ 'mb-2': !currentField.description }"
> >
<MarkdownContent <MarkdownContent
@@ -230,7 +234,11 @@
/> />
<template v-else> <template v-else>
{{ currentField.name }} {{ 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 > 24 }">
({{ t('optional') }})
</span>
</template> </template>
</label> </label>
<div <div
app/javascript/submission_form/image_step.vue
+13 -3
View File
@@ -2,8 +2,18 @@
<div v-if="modelValue"> <div v-if="modelValue">
<div class="flex justify-between items-center w-full mb-2"> <div class="flex justify-between items-center w-full mb-2">
<label <label
class="label text-2xl" v-if="showFieldNames"
>{{ showFieldNames && field.name ? field.name : t('image') }}</label> :for="field.uuid"
class="label text-lg sm:text-2xl"
>
<MarkdownContent
v-if="field.title"
:string="field.title"
/>
<template v-else>
{{ field.name || t('image') }}
</template>
</label>
<button <button
class="btn btn-outline btn-sm" class="btn btn-outline btn-sm"
@click.prevent="remove" @click.prevent="remove"
@@ -35,7 +45,7 @@
<MarkdownContent :string="field.description" /> <MarkdownContent :string="field.description" />
</div> </div>
<FileDropzone <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" :submitter-slug="submitterSlug"
:dry-run="dryRun" :dry-run="dryRun"
:accept="'image/*'" :accept="'image/*'"
app/javascript/submission_form/initials_step.vue
+4 -3
View File
@@ -5,17 +5,18 @@
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
> >
<label <label
class="label text-2xl" v-if="showFieldNames"
class="label text-lg sm:text-2xl"
> >
<MarkdownContent <MarkdownContent
v-if="field.title" v-if="field.title"
:string="field.title" :string="field.title"
/> />
<template v-else> <template v-else>
{{ showFieldNames && field.name ? field.name : t('initials') }} {{ field.name || t('initials') }}
</template> </template>
</label> </label>
<div class="space-x-2 flex"> <div class="space-x-2 flex flex-none">
<span <span
v-if="isDrawInitials" v-if="isDrawInitials"
class="tooltip" class="tooltip"
app/javascript/submission_form/multi_select_step.vue
+11 -5
View File
@@ -3,13 +3,19 @@
v-if="showFieldNames && (field.name || field.title)" v-if="showFieldNames && (field.name || field.title)"
:for="field.uuid" :for="field.uuid"
dir="auto" dir="auto"
class="label text-2xl" class="label text-lg sm:text-2xl"
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
><MarkdownContent >
v-if="field.title" <MarkdownContent
:string="field.title" v-if="field.title"
/> :string="field.title"
/>
<template v-else>{{ field.name }}</template> <template v-else>{{ field.name }}</template>
<template v-if="!field.required">
<span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
({{ t('optional') }})
</span>
</template>
</label> </label>
<div <div
v-if="field.description" v-if="field.description"
app/javascript/submission_form/number_step.vue
+9 -6
View File
@@ -3,15 +3,18 @@
v-if="showFieldNames && (field.name || field.title)" v-if="showFieldNames && (field.name || field.title)"
:for="field.uuid" :for="field.uuid"
dir="auto" dir="auto"
class="label text-2xl" class="label text-lg sm:text-2xl"
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
><MarkdownContent >
v-if="field.title" <MarkdownContent
:string="field.title" v-if="field.title"
/> :string="field.title"
/>
<template v-else>{{ field.name }}</template> <template v-else>{{ field.name }}</template>
<template v-if="!field.required"> <template v-if="!field.required">
({{ t('optional') }}) <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
({{ t('optional') }})
</span>
</template> </template>
</label> </label>
<div <div
app/javascript/submission_form/payment_step.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<label <label
v-if="!modelValue && !sessionId" v-if="!modelValue && !sessionId"
class="label text-2xl mb-2" class="label text-lg sm:text-2xl mb-2"
> >
<MarkdownContent <MarkdownContent
v-if="field.title" v-if="field.title"
app/javascript/submission_form/phone_step.vue
+3 -5
View File
@@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<label <label
v-if="showFieldNames"
:for="isCodeSent ? 'one_time_code' : field.uuid" :for="isCodeSent ? 'one_time_code' : field.uuid"
class="label text-2xl" class="label text-lg sm:text-2xl"
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
> >
<MarkdownContent <MarkdownContent
@@ -10,10 +11,7 @@
:string="field.title" :string="field.title"
/> />
<template v-else> <template v-else>
{{ showFieldNames && field.name ? field.name : t('verified_phone_number') }} {{ field.name || t('verified_phone_number') }}
<template v-if="!field.required">
({{ t('optional') }})
</template>
</template> </template>
</label> </label>
<div <div
app/javascript/submission_form/signature_step.vue
+4 -3
View File
@@ -8,17 +8,18 @@
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
> >
<label <label
class="label text-2xl" v-if="showFieldNames"
class="label text-lg sm:text-2xl"
> >
<MarkdownContent <MarkdownContent
v-if="field.title" v-if="field.title"
:string="field.title" :string="field.title"
/> />
<template v-else> <template v-else>
{{ showFieldNames && field.name ? field.name : t('signature') }} {{ field.name || t('signature') }}
</template> </template>
</label> </label>
<div class="space-x-2 flex"> <div class="space-x-2 flex flex-none">
<span <span
v-if="isTextSignature && format !== 'typed' && format !== 'upload'" v-if="isTextSignature && format !== 'typed' && format !== 'upload'"
class="tooltip" class="tooltip"
app/javascript/submission_form/text_step.vue
+9 -6
View File
@@ -3,15 +3,18 @@
v-if="showFieldNames && (field.name || field.title)" v-if="showFieldNames && (field.name || field.title)"
:for="field.uuid" :for="field.uuid"
dir="auto" dir="auto"
class="label text-2xl" class="label text-lg sm:text-2xl"
:class="{ 'mb-2': !field.description }" :class="{ 'mb-2': !field.description }"
><MarkdownContent >
v-if="field.title" <MarkdownContent
:string="field.title" v-if="field.title"
/> :string="field.title"
/>
<template v-else>{{ field.name }}</template> <template v-else>{{ field.name }}</template>
<template v-if="!field.required"> <template v-if="!field.required">
({{ t('optional') }}) <span :class="{ 'hidden sm:inline': (field.title || field.name).length > 24 }">
({{ t('optional') }})
</span>
</template> </template>
</label> </label>
<div <div
app/javascript/submission_form/verification_step.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template> <template>
<label <label
class="label text-2xl mb-2" class="label text-lg sm:text-2xl mb-2"
> >
<MarkdownContent <MarkdownContent
v-if="field.title" v-if="field.title"