ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webapp): category filter buttons

Browse Source
This commit is contained in:
Moriz Wahl 2023-04-25 21:08:47 +02:00
parent 81b4bc7e22
commit fcfce54563
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
webapp/components/FilterMenu/CategoriesFilter.vue
View File

@ -17,18 +17,22 @@
</template> </template>
<template #filter-list> <template #filter-list>
<li v-for="category in categories" :key="category.id" class="item item-category"> <div class="category-filter-list">
<labeled-button <base-button
:icon="category.icon" v-for="category in categories"
:filled="filteredCategoryIds.includes(category.id)" :key="category.id"
:label="$t(`contribution.category.name.${category.slug}`)"
@click="toggleCategory(category.id)" @click="toggleCategory(category.id)"
:filled="filteredCategoryIds.includes(category.id)"
:icon="category.icon"
size="small"
v-tooltip="{ v-tooltip="{
content: $t(`contribution.category.description.${category.slug}`), content: $t(`contribution.category.description.${category.slug}`),
placement: 'bottom-start', placement: 'bottom-start',
}" }"
/> >
</li> {{ $t(`contribution.category.name.${category.slug}`) }}
</base-button>
</div>
</template> </template>
</filter-menu-section> </filter-menu-section>
</template> </template>
@ -95,3 +99,13 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
.category-filter-list {
margin-left: $space-xx-large;
> .base-button {
margin-right: $space-xx-small;
margin-bottom: $space-xx-small;
}
}
</style>