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

use masonry grid on user profile

Browse Source
This commit is contained in:
Alina Beck 2019-08-19 12:01:43 +01:00
parent bec5ed9695
commit 52c3a15be1
1 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
webapp/pages/profile/_id/_slug.vue
View File

@ -153,8 +153,8 @@
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }"> <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<ds-flex class="user-profile-posts-list" :width="{ base: '100%' }" gutter="small"> <masonry-grid class="user-profile-posts-list">
<ds-flex-item class="profile-top-navigation"> <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
<ds-card class="ds-tab-nav"> <ds-card class="ds-tab-nav">
<ul class="Tabs"> <ul class="Tabs">
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }"> <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
@ -193,9 +193,9 @@
<li class="Tabs__presentation-slider" role="presentation"></li> <li class="Tabs__presentation-slider" role="presentation"></li>
</ul> </ul>
</ds-card> </ds-card>
</ds-flex-item> </ds-grid-item>
<ds-flex-item style="text-align: center"> <ds-grid-item :row-span="2" column-span="fullWidth" class="create-button">
<ds-button <ds-button
v-if="myProfile" v-if="myProfile"
v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }" v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"
@ -205,30 +205,30 @@
size="large" size="large"
primary primary
/> />
</ds-flex-item> </ds-grid-item>
<template v-if="activePosts.length"> <template v-if="activePosts.length">
<hc-post-card <masonry-grid-item v-for="(post, index) in activePosts" :key="post.id">
v-for="(post, index) in activePosts" <hc-post-card
:key="post.id" :post="post"
:post="post" :width="{ base: '100%', md: '100%', xl: '50%' }"
:width="{ base: '100%', md: '100%', xl: '50%' }" @removePostFromList="removePostFromList(index)"
@removePostFromList="removePostFromList(index)" />
/> </masonry-grid-item>
</template> </template>
<template v-else-if="$apollo.loading"> <template v-else-if="$apollo.loading">
<ds-flex-item> <ds-grid-item>
<ds-section centered> <ds-section centered>
<ds-spinner size="base"></ds-spinner> <ds-spinner size="base"></ds-spinner>
</ds-section> </ds-section>
</ds-flex-item> </ds-grid-item>
</template> </template>
<template v-else> <template v-else>
<ds-flex-item :width="{ base: '100%' }"> <ds-grid-item column-span="fullWidth">
<hc-empty margin="xx-large" icon="file" /> <hc-empty margin="xx-large" icon="file" />
</ds-flex-item> </ds-grid-item>
</template> </template>
</ds-flex> </masonry-grid>
<hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" /> <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
@ -247,6 +247,8 @@ import HcEmpty from '~/components/Empty.vue'
import ContentMenu from '~/components/ContentMenu' import ContentMenu from '~/components/ContentMenu'
import HcUpload from '~/components/Upload' import HcUpload from '~/components/Upload'
import HcAvatar from '~/components/Avatar/Avatar.vue' import HcAvatar from '~/components/Avatar/Avatar.vue'
import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
import PostQuery from '~/graphql/UserProfile/Post.js' import PostQuery from '~/graphql/UserProfile/Post.js'
import UserQuery from '~/graphql/UserProfile/User.js' import UserQuery from '~/graphql/UserProfile/User.js'
import { Block, Unblock } from '~/graphql/settings/BlockedUsers.js' import { Block, Unblock } from '~/graphql/settings/BlockedUsers.js'
@ -272,6 +274,8 @@ export default {
HcAvatar, HcAvatar,
ContentMenu, ContentMenu,
HcUpload, HcUpload,
MasonryGrid,
MasonryGridItem,
}, },
transition: { transition: {
name: 'slide-up', name: 'slide-up',
@ -422,6 +426,10 @@ export default {
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.create-button {
text-align: center;
margin: auto;
}
.Tab { .Tab {
border-collapse: collapse; border-collapse: collapse;
padding-bottom: 5px; padding-bottom: 5px;
@ -432,6 +440,8 @@ export default {
.Tabs { .Tabs {
position: relative; position: relative;
background-color: #fff; background-color: #fff;
height: 100%;
&:after { &:after {
content: ' '; content: ' ';
display: table; display: table;
@ -440,10 +450,13 @@ export default {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
&__tab { &__tab {
float: left; float: left;
width: 33.333%; width: 33.333%;
text-align: center; text-align: center;
height: 100%;
&:first-child.active ~ .Tabs__presentation-slider { &:first-child.active ~ .Tabs__presentation-slider {
left: 0; left: 0;
} }