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

disable tabs when 0 results found

Browse Source
This commit is contained in:
Alina Beck 2020-03-23 13:57:56 +01:00
parent 6d531c2cf8
commit e03260d28d
2 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/components/_new/features/SearchResults/SearchResults.vue
View File

@ -54,8 +54,16 @@ export default {
}, },
tabOptions() { tabOptions() {
return [ return [
{ type: 'Post', title: `${this.posts.length} Posts` }, {
{ type: 'User', title: `${this.users.length} Users` }, type: 'Post',
title: `${this.posts.length} Posts`,
disabled: !this.posts.length,
},
{
type: 'User',
title: `${this.users.length} Users`,
disabled: !this.users.length,
},
] ]
}, },
}, },

10
webapp/components/_new/generic/TabNavigation/TabNavigation.vue
View File

@ -3,7 +3,7 @@
<li <li
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.type" :key="tab.type"
:class="[activeTab === tab.type && '--active', 'tab']" :class="[activeTab === tab.type && '--active', tab.disabled && '--disabled', 'tab']"
role="button" role="button"
@click="$emit('switchTab', tab.type)" @click="$emit('switchTab', tab.type)"
> >
@ -25,6 +25,7 @@ export default {
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.tabs { .tabs {
display: flex; display: flex;
@ -43,6 +44,13 @@ export default {
border: none; border: none;
} }
&.--disabled {
background: $background-color-disabled;
border: 1px solid $color-neutral-80;
pointer-events: none;
cursor: default;
}
&:hover:not(.--active) { &:hover:not(.--active) {
background: $color-neutral-85; background: $color-neutral-85;
} }