Browse Source

fix: Added responsive for mobile in expanded form hidden fields

pull/6685/head
Muhammed Mustafa 1 year ago
parent
commit
8da671e7e7
  1. 25
      packages/nc-gui/components/smartsheet/expanded-form/index.vue

25
packages/nc-gui/components/smartsheet/expanded-form/index.vue

@ -546,7 +546,7 @@ export default {
<template v-else>
<div class="flex flex-row w-full">
<NcButton
v-if="props.showNextPrevIcons"
v-if="props.showNextPrevIcons && !isFirstRow"
v-e="['c:row-expand:prev']"
type="secondary"
class="nc-prev-arrow !w-10"
@ -554,11 +554,12 @@ export default {
>
<GeneralIcon icon="arrowLeft" class="text-lg text-gray-700" />
</NcButton>
<div v-else class="min-w-10.5"></div>
<div class="flex flex-grow justify-center items-center font-semibold text-lg">
<div>{{ meta.title }}</div>
</div>
<NcButton
v-if="props.showNextPrevIcons && !props.lastRow"
v-if="props.showNextPrevIcons && !islastRow"
v-e="['c:row-expand:next']"
type="secondary"
class="nc-next-arrow !w-10"
@ -566,6 +567,7 @@ export default {
>
<GeneralIcon icon="arrowRight" class="text-lg text-gray-700" />
</NcButton>
<div v-else class="min-w-10.5"></div>
</div>
</template>
</div>
@ -633,29 +635,34 @@ export default {
</template>
</div>
</div>
<div v-if="hiddenFields.length > 0" class="flex w-full px-12 items-center py-3">
<div v-if="hiddenFields.length > 0" class="flex w-full sm:px-12 xs:(px-1 mt-2) items-center py-3">
<div class="flex-grow h-px mr-1 bg-gray-100"></div>
<NcButton type="secondary" size="small" class="flex-shrink-1 !text-sm" @click="toggleHiddenFields">
<NcButton
type="secondary"
:size="isMobileMode ? 'medium' : 'small'"
class="flex-shrink-1 !text-sm"
@click="toggleHiddenFields"
>
{{ showHiddenFields ? `Hide ${hiddenFields.length} hidden` : `Show ${hiddenFields.length} hidden` }}
{{ hiddenFields.length > 1 ? `fields` : `field` }}
<MdiChevronDown class="ml-1" :class="showHiddenFields ? 'transform rotate-180' : ''" />
</NcButton>
<div class="flex-grow h-px ml-1 bg-gray-100"></div>
</div>
<div v-if="hiddenFields.length > 0 && showHiddenFields" class="mb-3">
<div v-if="hiddenFields.length > 0 && showHiddenFields" class="xs:w-full mb-3">
<div
v-for="(col, i) of hiddenFields"
v-show="isFormula(col) || !isVirtualCol(col) || !isNew || isLinksOrLTAR(col)"
:key="col.title"
class="mt-2 py-2"
class="sm:(mt-2 py-2) xs:py-2"
:class="`nc-expand-col-${col.title}`"
:data-testid="`nc-expand-col-${col.title}`"
>
<div class="flex flex-row items-start min-h-10">
<div class="flex sm:flex-row xs:(flex-col) items-start min-h-10">
<div class="w-[12rem] scale-110 !h-[35px] mt-2.5">
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="!text-gray-600" />
<LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" class="nc-expanded-cell-header" />
<LazySmartsheetHeaderCell v-else class="!text-gray-600" :column="col" />
<LazySmartsheetHeaderCell v-else class="nc-expanded-cell-header" :column="col" />
</div>
<template v-if="isLoading">

Loading…
Cancel
Save