IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling, follow @Tirokk suggestions

Browse Source
This commit is contained in:
Matt Rider 2019-07-12 10:37:27 -03:00
parent 2e97af074c
commit c7094d82b8
2 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
webapp/components/FilterPosts/FilterPosts.vue
View File

@ -59,11 +59,3 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
#filter-posts-header {
display: block;
}
.categories-list {
text-align: center;
}
</style>

53
webapp/components/FilterPosts/FilterPostsMenuItems.vue
View File

@ -1,14 +1,17 @@
<template> <template>
<ds-container> <ds-container>
<ds-space /> <ds-space />
<ds-flex>
<ds-flex-item
:width="{ base: '100%', sm: '100%', md: '100%', lg: '13%' }"
class="categories-list"
>
<ds-space margin-bottom="x-small" />
<ds-flex id="filter-posts-header"> <ds-flex id="filter-posts-header">
<ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading> <ds-heading tag="h4">{{ $t('filter-posts.header') }}</ds-heading>
<ds-space margin-bottom="large" />
</ds-flex>
<ds-flex>
<ds-flex-item
:width="{ base: '100%', sm: '100%', md: '100%', lg: '5%' }"
class="categories-menu-item"
>
<ds-space margin-bottom="x-small" />
<ds-flex>
<ds-flex-item width="10%" /> <ds-flex-item width="10%" />
<ds-flex-item width="100%"> <ds-flex-item width="100%">
<ds-button <ds-button
@ -17,7 +20,7 @@
:primary="allCategories" :primary="allCategories"
/> />
<ds-flex-item> <ds-flex-item>
<label>{{ $t('filter-posts.all') }}</label> <label class="category-labels">{{ $t('filter-posts.all') }}</label>
</ds-flex-item> </ds-flex-item>
<ds-space /> <ds-space />
</ds-flex-item> </ds-flex-item>
@ -25,13 +28,13 @@
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" /> <ds-flex-item :width="{ base: '0%', sm: '0%', md: '0%', lg: '7%' }" />
<ds-flex-item <ds-flex-item
:width="{ base: '50%', sm: '0%', md: '50%', lg: '10%' }" :width="{ base: '50%', sm: '50%', md: '50%', lg: '11%' }"
v-for="index in chunk.length" v-for="index in chunk.length"
:key="index" :key="index"
> >
<ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-list"> <ds-flex v-for="category in chunk[index - 1]" :key="category.id" class="categories-menu">
<ds-flex> <ds-flex class="categories-menu">
<ds-flex-item width="100%"> <ds-flex-item width="100%" class="categories-menu-item">
<ds-button <ds-button
:icon="category.icon" :icon="category.icon"
:primary="isActive(category.id)" :primary="isActive(category.id)"
@ -40,8 +43,8 @@
<ds-space margin-bottom="small" /> <ds-space margin-bottom="small" />
</ds-flex-item> </ds-flex-item>
<ds-flex> <ds-flex>
<ds-flex-item> <ds-flex-item class="categories-menu-item">
<label>{{ category.name }}</label> <label class="category-labels">{{ category.name }}</label>
</ds-flex-item> </ds-flex-item>
<ds-space margin-bottom="xx-large" /> <ds-space margin-bottom="xx-large" />
</ds-flex> </ds-flex>
@ -71,16 +74,36 @@ export default {
return false return false
}, },
toggleCategory(id) { toggleCategory(id) {
if (!id) {
this.selectedCategoryIds = []
this.allCategories = true
} else {
const index = this.selectedCategoryIds.indexOf(id) const index = this.selectedCategoryIds.indexOf(id)
if (index > -1) { if (index > -1) {
this.selectedCategoryIds.splice(index, 1) this.selectedCategoryIds.splice(index, 1)
} else { } else {
this.selectedCategoryIds.push(id) this.selectedCategoryIds.push(id)
} }
if (!id) this.selectedCategoryIds = [] this.allCategories = false
this.selectedCategoryIds.length ? (this.allCategories = false) : (this.allCategories = true) }
this.$emit('filterPosts', this.selectedCategoryIds) this.$emit('filterPosts', this.selectedCategoryIds)
}, },
}, },
} }
</script> </script>
<style lang="scss">
#filter-posts-header {
display: block;
text-align: center;
}
.categories-menu-item {
text-align: center;
}
.categories-menu {
justify-content: center;
}
.category-labels {
font-size: $font-size-small;
}
</style>