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

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

@ -1,9 +1,8 @@
<template> <template>
<div> <section class="categories-select">
<ds-flex :gutter="{ base: 'xx-small', md: 'small', lg: 'xx-small' }">
<div v-for="category in categories" :key="category.id">
<ds-flex-item>
<base-button <base-button
v-for="category in categories"
:key="category.id"
: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)"
@ -13,10 +12,7 @@
> >
{{ $t(`contribution.category.name.${category.slug}`) }} {{ $t(`contribution.category.name.${category.slug}`) }}
</base-button> </base-button>
</ds-flex-item> </section>
</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>