Skip to content

Commit cc19aeb

Browse files
youngbeom-shin申永范-UX
youngbeom-shin
and
申永范-UX
authored
feat(repoCards): improve layout and search placeholders (#1312)
* feat(repoCards): improve layout and search placeholders * feat(repoCards): improve layout and search placeholders --------- Co-authored-by: 申永范-UX <[email protected]>
1 parent 88668cf commit cc19aeb

File tree

16 files changed

+55
-57
lines changed

16 files changed

+55
-57
lines changed

‎frontend/src/components/shared/RepoCards.vue‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,38 +11,44 @@
1111
:repoType="repoType" />
1212
</div>
1313
<div class="pt-8 w-full">
14-
<div
15-
:class="`flex flex-wrap justify-between items-center gap-2 ${
16-
repoType === 'space' ? 'xl:pl-[20px] md:pl-0' : ''
17-
}`">
18-
<h3 class="text-lg font-normal text-gray-900 flex items-center gap-2">
19-
<!-- <SvgIcon
20-
v-if="repoType === 'model'"
21-
name="models"
22-
width="18"
23-
height="18" />
24-
<SvgIcon
25-
v-if="repoType === 'dataset'"
26-
name="datasets"
27-
width="18"
28-
height="18" />
29-
<SvgIcon
30-
v-if="repoType === 'code'"
31-
name="codes"
32-
width="18"
33-
height="18" />
34-
<SvgIcon
35-
v-if="repoType === 'space'"
36-
name="spaces"
37-
width="18"
38-
height="18" /> -->
39-
<span class="capitalize">
40-
{{ $t(`${repoType}s.title`) }}
41-
<span class="text-gray-600 text-md font-normal">
42-
{{ totalRepos }}
14+
<div class="flex flex-wrap justify-between items-center gap-2">
15+
<div class="flex items-center gap-4 flex-nowrap w-auto">
16+
<h3 class="text-lg font-normal text-gray-900 flex items-center gap-2">
17+
<!-- <SvgIcon
18+
v-if="repoType === 'model'"
19+
name="models"
20+
width="18"
21+
height="18" />
22+
<SvgIcon
23+
v-if="repoType === 'dataset'"
24+
name="datasets"
25+
width="18"
26+
height="18" />
27+
<SvgIcon
28+
v-if="repoType === 'code'"
29+
name="codes"
30+
width="18"
31+
height="18" />
32+
<SvgIcon
33+
v-if="repoType === 'space'"
34+
name="spaces"
35+
width="18"
36+
height="18" /> -->
37+
<span class="capitalize">
38+
{{ $t(`${repoType}s.title`) }}
39+
<span class="text-gray-500 text-md font-light">
40+
{{ totalRepos }}
41+
</span>
4342
</span>
44-
</span>
45-
</h3>
43+
</h3>
44+
<ElInput
45+
v-model="nameFilterInput"
46+
class="!w-auto min-w-[180px]"
47+
:placeholder="$t(`${repoType}s.placeholder`)"
48+
:prefix-icon="Search"
49+
@change="filterChange"
50+
size="large" />
51+
</div>
4652
<div class="md:w-auto flex flex-wrap gap-2">
4753
<el-select
4854
v-if="onPremise === 'true'"
@@ -94,14 +100,6 @@
94100
:label="item.label"
95101
:value="item.value" />
96102
</el-select>
97-
98-
<ElInput
99-
v-model="nameFilterInput"
100-
class="!w-[180px]"
101-
:placeholder="$t(`${repoType}s.placeholder`)"
102-
:prefix-icon="Search"
103-
@change="filterChange"
104-
size="large" />
105103
<CsgButton
106104
v-if="repoType === 'space'"
107105
:name="$t('space.guide')"
@@ -118,15 +116,15 @@
118116
</div>
119117
<div
120118
v-if="repoType === 'space'"
121-
class="grid grid-cols-4 2xl:grid-cols-3 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-1 gap-4 mb-4 mt-[16px] xl:pl-[20px] md:pl-0">
119+
class="grid grid-cols-4 2xl:grid-cols-3 xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-1 gap-4 mb-4 mt-4 xl:pl-5 md:pl-0">
122120
<application-space-item
123121
v-for="repo in reposData"
124122
:repo="repo"
125123
:repo-type="repoType" />
126124
</div>
127125
<div
128126
v-else-if="repoType === 'mcp'"
129-
class="grid grid-cols-2 xl:grid-cols-1 xl:w-full justify-between gap-x-[16px] gap-y-[16px] mb-4 mt-[16px]"
127+
class="grid grid-cols-2 xl:grid-cols-1 xl:w-full justify-between gap-x-4 gap-y-4 mb-4 mt-4"
130128
>
131129
<McpItem v-for="repo in reposData" :mcp="repo" />
132130
</div>
@@ -135,7 +133,7 @@
135133
</div>
136134
<div
137135
v-else
138-
class="grid grid-cols-2 xl:grid-cols-1 xl:w-full justify-between gap-x-[16px] gap-y-[16px] mb-4 mt-[16px]">
136+
class="grid grid-cols-2 xl:grid-cols-1 xl:w-full justify-between gap-x-4 gap-y-4 mb-4 mt-4">
139137
<repo-item
140138
v-for="repo in reposData"
141139
:repo="repo"

‎frontend/src/locales/en_js/codes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const codes = {
22
title: "Codes",
33
tips:"Creating a code repository to host your code",
4-
placeholder: "Search Codes",
4+
placeholder: "Search code name",
55
downloadCode: "Download Code",
66
codeName: "Code name",
77
codeNameTips: "Applied to the code path, cannot be changed after creation",

‎frontend/src/locales/en_js/datasets.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const datasets = {
22
title: "Datasets",
3-
placeholder: "Search Datasets",
3+
placeholder: "Search dataset name",
44
newTips:'Datasets added in the last two weeks',
55
downloadDataset: "Download Dataset",
66
datasetName: "Dataset name",

‎frontend/src/locales/en_js/mcp_servers.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const mcps = {
22
title: 'MCP Servers',
3-
placeholder: 'MCP Name',
3+
placeholder: 'Search MCP name',
44
guide: "Guide",
55
nameTips: "Applied to MCP path, cannot be changed after creation",
66
download: "Download Code",

‎frontend/src/locales/en_js/models.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { evaluation } from "./evaluation";
33

44
export const models = {
55
title: "Models",
6-
placeholder: "Search Models",
6+
placeholder: "Search model name",
77
newTips:'Models added in the last two weeks',
88
downloadModel: "Download model data",
99
download: "Download Model",

‎frontend/src/locales/en_js/spaces.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const spaces = {
22
title: "Application Space",
3-
placeholder: "Search Spaces",
3+
placeholder: "Search space name",
44
tips:"Creating Interactive Machine Learning Demos",
55
associated:'Associated Spaces',
66
sdkPlaceholder:'Select space type',

‎frontend/src/locales/zh_hant_js/codes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const codes = {
22
title: "代碼倉庫",
33
tips:"創建代碼庫託管您的代碼",
4-
placeholder: "代碼倉庫名字",
4+
placeholder: "搜索代碼倉庫名稱",
55
downloadCode: "下載代碼倉庫",
66
codeName: "代碼倉庫名稱",
77
codeNameTips: "應用於代碼倉庫路徑，創建後不可更改",

‎frontend/src/locales/zh_hant_js/datasets.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const datasets = {
22
title: "數據集",
3-
placeholder: "數據集名字",
3+
placeholder: "搜索數據集名稱",
44
newTips:'近兩週新增數據集',
55
downloadDataset: "下載數據集",
66
datasetName: "數據集名稱",

‎frontend/src/locales/zh_hant_js/mcp_servers.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const mcps = {
22
title: 'MCP 伺服器',
3-
placeholder: 'MCP 名稱',
3+
placeholder: '搜索 MCP 名稱',
44
guide: "使用指南",
55
nameTips: "應用於 MCP 路徑，建立後不可變更",
66
download: "下載程式碼",

‎frontend/src/locales/zh_hant_js/models.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export const models = {
22
title: "模型",
3-
placeholder: "模型名稱",
3+
placeholder: "搜索模型名稱",
44
newTips:'近兩週新增模型',
55
downloadModel: "下載模型數據",
66
download: "下載模型",

0 commit comments

Comments
 (0)