Browse Source

feat: Increased search grid box for mobile

pull/6474/head
Muhammed Mustafa 1 year ago
parent
commit
7bc2e798ab
  1. 2
      packages/nc-gui/components/general/OpenLeftSidebarBtn.vue
  2. 14
      packages/nc-gui/components/smartsheet/Toolbar.vue
  3. 7
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

2
packages/nc-gui/components/general/OpenLeftSidebarBtn.vue

@ -48,7 +48,7 @@ const onClick = () => {
@click="onClick" @click="onClick"
> >
<div class="flex items-center text-inherit"> <div class="flex items-center text-inherit">
<GeneralIcon v-if="isMobileMode" icon="menu" class="text-xl -mt-0.25" /> <GeneralIcon v-if="isMobileMode" icon="menu" class="text-lg -mt-0.25" />
<GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" /> <GeneralIcon v-else icon="doubleRightArrow" class="duration-150 transition-all !text-lg -mt-0.25" />
</div> </div>
</NcButton> </NcButton>

14
packages/nc-gui/components/smartsheet/Toolbar.vue

@ -12,23 +12,11 @@ const { isMobileMode } = useGlobal()
const { isUIAllowed } = useRoles() const { isUIAllowed } = useRoles()
const { allowCSVDownload } = useSharedView() const { allowCSVDownload } = useSharedView()
const isViewSidebarAvailable = computed(
() => (isGrid.value || isGallery.value || isKanban.value || isMap.value) && !isPublic.value,
)
</script> </script>
<template> <template>
<div <div
class="nc-table-toolbar h-12 min-h-12 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden" class="nc-table-toolbar py-1 px-1 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] z-7"
:class="{
'h-8': isMobileMode,
'max-h-[var(--topbar-height)] min-h-[var(--topbar-height)]': !isMobileMode,
'pl-3 pr-0': isViewSidebarAvailable && !isMobileMode,
'px-3': !isViewSidebarAvailable && !isMobileMode,
'px-1': isMobileMode,
}"
style="z-index: 7"
> >
<template v-if="isViewsLoading"> <template v-if="isViewsLoading">
<a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" /> <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />

7
packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@ -85,7 +85,7 @@ watch(columns, () => {
<template> <template>
<div <div
class="flex flex-row border-1 rounded-lg h-8 ml-1 border-gray-200 overflow-hidden" class="flex flex-row border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 overflow-hidden"
:class="{ 'border-primary': search.query.length !== 0 || isFocused }" :class="{ 'border-primary': search.query.length !== 0 || isFocused }"
> >
<div <div
@ -134,10 +134,7 @@ watch(columns, () => {
<a-input <a-input
v-model:value="search.query" v-model:value="search.query"
size="small" size="small"
class="text-xs" class="text-xs w-40"
:style="{
width: '10rem',
}"
:placeholder="`${$t('general.search')} in ${columns?.find((column) => column.value === search.field)?.label}`" :placeholder="`${$t('general.search')} in ${columns?.find((column) => column.value === search.field)?.label}`"
:bordered="false" :bordered="false"
data-testid="search-data-input" data-testid="search-data-input"

Loading…
Cancel
Save