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
Unified 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> <template>
<div <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 /> <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> <template>
<div <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"> <template v-if="sharedFormView">
<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>

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> </script>
<template> <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"> <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 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4"> </h2>
{{ sharedFormView.subheading }} </div>
</h2>
</template> </template>
<Transition :name="`slide-${transitionName}`" mode="out-in"> <div class="h-1/2 w-full">
<div <Transition :name="`slide-${transitionName}`" mode="out-in">
ref="el" <div
:key="field.title" ref="el"
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)" :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"> <div v-if="field && !submitted" class="flex flex-col gap-2">
<SmartsheetHeaderVirtualCell <div class="flex nc-form-column-label">
v-if="isVirtualCol(field)" <SmartsheetHeaderVirtualCell
:column="{ ...field, title: field.label || field.title }" v-if="isVirtualCol(field)"
:required="isRequired(field, field.required)" :column="{ ...field, title: field.label || field.title }"
:hide-menu="true" :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>
{{ field.description }} <SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
</div> </div>
</div>
</div>
<div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2"> <div>
<a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0"> <SmartsheetVirtualCell
<button v-if="isVirtualCol(field)"
class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static" class="mt-0 nc-input"
@click="goPrevious" :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
> :column="field"
<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>
<a-tooltip <SmartsheetCell
v-if="!isLast" v-else
placement="left" v-model="formState[field.title]"
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'" class="nc-input"
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1" :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:mouse-leave-delay="0" :column="field"
> :edit-enabled="true"
<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>
<Transition name="layout"> <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div v-if="submitted" class="flex flex-col justify-center text-center"> <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
<h2 class="prose-xl mb-2">Thank you!</h2> {{ error.$message }}
</div>
<div v-if="sharedFormView" class="min-w-350px mt-3"> {{ field.description }}
<a-alert </div>
type="success" </div>
class="my-4 text-center" </div>
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"> <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
New form will be loaded after {{ secondsRemain }} seconds <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
</p> <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"> <div class="flex-1">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button> <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> </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> </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 class="absolute bottom-12 right-12 flex flex-col">
<div>{{ index + 1 }} / {{ formColumns?.length }}</div> <div>{{ index + 1 }} / {{ formColumns?.length }}</div>

Write Preview
Loading…
Cancel
Save