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. 14
      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>

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

@ -105,17 +105,18 @@ 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"> <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }} {{ sharedFormView.subheading }}
</h2> </h2>
</div>
</template> </template>
<div class="h-1/2 w-full">
<Transition :name="`slide-${transitionName}`" mode="out-in"> <Transition :name="`slide-${transitionName}`" mode="out-in">
<div <div
ref="el" ref="el"
@ -169,7 +170,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2"> <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"> <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
<button <button
class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static" class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
@click="goPrevious" @click="goPrevious"
> >
<MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" /> <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
@ -191,7 +192,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1" :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
:mouse-leave-delay="0" :mouse-leave-delay="0"
> >
<button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext"> <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
<TransitionGroup name="layout"> <TransitionGroup name="layout">
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" /> <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" /> <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
@ -224,8 +225,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</Transition> </Transition>
</div> </div>
</Transition> </Transition>
</div>
<div v-if="sharedFormView" class="flex-1" />
<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