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