mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 22:41:27 +00:00
Update Profile.vue component, add MomentUI
This commit is contained in:
parent
bdcdb7b249
commit
842574acd1
1 changed files with 305 additions and 250 deletions
|
@ -10,6 +10,7 @@
|
|||
<img src="/img/pixelfed-icon-grey.svg" class="">
|
||||
</div>
|
||||
<div v-if="!loading && !warning">
|
||||
<div v-if="profileLayout == 'metro'">
|
||||
<div class="bg-white py-5 border-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
@ -291,6 +292,59 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="profileLayout == 'moment'">
|
||||
<div class="w-100 h-100 mt-n3 bg-pixelfed" style="width:100%;min-height:274px;">
|
||||
</div>
|
||||
<div class="bg-white border-bottom">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-center">
|
||||
<div class="profile-details my-3">
|
||||
<p class="font-weight-ultralight h2 text-center">{{profile.username}}</p>
|
||||
<div v-if="profile.note" class="text-center text-muted p-3" v-html="profile.note"></div>
|
||||
<div class="pb-3 text-muted text-center">
|
||||
<a class="text-lighter" :href="profile.url">
|
||||
<span class="font-weight-bold">{{profile.statuses_count}}</span>
|
||||
Posts
|
||||
</a>
|
||||
<a v-if="profileSettings.followers.count" class="text-lighter cursor-pointer px-3" v-on:click="followersModal()">
|
||||
<span class="font-weight-bold">{{profile.followers_count}}</span>
|
||||
Followers
|
||||
</a>
|
||||
<a v-if="profileSettings.following.count" class="text-lighter cursor-pointer" v-on:click="followingModal()">
|
||||
<span class="font-weight-bold">{{profile.following_count}}</span>
|
||||
Following
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div class="profile-timeline mt-md-4">
|
||||
<div class="card-columns" v-if="mode == 'grid'">
|
||||
<div class="p-sm-2 p-md-3" v-for="(s, index) in timeline">
|
||||
<a class="card info-overlay card-md-border-0" :href="s.url">
|
||||
<img :src="s.media_attachments[0].url" class="img-fluid">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="timeline.length">
|
||||
<infinite-loading @infinite="infiniteTimeline">
|
||||
<div slot="no-more"></div>
|
||||
<div slot="no-results"></div>
|
||||
</infinite-loading>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <b-modal id="statusModal" ref="statusModalRef" hide-footer hide-header v-if="modalStatus" size="lg" v-on:hide.native="closeModal()" lazy class="border-0">
|
||||
<post-component v-bind:status-template="modalStatus.pf_type" v-bind:status-id="modalStatus.id" v-bind:status-username="modalStatus.account.username" v-bind:status-url="modalStatus.url" v-bind:status-profile-url="modalStatus.account.url" v-bind:status-avatar="modalStatus.account.avatar"></post-component>
|
||||
</b-modal> -->
|
||||
|
@ -422,7 +476,8 @@
|
|||
export default {
|
||||
props: [
|
||||
'profile-id',
|
||||
'profile-settings'
|
||||
'profile-settings',
|
||||
'profile-layout'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
|
|
Loading…
Reference in a new issue