github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): add min heights to prevent title from jumping

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
46147cca70
commit
9c9d363630
3 changed files with 107 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  2. 2
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  3. 210
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

2
packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
Unescape View File

@ -31,7 +31,7 @@ const onClick = () => {
<template>
<div
class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
>
<NuxtPage />

2
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
Unescape View File

@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<template>
<div
class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
>
<template v-if="sharedFormView">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>

210
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
Unescape View File

@ -105,127 +105,127 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</script>
<template>
<div class="w-full flex flex-auto flex-col justify-center items-center">
<div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
<template v-if="sharedFormView">
<div class="flex-1" />
<div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }}
</h2>
<h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }}
</h2>
</div>
</template>
<Transition :name="`slide-${transitionName}`" mode="out-in">
<div
ref="el"
:key="field.title"
class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="flex nc-form-column-label">
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
<SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
</div>
<div>
<SmartsheetVirtualCell
v-if="isVirtualCol(field)"
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<SmartsheetCell
v-else
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }}
</div>
<div class="h-1/2 w-full">
<Transition :name="`slide-${transitionName}`" mode="out-in">
<div
ref="el"
:key="field.title"
class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="flex nc-form-column-label">
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
{{ field.description }}
<SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
</div>
</div>
</div>
<div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
<a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
<button
class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
@click="goPrevious"
>
<MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
</button>
</a-tooltip>
<div class="flex-1">
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
<button type="submit" class="scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }}
</button>
</div>
</div>
<div>
<SmartsheetVirtualCell
v-if="isVirtualCol(field)"
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<a-tooltip
v-if="!isLast"
placement="left"
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
:mouse-leave-delay="0"
>
<button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext">
<TransitionGroup name="layout">
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
<MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
</TransitionGroup>
</button>
</a-tooltip>
</div>
<SmartsheetCell
v-else
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<Transition name="layout">
<div v-if="submitted" class="flex flex-col justify-center text-center">
<h2 class="prose-xl mb-2">Thank you!</h2>
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }}
</div>
<div v-if="sharedFormView" class="min-w-350px mt-3">
<a-alert
type="success"
class="my-4 text-center"
outlined
:message="sharedFormView.success_msg || 'Successfully submitted form data'"
/>
{{ field.description }}
</div>
</div>
</div>
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds
</p>
<div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
<a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
<button
class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
@click="goPrevious"
>
<MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
</button>
</a-tooltip>
<div v-if="sharedFormView?.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
<div class="flex-1">
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
<button type="submit" class="scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }}
</button>
</div>
</div>
<a-tooltip
v-if="!isLast"
placement="left"
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
:mouse-leave-delay="0"
>
<button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
<TransitionGroup name="layout">
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
<MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
</TransitionGroup>
</button>
</a-tooltip>
</div>
</Transition>
</div>
</Transition>
<div v-if="sharedFormView" class="flex-1" />
<Transition name="layout">
<div v-if="submitted" class="flex flex-col justify-center text-center">
<h2 class="prose-xl mb-2">Thank you!</h2>
<div v-if="sharedFormView" class="min-w-350px mt-3">
<a-alert
type="success"
class="my-4 text-center"
outlined
:message="sharedFormView.success_msg || 'Successfully submitted form data'"
/>
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds
</p>
<div v-if="sharedFormView?.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
</div>
</div>
</div>
</Transition>
</div>
</Transition>
</div>
<div class="absolute bottom-12 right-12 flex flex-col">
<div>{{ index + 1 }} / {{ formColumns?.length }}</div>

Write Preview
Loading…
Cancel
Save