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>
<style lang="scss">
#filter-posts-header {
display: block;
}
.categories-list {
text-align: center;
}
</style>

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

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