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

refactor CategoriesSelect template

Browse Source
This commit is contained in:
Alina Beck 2020-02-05 21:45:28 +01:00
parent 1d435392ff
commit 41ef496d6b
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
webapp/components/CategoriesSelect/CategoriesSelect.vue
View File

@ -1,22 +1,18 @@
<template> <template>
<div> <section class="categories-select">
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }"> <base-button
<div v-for="category in categories" :key="category.id"> v-for="category in categories"
<ds-flex-item> :key="category.id"
<base-button :data-test="categoryButtonsId(category.id)"
:data-test="categoryButtonsId(category.id)" @click="toggleCategory(category.id)"
@click="toggleCategory(category.id)" :filled="isActive(category.id)"
:filled="isActive(category.id)" :disabled="isDisabled(category.id)"
:disabled="isDisabled(category.id)" :icon="category.icon"
:icon="category.icon" size="small"
size="small" >
> {{ $t(`contribution.category.name.${category.slug}`) }}
{{ $t(`contribution.category.name.${category.slug}`) }} </base-button>
</base-button> </section>
</ds-flex-item>
</div>
</ds-flex>
</div>
</template> </template>
<script> <script>
@ -77,3 +73,15 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
.categories-select {
display: flex;
flex-wrap: wrap;
> .base-button {
margin-right: $space-xx-small;
margin-bottom: $space-xx-small;
}
}
</style>