ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor TabNavigator.vue storybook entry

Browse Source
This commit is contained in:
Wolfgang Huß 2021-01-26 09:50:10 +01:00
parent 3ef41adfb1
commit cf9eafa2eb
1 changed files with 50 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
webapp/components/_new/generic/TabNavigation/TabNavigator.story.js
View File

@ -132,56 +132,57 @@ storiesOf('TabNavigator', module)
}, },
}, },
template: ` template: `
<div id="search-results" class="search-results"> <div id="search-results" class="search-results">
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }"> <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<masonry-grid> <masonry-grid>
<!-- tabs --> <!-- tabs -->
<tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" /> <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switch-tab="switchTab" />
<!-- search results --> <!-- search results -->
<template v-if="!(!activeResourceCount || searchCount === 0)"> <template v-if="!(!activeResourceCount || searchCount === 0)">
<!-- posts --> <!-- posts -->
<template v-if="activeTab === 'Post'"> <template v-if="activeTab === 'Post'">
<masonry-grid-item <masonry-grid-item
v-for="post in activeResources" v-for="post in activeResources"
:key="post.id" :key="post.id"
:imageAspectRatio="post.image && post.image.aspectRatio" :imageAspectRatio="post.image && post.image.aspectRatio"
> >
<post-teaser <post-teaser
:post="post" :post="post"
:width="{ base: '100%', md: '100%', xl: '50%' }" :width="{ base: '100%', md: '100%', xl: '50%' }"
@removePostFromList="posts = removePostFromList(post, posts)" @removePostFromList="posts = removePostFromList(post, posts)"
@pinPost="pinPost(post, refetchPostList)" @pinPost="pinPost(post, refetchPostList)"
@unpinPost="unpinPost(post, refetchPostList)" @unpinPost="unpinPost(post, refetchPostList)"
/> />
</masonry-grid-item> </masonry-grid-item>
</template> </template>
<!-- users --> <!-- users -->
<template v-if="activeTab === 'User'"> <template v-if="activeTab === 'User'">
<ds-grid-item v-for="user in activeResources" :key="user.id" :row-span="2"> <ds-grid-item v-for="user in activeResources" :key="user.id" :row-span="2">
<base-card :wideContent="true"> <base-card :wideContent="true">
<user-teaser :user="user" /> <user-teaser :user="user" />
</base-card> </base-card>
</ds-grid-item>
</template>
<!-- hashtags -->
<template v-if="activeTab === 'Hashtag'">
<ds-grid-item v-for="hashtag in activeResources" :key="hashtag.id" :row-span="2">
<base-card :wideContent="true">
<hc-hashtag :id="hashtag.id" />
</base-card>
</ds-grid-item>
</template>
</template>
<!-- no results -->
<ds-grid-item v-else :row-span="7" column-span="fullWidth">
<ds-space centered>
<hc-empty icon="tasks" :message="$t('search.no-results', { search })" />
</ds-space>
</ds-grid-item> </ds-grid-item>
</template> </masonry-grid>
<!-- hashtags --> </ds-flex-item>
<template v-if="activeTab === 'Hashtag'"> </div>
<ds-grid-item v-for="hashtag in activeResources" :key="hashtag.id" :row-span="2"> `,
<base-card :wideContent="true">
<hc-hashtag :id="hashtag.id" />
</base-card>
</ds-grid-item>
</template>
</template>
<!-- no results -->
<ds-grid-item v-else :row-span="7" column-span="fullWidth">
<ds-space centered>
<hc-empty icon="tasks" :message="$t('search.no-results', { search })" />
</ds-space>
</ds-grid-item>
</masonry-grid>
</ds-flex-item>
</div>`,
})) }))