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

fix(nc-gui): survey form alignments and line height

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
b665dd6b05
commit
ce1be6ca18
4 changed files with 145 additions and 139 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. 7
      packages/nc-gui/components/general/NocoIcon.vue
  2. 6
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  3. 174
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  4. 97
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

7
packages/nc-gui/components/general/NocoIcon.vue
Unescape View File

@ -3,17 +3,16 @@ interface Props {
width?: number width?: number
height?: number height?: number
animate?: boolean animate?: boolean
dark?: boolean
} }
const { width = 90, height = 90, animate = false, dark = false } = defineProps<Props>() const { width = 90, height = 90, animate = false } = defineProps<Props>()
</script> </script>
<template> <template>
<div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1"> <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
<div class="relative"> <div class="relative">
<img v-show="dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> <img class="hidden dark:block" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
<img v-show="!dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" /> <img class="dark:hidden" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
<template v-if="animate"> <template v-if="animate">
<div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" /> <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />

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

@ -38,14 +38,10 @@ router.afterEach((to) => shouldRedirect(to.name as string))
<template> <template>
<div <div
class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]" class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
> >
<NuxtPage /> <NuxtPage />
<div class="flex w-full items-end mt-12">
<GeneralPoweredBy :dark="isDark" />
</div>
<div <div
class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)" class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
@click="onClick" @click="onClick"

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

@ -20,102 +20,106 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</script> </script>
<template> <template>
<div <div>
class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12" <div
> class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 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> <template v-if="sharedFormView">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
{{ sharedFormView.subheading }} <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
</h2> {{ sharedFormView.subheading }}
</h2>
<a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
<a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
<template v-else-if="submitted">
<div class="flex justify-center"> <template v-else-if="submitted">
<div v-if="sharedFormView" class="min-w-350px mt-3"> <div class="flex justify-center">
<a-alert <div v-if="sharedFormView" class="min-w-350px mt-3">
type="success" <a-alert
class="my-4 text-center" type="success"
outlined class="my-4 text-center"
:message="sharedFormView.success_msg || 'Successfully submitted form data'" 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 v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
</p> 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 v-if="sharedFormView.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
</div>
</div> </div>
</div> </div>
</div> </template>
</template>
<template v-else> <template v-else>
<GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition> <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
<div class="w-full h-full flex items-center justify-center"> <div class="w-full h-full flex items-center justify-center">
<a-spin size="large" /> <a-spin size="large" />
</div> </div>
</GeneralOverlay> </GeneralOverlay>
<div class="nc-form-wrapper"> <div class="nc-form-wrapper">
<div class="nc-form h-full"> <div class="nc-form h-full">
<div class="flex flex-col gap-6"> <div class="flex flex-col gap-6">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2"> <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
<div class="flex nc-form-column-label"> <div class="flex nc-form-column-label">
<LazySmartsheetHeaderVirtualCell <LazySmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)" v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }" :column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)" :required="isRequired(field, field.required)"
:hide-menu="true" :hide-menu="true"
/> />
<LazySmartsheetHeaderCell <LazySmartsheetHeaderCell
v-else v-else
:column="{ ...field, title: field.label || field.title }" :column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)" :required="isRequired(field, field.required)"
:hide-menu="true" :hide-menu="true"
/> />
</div> </div>
<div> <div>
<LazySmartsheetVirtualCell <LazySmartsheetVirtualCell
v-if="isVirtualCol(field)" v-if="isVirtualCol(field)"
class="mt-0 nc-input" class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field" :column="field"
/> />
<LazySmartsheetCell <LazySmartsheetCell
v-else v-else
v-model="formState[field.title]" v-model="formState[field.title]"
class="nc-input" class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`" :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field" :column="field"
:edit-enabled="true" :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 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"> <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }} {{ error.$message }}
</div>
{{ field.description }}
</div> </div>
{{ field.description }}
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="text-center mt-4"> <div class="text-center mt-4">
<button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm"> <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </template>
</template> </template>
</template> </div>
<GeneralPoweredBy />
</div> </div>
</template> </template>

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

@ -151,25 +151,30 @@ onMounted(() => {
</script> </script>
<template> <template>
<div ref="el" class="w-full grid"> <div ref="el" class="pt-8 md:p-0 w-full h-full flex flex-col">
<template v-if="sharedFormView"> <div
<div class="max-h-33vh max-w-[max(33%,600px)] mx-auto"> v-if="sharedFormView"
<div class="h-33vh flex flex-col justify-end"> style="height: max(40vh, 250px); min-height: 250px"
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1> class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
>
<h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4"> <div class="px-4 md:px-0 flex flex-col justify-end">
{{ sharedFormView.subheading }} <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
</h2>
</div> <h2
v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
>
{{ sharedFormView?.subheading }}
</h2>
</div> </div>
</template> </div>
<div class="h-full w-full flex items-center px-4 md:px-0"> <div class="h-full w-full flex items-center px-4 md:px-0">
<Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in"> <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
<div <div
ref="el" ref="el"
:key="field.title" :key="field.title"
class="color-transition h-full flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto" class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
> >
<div v-if="field && !submitted" class="flex flex-col gap-2"> <div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="flex nc-form-column-label"> <div class="flex nc-form-column-label">
@ -210,7 +215,7 @@ onMounted(() => {
{{ error.$message }} {{ error.$message }}
</div> </div>
<div class="block"> <div class="block text-[14px]">
{{ field.description }} {{ field.description }}
</div> </div>
</div> </div>
@ -255,14 +260,6 @@ onMounted(() => {
</div> </div>
</div> </div>
<template v-if="!submitted">
<div class="flex-1" />
<div class="select-none text-center text-gray-500 dark:text-slate-200">
{{ index + 1 }} / {{ formColumns?.length }}
</div>
</template>
<Transition name="slide-left"> <Transition name="slide-left">
<div v-if="submitted" class="flex flex-col justify-center items-center text-center"> <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
<div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded"> <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded">
@ -294,31 +291,41 @@ onMounted(() => {
</Transition> </Transition>
</div> </div>
<Transition name="fade"> <template v-if="!submitted">
<div <div class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200">
v-if="!submitted" {{ index + 1 }} / {{ formColumns?.length }}
class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
>
<a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
<button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
<MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
</button>
</a-tooltip>
<a-tooltip
:title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
:mouse-enter-delay="0.25"
:mouse-leave-delay="0"
>
<button class="p-0.5 flex items-center group color-transition" @click="goNext">
<MdiChevronRight
:class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
class="text-2xl md:text-md"
/>
</button>
</a-tooltip>
</div> </div>
</Transition> </template>
<div class="relative flex w-full items-end">
<Transition name="fade">
<div
v-if="!submitted"
class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
>
<a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
<button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
<MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
</button>
</a-tooltip>
<a-tooltip
:title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
:mouse-enter-delay="0.25"
:mouse-leave-delay="0"
>
<button class="p-0.5 flex items-center group color-transition" @click="goNext">
<MdiChevronRight
:class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
class="text-2xl md:text-md"
/>
</button>
</a-tooltip>
</div>
</Transition>
<GeneralPoweredBy />
</div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save