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

refactor(nc-gui): survey and form page styles

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
9fcc623382
commit
cd71692441
4 changed files with 85 additions and 82 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. 18
      packages/nc-gui/pages/[projectType]/form/[viewId].vue
  2. 15
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  3. 92
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  4. 42
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

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

@ -41,3 +41,21 @@ if (!notFound.value) {
<NuxtPage />
</NuxtLayout>
</template>
<style lang="scss" scoped>
:deep(.nc-cell-attachment) {
@apply p-0;
.nc-attachment-cell {
@apply px-4 min-h-[75px] w-full h-full;
.nc-attachment {
@apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
}
.nc-attachment-cell-dropzone {
@apply rounded bg-gray-400/75;
}
}
}
</style>

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

@ -1,5 +1,5 @@
<script setup lang="ts">
import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
import { openLink, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
@ -28,12 +28,17 @@ watch(
<div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
<NuxtPage />
<div class="self-end text-xs text-gray-400 mx-auto my-4 flex justify-center gap-2 items-center">
<div class="bg-primary bg-opacity-100 rounded">
<button
type="button"
class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
@click="openLink('https://github.com/nocodb/nocodb')"
>
<span class="bg-primary bg-opacity-100 rounded">
<img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
</div>
</span>
Powered by NocoDB
</div>
</button>
<a-modal
v-model:visible="passwordDlg"

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

@ -59,56 +59,50 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</GeneralOverlay>
<div class="nc-form-wrapper">
<div class="nc-form h-full max-w-3/4 mx-auto">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 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 v-if="isVirtualCol(field)" class="mt-0">
<SmartsheetVirtualCell
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
<div v-else class="mt-0">
<SmartsheetCell
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
<div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
<div class="nc-form h-full px-6 lg:(max-w-3/4 mx-auto px-0)">
<div class="flex flex-col gap-6">
<div v-for="(field, index) in formColumns" :key="index" 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-gray-500 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 }}
</div>
</template>
</div>
</div>
</div>

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

@ -89,6 +89,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
<template>
<div class="w-full h-full flex flex-col justify-center items-center">
<template v-if="sharedFormView">
<div class="flex-1" />
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
</template>
<Transition :name="`slide-${transitionName}`" mode="out-in">
<div
ref="el"
@ -112,24 +120,16 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
/>
</div>
<div v-if="isVirtualCol(field)">
<div>
<SmartsheetVirtualCell
v-if="isVirtualCol(field)"
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
<template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
<div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
{{ error.$message }}
</div>
</template>
</div>
<div v-else>
<SmartsheetCell
v-else
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
@ -137,7 +137,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
:edit-enabled="true"
/>
<div class="flex flex-col gap-2 text-gray-500 text-xs my-2 px-1">
<div class="flex flex-col gap-2 text-gray-500 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>
@ -206,6 +206,8 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</div>
</Transition>
<div v-if="sharedFormView" class="flex-1" />
<div class="absolute bottom-12 right-12 flex flex-col">
<div>{{ index + 1 }} / {{ formColumns?.length }}</div>
</div>
@ -226,20 +228,4 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
@apply mr-2;
}
}
:deep(.nc-cell-attachment) {
@apply p-0;
.nc-attachment-cell {
@apply px-4 min-h-[75px] w-full h-full;
.nc-attachment {
@apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
}
.nc-attachment-cell-dropzone {
@apply rounded bg-gray-400/75;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save