matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix field width offset (#417)

Browse Source 
* fix store content bug

* fix: form field indexing bug on working form store

* fix column width on  form fied

* fix field width offset

* UI polishing

* Fix cursor grab

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka
2024-05-22 13:36:42 +01:00
committed by GitHub
parent 292e32959b
commit 8760925007
4 changed files with 23 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/components/open/forms/OpenFormField.vue
View File

@@ -2,11 +2,13 @@
<div
v-if="!isFieldHidden"
:id="'block-' + field.id"
class=""
:class="[
getFieldWidthClasses(field),
{
'group/nffield hover:bg-gray-100/50 relative hover:z-10 mx-[-15px] px-[15px] transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview,
'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited
'group/nffield hover:bg-gray-100/50 relative hover:z-10 px-2 transition-colors hover:border-gray-200 dark:hover:bg-gray-900 border-dashed border border-transparent box-border dark:hover:border-blue-900 rounded-md':adminPreview,
'bg-blue-50 hover:!bg-blue-50 dark:bg-gray-800 rounded-md': beingEdited,
'mx-[15px]' : !adminPreview
}]"
>
<div
@@ -250,15 +252,15 @@ export default {
getFieldWidthClasses(field) {
if (!field.width || field.width === 'full') return 'col-span-full'
else if (field.width === '1/2') {
return 'w-full sm:col-span-6 col-span-full'
return 'sm:col-span-6 col-span-full'
} else if (field.width === '1/3') {
return 'w-full sm:col-span-4 col-span-full'
return 'sm:col-span-4 col-span-full'
} else if (field.width === '2/3') {
return 'w-full sm:col-span-8 col-span-full'
return 'sm:col-span-8 col-span-full'
} else if (field.width === '1/4') {
return 'w-full sm:col-span-3 col-span-full'
return 'sm:col-span-3 col-span-full'
} else if (field.width === '3/4') {
return 'w-full sm:col-span-9 col-span-full'
return 'sm:col-span-9 col-span-full'
}
},
getFieldAlignClasses(field) {

22
client/components/open/forms/components/FormFieldsEditor.vue
View File

@@ -45,24 +45,14 @@
>
<div
v-if="element"
class="flex items-center space-x-1 group py-2 pr-4 relative"
class="flex items-center space-x-1 group py-2 pr-2 relative"
>
<!-- Drag handler -->
<div class="cursor-move draggable p-2 -mr-2">
<svg
class="h-4 w-4 text-gray-400"
viewBox="0 0 18 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.5 1.0835H16.5M1.5 6.91683H16.5"
stroke="currentColor"
stroke-width="1.67"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="cursor-grab draggable p-1 -mr-3">
<Icon
name="clarity:drag-handle-line"
class="size-8 text-gray-400"
/>
</div>
<!-- Field name and type -->
<div class="flex flex-col flex-grow truncate">