Update Profile.vue component, add MomentUI

This commit is contained in:
Daniel Supernault 2019-04-17 13:05:53 -06:00
parent bdcdb7b249
commit 842574acd1
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -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 {