pleroma-fe/src/components/user_profile/user_profile.vue

86 lines
2.2 KiB
Vue
Raw Normal View History

2016-12-01 09:32:22 +11:00
<template>
<div>
<div v-if="user.id" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
<tab-switcher>
<Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="fetchBy"/>
<div :label="$t('user_card.followees')">
<div v-if="friends">
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
</div>
<div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
<div :label="$t('user_card.followers')">
<div v-if="followers">
<user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
</div>
<div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
<Timeline :label="$t('user_card.favorites')" :embedded="true" :title="$t('user_profile.favorites_title')" :timeline="favorites"/>
</tab-switcher>
</div>
<div v-else class="panel user-profile-placeholder">
<div class="panel-heading">
<div class="title">
{{ $t('settings.profile_tab') }}
</div>
</div>
<div class="panel-body">
<i class="icon-spin3 animate-spin"></i>
</div>
2016-12-01 09:32:22 +11:00
</div>
</div>
2016-12-01 09:32:22 +11:00
</template>
<script src="./user_profile.js"></script>
2016-12-08 19:09:21 +11:00
<style lang="scss">
.user-profile {
2018-04-08 02:30:27 +10:00
flex: 2;
flex-basis: 500px;
2018-12-31 07:41:31 +11:00
.profile-panel-background .panel-heading {
2018-04-08 02:30:27 +10:00
background: transparent;
2018-08-31 05:59:52 +10:00
flex-direction: column;
align-items: stretch;
2018-04-08 02:30:27 +10:00
}
.userlist-placeholder {
display: flex;
justify-content: center;
align-items: middle;
padding: 2em;
}
.timeline-heading {
display: flex;
justify-content: center;
.loadmore-button, .alert {
flex: 1;
}
.loadmore-button {
height: 28px;
margin: 10px .6em;
}
.title, .loadmore-text {
display: none
}
}
}
.user-profile-placeholder {
.panel-body {
display: flex;
justify-content: center;
align-items: middle;
padding: 7em;
}
}
2016-12-08 19:09:21 +11:00
</style>