unused slot sidebar in filter menu, an d style

This commit is contained in:
ogerly 2022-10-28 13:39:16 +02:00
parent 2532dae733
commit 128a98cc27
3 changed files with 19 additions and 17 deletions

View File

@ -59,14 +59,14 @@ describe('CategoriesFilter.vue', () => {
describe('mount', () => { describe('mount', () => {
it('starts with all categories button active', () => { it('starts with all categories button active', () => {
const allCategoriesButton = wrapper.find('.categories-filter .item-all-themen .base-button') const allCategoriesButton = wrapper.find('.categories-filter .item-all-topics .base-button')
expect(allCategoriesButton.attributes().class).toContain('--filled') expect(allCategoriesButton.attributes().class).toContain('--filled')
}) })
it('sets category button attribute `filled` when corresponding category is filtered', async () => { it('sets category button attribute `filled` when corresponding category is filtered', async () => {
getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
wrapper = await Wrapper() wrapper = await Wrapper()
democracyAndPoliticsButton = wrapper.find('.categories-filter .item-save-themen .base-button') democracyAndPoliticsButton = wrapper.find('.categories-filter .item-save-topics .base-button')
expect(democracyAndPoliticsButton.attributes().class).toContain('--filled') expect(democracyAndPoliticsButton.attributes().class).toContain('--filled')
}) })
@ -84,7 +84,7 @@ describe('CategoriesFilter.vue', () => {
it('when all button is clicked', async () => { it('when all button is clicked', async () => {
getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9']) getters['posts/filteredCategoryIds'] = jest.fn(() => ['cat9'])
wrapper = await Wrapper() wrapper = await Wrapper()
const allCategoriesButton = wrapper.find('.categories-filter .item-all-themen .base-button') const allCategoriesButton = wrapper.find('.categories-filter .item-all-topics .base-button')
allCategoriesButton.trigger('click') allCategoriesButton.trigger('click')
expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1) expect(mutations['posts/RESET_CATEGORIES']).toHaveBeenCalledTimes(1)
}) })
@ -93,7 +93,7 @@ describe('CategoriesFilter.vue', () => {
describe('save categories', () => { describe('save categories', () => {
it('calls the API', async () => { it('calls the API', async () => {
wrapper = await Wrapper() wrapper = await Wrapper()
const saveButton = wrapper.find('.categories-filter .item-save-themen .base-button') const saveButton = wrapper.find('.categories-filter .item-save-topics .base-button')
saveButton.trigger('click') saveButton.trigger('click')
expect(apolloMutationMock).toBeCalled() expect(apolloMutationMock).toBeCalled()
}) })

View File

@ -1,7 +1,7 @@
<template> <template>
<filter-menu-section :title="$t('filter-menu.categories')" class="categories-filter"> <filter-menu-section :title="$t('filter-menu.categories')" class="categories-filter">
<template #filter-themen> <template #filter-topics>
<li class="item item-all-themen"> <li class="item item-all-topics">
<labeled-button <labeled-button
:filled="!filteredCategoryIds.length" :filled="!filteredCategoryIds.length"
:label="$t('filter-menu.all')" :label="$t('filter-menu.all')"
@ -9,9 +9,11 @@
@click="resetCategories" @click="resetCategories"
/> />
</li> </li>
<li class="item item-save-themen"> <li class="item item-save-topics">
<labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" /> <labeled-button filled :label="$t('actions.save')" icon="save" @click="saveCategories" />
</li> </li>
<hr />
<ds-space margin="base" />
</template> </template>
<template #filter-list> <template #filter-list>

View File

@ -6,11 +6,11 @@
<slot name="filter-follower" /> <slot name="filter-follower" />
</ul> </ul>
<ul class="filter-list"> <ul class="filter-list">
<slot name="filter-themen" /> <slot name="filter-topics" />
</ul> </ul>
<aside class="sidebar"> <!-- <aside class="sidebar">
<slot name="sidebar" /> <slot name="sidebar" />
</aside> </aside> -->
<!-- <div v-if="divider" class="divider" /> --> <!-- <div v-if="divider" class="divider" /> -->
<ul class="filter-list"> <ul class="filter-list">
<slot name="filter-list" /> <slot name="filter-list" />
@ -21,10 +21,10 @@
<script> <script>
export default { export default {
props: { props: {
divider: { // divider: {
type: Boolean, // type: Boolean,
default: true, // default: true,
}, // },
title: { title: {
type: String, type: String,
}, },
@ -49,14 +49,14 @@ export default {
// flex-wrap: wrap; // flex-wrap: wrap;
// flex-basis: 80%; // flex-basis: 80%;
// flex-grow: 1; // flex-grow: 1;
// margin-bottom: 20px; // max-width: $size-width-filter-sidebar;
// // max-width: $size-width-filter-sidebar;
// } // }
// > .divider { // > .divider {
// border-left: $border-size-base solid $border-color-soft; // // border-left: $border-size-base solid $border-color-soft;
// margin: $space-small; // margin: $space-small;
// margin-left: 0; // margin-left: 0;
// border-top: $border-size-base solid $border-color-soft;
// } // }
> .filter-list { > .filter-list {