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

Merge pull request #7620 from nocodb/nc-fix/responsive-design 

Nc fix: responsive design UI fixes
pull/7629/head
Raju Udava 9 months ago committed by GitHub
parent
73fbd27025 b5fe0cad67
commit
e125855082
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 31 additions and 19 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. 12
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  2. 38
      packages/nc-gui/components/smartsheet/expanded-form/index.vue

12
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
Unescape View File

@ -158,8 +158,8 @@ const onClickAudit = () => {
@click="tab = 'comments'" @click="tab = 'comments'"
> >
<div class="tab-title nc-tab"> <div class="tab-title nc-tab">
<MdiMessageOutline class="h-4 w-4" /> <MdiMessageOutline class="h-4 w-4 flex-none" />
Comments <span class="<lg:hidden">Comments</span>
</div> </div>
</div> </div>
<NcTooltip v-if="appInfo.ee" class="tab flex-1"> <NcTooltip v-if="appInfo.ee" class="tab flex-1">
@ -173,7 +173,7 @@ const onClickAudit = () => {
> >
<div class="tab-title nc-tab select-none"> <div class="tab-title nc-tab select-none">
<MdiFileDocumentOutline class="h-4 w-4" /> <MdiFileDocumentOutline class="h-4 w-4" />
Audits <span class="<lg:hidden">Audits</span>
</div> </div>
</div> </div>
</NcTooltip> </NcTooltip>
@ -188,7 +188,7 @@ const onClickAudit = () => {
> >
<div class="tab-title nc-tab"> <div class="tab-title nc-tab">
<MdiFileDocumentOutline class="h-4 w-4" /> <MdiFileDocumentOutline class="h-4 w-4" />
Audits <span class="<lg:hidden">Audits</span>
</div> </div>
</div> </div>
</div> </div>
@ -211,13 +211,13 @@ const onClickAudit = () => {
</div> </div>
<div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-2 pl-2 pr-1 space-y-2 nc-scrollbar-md"> <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-2 pl-2 pr-1 space-y-2 nc-scrollbar-md">
<div v-for="log of comments" :key="log.id"> <div v-for="log of comments" :key="log.id">
<div class="bg-white rounded-xl group border-1 gap-2 border-gray-200"> <div class="bg-white rounded-xl group border-1 gap-2 border-gray-200 overflow-hidden">
<div class="flex flex-col p-4 gap-3"> <div class="flex flex-col p-4 gap-3">
<div class="flex justify-between"> <div class="flex justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<GeneralUserIcon size="base" :name="log.display_name" :email="log.user" /> <GeneralUserIcon size="base" :name="log.display_name" :email="log.user" />
<div class="flex flex-col"> <div class="flex flex-col <lg:max-w-22">
<NcTooltip class="truncate max-w-42" show-on-truncate-only> <NcTooltip class="truncate max-w-42" show-on-truncate-only>
<template #title> <template #title>
{{ log.display_name?.trim() || log.user || 'Shared source' }} {{ log.display_name?.trim() || log.user || 'Shared source' }}

38
packages/nc-gui/components/smartsheet/expanded-form/index.vue
Unescape View File

@ -520,7 +520,7 @@ export default {
<div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6"> <div class="h-[85vh] xs:(max-h-full) max-h-215 flex flex-col p-6">
<div class="flex h-9.5 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between"> <div class="flex h-9.5 flex-shrink-0 w-full items-center nc-expanded-form-header relative mb-4 justify-between">
<template v-if="!isMobileMode"> <template v-if="!isMobileMode">
<div class="flex gap-3 w-100"> <div class="flex gap-3 w-100 <lg:max-w-64">
<div class="flex gap-2"> <div class="flex gap-2">
<NcButton <NcButton
v-if="props.showNextPrevIcons" v-if="props.showNextPrevIcons"
@ -560,7 +560,7 @@ export default {
<NcButton <NcButton
v-if="!isNew && rowId" v-if="!isNew && rowId"
type="secondary" type="secondary"
class="!xs:hidden text-gray-700" class="!<lg:hidden text-gray-700"
:disabled="isLoading" :disabled="isLoading"
@click="copyRecordUrl()" @click="copyRecordUrl()"
> >
@ -582,6 +582,18 @@ export default {
{{ $t('general.reload') }} {{ $t('general.reload') }}
</div> </div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem
v-if="!isNew && rowId"
type="secondary"
class="!lg:hidden text-gray-700"
:disabled="isLoading"
@click="copyRecordUrl()"
>
<div v-e="['c:row-expand:copy-url']" data-testid="nc-expanded-form-copy-url" class="flex gap-2 items-center">
<component :is="iconMap.link" class="cursor-pointer" />
{{ $t('labels.copyRecordURL') }}
</div>
</NcMenuItem>
<NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}"> <NcMenuItem v-if="isUIAllowed('dataEdit')" class="text-gray-700" @click="!isNew ? onDuplicateRow() : () => {}">
<div <div
v-e="['c:row-expand:duplicate']" v-e="['c:row-expand:duplicate']"
@ -664,13 +676,13 @@ export default {
v-for="(col, i) of fields" v-for="(col, i) of fields"
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)" v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
:key="col.title" :key="col.title"
class="nc-expanded-form-row mt-2 py-2 xs:w-full" class="nc-expanded-form-row mt-2 py-2 <lg:w-full"
:class="`nc-expand-col-${col.title}`" :class="`nc-expand-col-${col.title}`"
:col-id="col.id" :col-id="col.id"
:data-testid="`nc-expand-col-${col.title}`" :data-testid="`nc-expand-col-${col.title}`"
> >
<div class="flex items-start flex-row sm:(gap-x-6) xs:(flex-col w-full) nc-expanded-cell min-h-10"> <div class="flex items-start flex-row sm:(gap-x-6) <lg:(flex-col w-full) nc-expanded-cell min-h-10">
<div class="w-48 xs:(w-full) mt-0.25 !h-[35px]"> <div class="w-48 <lg:(w-full) mt-0.25 !h-[35px]">
<LazySmartsheetHeaderVirtualCell <LazySmartsheetHeaderVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
class="nc-expanded-cell-header h-full" class="nc-expanded-cell-header h-full"
@ -696,7 +708,7 @@ export default {
<SmartsheetDivDataCell <SmartsheetDivDataCell
v-if="col.title" v-if="col.title"
:ref="i ? null : (el: any) => (cellWrapperEl = el)" :ref="i ? null : (el: any) => (cellWrapperEl = el)"
class="bg-white w-80 xs:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative" class="bg-white w-80 <lg:w-full px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
:class="{ :class="{
'!bg-gray-50 !select-text nc-system-field': isReadOnlyVirtualCell(col), '!bg-gray-50 !select-text nc-system-field': isReadOnlyVirtualCell(col),
}" }"
@ -725,12 +737,12 @@ export default {
</template> </template>
</div> </div>
</div> </div>
<div v-if="hiddenFields.length > 0" class="flex w-full sm:px-12 xs:(px-1 mt-2) items-center py-3"> <div v-if="hiddenFields.length > 0" class="flex w-full lg:px-12 <lg:(px-1 mt-2) items-center py-3">
<div class="flex-grow h-px mr-1 bg-gray-100"></div> <div class="flex-grow h-px mr-1 bg-gray-100"></div>
<NcButton <NcButton
type="secondary" type="secondary"
:size="isMobileMode ? 'medium' : 'small'" :size="isMobileMode ? 'medium' : 'small'"
class="flex-shrink-1 !text-sm" class="flex-shrink !text-sm overflow-hidden"
@click="toggleHiddenFields" @click="toggleHiddenFields"
> >
{{ showHiddenFields ? `Hide ${hiddenFields.length} hidden` : `Show ${hiddenFields.length} hidden` }} {{ showHiddenFields ? `Hide ${hiddenFields.length} hidden` : `Show ${hiddenFields.length} hidden` }}
@ -744,12 +756,12 @@ export default {
v-for="(col, i) of hiddenFields" v-for="(col, i) of hiddenFields"
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)" v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
:key="col.title" :key="col.title"
class="sm:(mt-2) py-2 xs:w-full" class="sm:(mt-2) py-2 <lg:w-full"
:class="`nc-expand-col-${col.title}`" :class="`nc-expand-col-${col.title}`"
:data-testid="`nc-expand-col-${col.title}`" :data-testid="`nc-expand-col-${col.title}`"
> >
<div class="sm:gap-x-6 flex sm:flex-row xs:(flex-col) items-start min-h-10"> <div class="sm:gap-x-6 flex sm:flex-row <lg:(flex-col w-full) items-start min-h-10">
<div class="sm:w-48 xs:w-full scale-110 !h-[35px]"> <div class="sm:w-48 <lg:w-full scale-110 !h-[35px]">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" /> <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" />
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" /> <LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
@ -771,7 +783,7 @@ export default {
<LazySmartsheetDivDataCell <LazySmartsheetDivDataCell
v-if="col.title" v-if="col.title"
:ref="i ? null : (el: any) => (cellWrapperEl = el)" :ref="i ? null : (el: any) => (cellWrapperEl = el)"
class="bg-white rounded-lg w-80 border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative" class="bg-white rounded-lg w-80 <lg:w-full border-1 overflow-hidden border-gray-200 px-1 sm:min-h-[35px] xs:min-h-13 flex items-center relative"
> >
<LazySmartsheetVirtualCell <LazySmartsheetVirtualCell
v-if="isVirtualCol(col)" v-if="isVirtualCol(col)"
@ -862,7 +874,7 @@ export default {
</div> </div>
<div <div
v-if="showRightSections" v-if="showRightSections"
class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-0 overflow-hidden h-full xs:hidden" class="nc-comments-drawer border-1 relative border-gray-200 w-1/3 max-w-125 bg-gray-50 rounded-xl min-w-50 overflow-hidden h-full xs:hidden"
:class="{ active: commentsDrawer && isUIAllowed('commentList') }" :class="{ active: commentsDrawer && isUIAllowed('commentList') }"
> >
<SmartsheetExpandedFormComments :loading="isLoading" /> <SmartsheetExpandedFormComments :loading="isLoading" />

Write Preview
Loading…
Cancel
Save