diff --git a/vue-app/src/views/ProjectList.vue b/vue-app/src/views/ProjectList.vue
index 718504d00..36b9a228f 100644
--- a/vue-app/src/views/ProjectList.vue
+++ b/vue-app/src/views/ProjectList.vue
@@ -46,11 +46,20 @@
{{ contribution | formatAmount }} {{ currentRound.nativeTokenSymbol }}
+
+
+
@@ -97,6 +106,7 @@ function shuffleArray(array: any[]) {
export default class ProjectList extends Vue {
projects: Project[] = []
+ search = ''
roundWatcherStop?: Function
@@ -131,11 +141,11 @@ export default class ProjectList extends Vue {
this.currentRound?.startBlock,
this.currentRound?.endBlock,
)
- const filtered = projects.filter(project => {
+ const visibleProjects = projects.filter(project => {
return (!project.isHidden && !project.isLocked)
})
- shuffleArray(filtered)
- this.projects = filtered
+ shuffleArray(visibleProjects)
+ this.projects = visibleProjects
}
get contribution(): FixedNumber {
@@ -162,6 +172,15 @@ export default class ProjectList extends Vue {
},
)
}
+
+ get filteredProjects(): Project[] {
+ return this.projects.filter((project: Project) => {
+ if (!this.search) {
+ return true
+ }
+ return project.name.toLowerCase().includes(this.search.toLowerCase())
+ })
+ }
}
@@ -172,7 +191,6 @@ export default class ProjectList extends Vue {
display: flex;
flex-wrap: wrap;
font-size: 12px;
- margin-bottom: $content-space;
}
.round-info-item {
@@ -201,12 +219,6 @@ export default class ProjectList extends Vue {
text-overflow: ellipsis;
}
-.project-list {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
- gap: $content-space;
-}
-
.add-matching-funds-btn {
display: inline-block;
line-height: 1;
@@ -218,6 +230,25 @@ export default class ProjectList extends Vue {
}
}
+.project-search {
+ margin: 20px 0;
+
+ input {
+ background-color: $bg-secondary-color;
+ border: none;
+ border-radius: 20px;
+ font-size: 14px;
+ padding: 2px 10px;
+ width: 100%;
+ }
+}
+
+.project-list {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+ gap: $content-space;
+}
+
@media (max-width: 1150px) {
.round-info-item {
flex: 0 0 50%;