clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-01 11:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: responsive app market

Browse Source
This commit is contained in:
Ramesh Mane
2026-03-10 16:58:34 +00:00
parent fa9a25a6d3
commit 8902677027
3 changed files with 73 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/nc-gui/components/workspace/project/AppMarket.vue
View File

@@ -169,8 +169,13 @@ watch(
</template>
</a-input>
<NcSelect v-model:value="selectedCategory" class="w-48 nc-select-sm" :placeholder="t('labels.category')" allow-clear>
<a-select-option v-for="cat in categories" :key="cat" :value="cat">
<NcSelect
v-model:value="selectedCategory"
class="xs:max-w-30 md:w-48 nc-select-sm"
:placeholder="t('labels.category')"
allow-clear
>
<a-select-option v-for="cat in categories" :key="cat" :value="cat" class="items-center">
{{ cat }}
</a-select-option>
</NcSelect>
@@ -241,22 +246,40 @@ watch(
>
{{ managedApp.description || 'No description available' }}
</p>
<div class="nc-app-meta">
<span class="nc-app-meta-item">
<GeneralIcon icon="download" class="h-3.5 w-3.5" />
<span class="font-medium">{{ formatInstallCount(managedApp.install_count || 0) }}</span>
<span class="text-nc-content-gray-muted">installs</span>
</span>
<span v-if="managedApp.version" class="nc-app-meta-item">
<GeneralIcon icon="gitCommit" class="h-3.5 w-3.5" />
<span>v{{ managedApp.version }}</span>
</span>
<div class="nc-app-meta-row">
<div class="nc-app-meta">
<span class="nc-app-meta-item">
<GeneralIcon icon="download" class="h-3.5 w-3.5" />
<span class="font-medium">{{ formatInstallCount(managedApp.install_count || 0) }}</span>
<span class="text-nc-content-gray-muted">installs</span>
</span>
<span v-if="managedApp.version" class="nc-app-meta-item">
<GeneralIcon icon="gitCommit" class="h-3.5 w-3.5" />
<span>v{{ managedApp.version }}</span>
</span>
</div>
<!-- Install Button (inline on mobile) -->
<div class="nc-app-action md:hidden">
<NcButton
:loading="installing === managedApp.id"
:disabled="!!installing"
size="xs"
type="primary"
@click="installManagedApp(managedApp)"
>
<template #icon>
<GeneralIcon icon="download" class="h-3.5 w-3.5" />
</template>
{{ installing === managedApp.id ? 'Installing...' : t('general.install') }}
</NcButton>
</div>
</div>
</div>
</div>
<!-- Install Button -->
<div class="nc-app-action">
<!-- Install Button (desktop) -->
<div class="nc-app-action hidden md:block">
<NcButton
:loading="installing === managedApp.id"
:disabled="!!installing"
@@ -283,7 +306,7 @@ watch(
}
.nc-app-market-header {
@apply px-6 py-4 bg-nc-bg-default border-b-1 border-nc-border-gray-light;
@apply px-4 md:px-6 py-3 md:py-4 bg-nc-bg-default border-b-1 border-nc-border-gray-light;
}
.nc-app-market-icon {
@@ -293,7 +316,7 @@ watch(
}
.nc-app-market-filters {
@apply px-6 py-4 bg-nc-bg-default border-b-1 border-nc-border-gray-light;
@apply px-4 md:px-6 py-4 bg-nc-bg-default border-b-1 border-nc-border-gray-light;
}
.nc-app-market-empty {
@@ -305,7 +328,7 @@ watch(
}
.nc-app-market-list {
@apply p-6;
@apply p-4 md:p-6;
}
.nc-app-item {
@@ -380,6 +403,10 @@ watch(
@apply text-sm text-nc-content-gray-subtle m-0 mb-2 leading-normal line-clamp-2;
}
.nc-app-meta-row {
@apply flex items-center justify-between gap-3;
}
.nc-app-meta {
@apply flex items-center gap-4 text-xs text-nc-content-gray-subtle2;
}
@@ -393,19 +420,7 @@ watch(
}
// Responsive adjustments
@media (max-width: 768px) {
.nc-app-item-content {
@apply flex-col items-start gap-4;
}
.nc-app-action {
@apply w-full;
:deep(button) {
@apply w-full;
}
}
@media (max-width: 819px) {
.nc-app-title-row {
@apply flex-wrap;
}