|
|
@ -1,5 +1,5 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="w-100 h-100">
|
|
|
|
<div class="w-100 h-100">
|
|
|
|
<div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
|
|
|
|
<div v-if="relationship && relationship.blocking && warning" class="bg-white pt-3 border-bottom">
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<p class="text-center font-weight-bold">You are blocking this account</p>
|
|
|
|
<p class="text-center font-weight-bold">You are blocking this account</p>
|
|
|
@ -19,7 +19,12 @@
|
|
|
|
<div class="d-block d-md-none">
|
|
|
|
<div class="d-block d-md-none">
|
|
|
|
<div class="row">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-5">
|
|
|
|
<div class="col-5">
|
|
|
|
<img class="rounded-circle box-shadow mr-5" :src="profile.avatar" width="77px" height="77px">
|
|
|
|
<img class="rounded-circle box-shadow mr-2" :src="profile.avatar" width="77px" height="77px">
|
|
|
|
|
|
|
|
<p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-1 mr-2">
|
|
|
|
|
|
|
|
<button type="button" @click="showSponsorModal" class="btn btn-sm btn-outline-secondary font-weight-bold py-0">
|
|
|
|
|
|
|
|
Sponsor
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-7 pl-2">
|
|
|
|
<div class="col-7 pl-2">
|
|
|
|
<p class="align-middle">
|
|
|
|
<p class="align-middle">
|
|
|
@ -45,6 +50,12 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="d-none d-md-block">
|
|
|
|
<div class="d-none d-md-block">
|
|
|
|
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px">
|
|
|
|
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px">
|
|
|
|
|
|
|
|
<p v-if="sponsorList.patreon || sponsorList.liberapay || sponsorList.opencollective" class="text-center mt-3">
|
|
|
|
|
|
|
|
<button type="button" @click="showSponsorModal" class="btn btn-outline-secondary font-weight-bold py-0">
|
|
|
|
|
|
|
|
<i class="fas fa-heart text-danger"></i>
|
|
|
|
|
|
|
|
Sponsor
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -97,7 +108,7 @@
|
|
|
|
<span class="font-weight-bold pr-3">{{profile.display_name}}</span>
|
|
|
|
<span class="font-weight-bold pr-3">{{profile.display_name}}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
<div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div>
|
|
|
|
<div v-if="profile.note" class="mb-0 lead" v-html="profile.note"></div>
|
|
|
|
<p v-if="profile.website" class="mb-0"><a :href="profile.website" class="font-weight-bold" rel="me external nofollow noopener" target="_blank">{{profile.website}}</a></p>
|
|
|
|
<p v-if="profile.website" class=""><a :href="profile.website" class="font-weight-bold" rel="me external nofollow noopener" target="_blank">{{profile.website}}</a></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -133,7 +144,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white">
|
|
|
|
<div class="bg-white">
|
|
|
|
<ul class="nav nav-topbar d-flex justify-content-center border-0">
|
|
|
|
<ul class="nav nav-topbar d-flex justify-content-center border-0">
|
|
|
|
<!-- <li class="nav-item">
|
|
|
|
<!-- <li class="nav-item">
|
|
|
|
<a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
|
|
|
|
<a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
-->
|
|
|
|
-->
|
|
|
@ -141,21 +152,21 @@
|
|
|
|
<a :class="this.mode == 'grid' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th fa-lg"></i></a>
|
|
|
|
<a :class="this.mode == 'grid' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('grid')"><i class="fas fa-th fa-lg"></i></a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <li class="nav-item">
|
|
|
|
<!-- <li class="nav-item">
|
|
|
|
<a :class="this.mode == 'masonry' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('masonry')"><i class="fas fa-th-large"></i></a>
|
|
|
|
<a :class="this.mode == 'masonry' ? 'nav-link font-weight-bold text-uppercase active' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('masonry')"><i class="fas fa-th-large"></i></a>
|
|
|
|
</li> -->
|
|
|
|
</li> -->
|
|
|
|
|
|
|
|
|
|
|
|
<li class="nav-item px-3">
|
|
|
|
<li class="nav-item px-3">
|
|
|
|
<a :class="this.mode == 'list' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('list')"><i class="fas fa-th-list fa-lg"></i></a>
|
|
|
|
<a :class="this.mode == 'list' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('list')"><i class="fas fa-th-list fa-lg"></i></a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="nav-item" v-if="owner">
|
|
|
|
<li class="nav-item" v-if="owner">
|
|
|
|
<a class="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</a>
|
|
|
|
<a class="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
<div class="container">
|
|
|
|
<div class="profile-timeline mt-md-4">
|
|
|
|
<div class="profile-timeline mt-md-4">
|
|
|
|
<div class="row" v-if="mode == 'grid'">
|
|
|
|
<div class="row" v-if="mode == 'grid'">
|
|
|
|
<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in timeline">
|
|
|
|
<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in timeline">
|
|
|
@ -290,10 +301,10 @@
|
|
|
|
</infinite-loading>
|
|
|
|
</infinite-loading>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div v-if="profileLayout == 'moment'">
|
|
|
|
<div v-if="profileLayout == 'moment'">
|
|
|
|
<div :class="momentBackground()" style="width:100%;min-height:274px;">
|
|
|
|
<div :class="momentBackground()" style="width:100%;min-height:274px;">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="bg-white border-bottom">
|
|
|
|
<div class="bg-white border-bottom">
|
|
|
@ -370,18 +381,18 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</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">
|
|
|
|
<!-- <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>
|
|
|
|
<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> -->
|
|
|
|
</b-modal> -->
|
|
|
|
<b-modal ref="followingModal"
|
|
|
|
<b-modal ref="followingModal"
|
|
|
|
id="following-modal"
|
|
|
|
id="following-modal"
|
|
|
|
hide-footer
|
|
|
|
hide-footer
|
|
|
|
centered
|
|
|
|
centered
|
|
|
|
title="Following"
|
|
|
|
title="Following"
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
<div class="list-group">
|
|
|
|
<div class="list-group">
|
|
|
|
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
|
|
|
|
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
|
|
|
|
<div class="media">
|
|
|
|
<div class="media">
|
|
|
|
<a :href="user.url">
|
|
|
|
<a :href="user.url">
|
|
|
@ -410,15 +421,15 @@
|
|
|
|
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
|
|
|
|
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
|
|
|
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
|
|
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</b-modal>
|
|
|
|
</b-modal>
|
|
|
|
<b-modal ref="followerModal"
|
|
|
|
<b-modal ref="followerModal"
|
|
|
|
id="follower-modal"
|
|
|
|
id="follower-modal"
|
|
|
|
hide-footer
|
|
|
|
hide-footer
|
|
|
|
centered
|
|
|
|
centered
|
|
|
|
title="Followers"
|
|
|
|
title="Followers"
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
<div class="list-group">
|
|
|
|
<div class="list-group">
|
|
|
|
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
|
|
|
|
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
|
|
|
|
<div class="media">
|
|
|
|
<div class="media">
|
|
|
|
<a :href="user.url">
|
|
|
|
<a :href="user.url">
|
|
|
@ -439,16 +450,16 @@
|
|
|
|
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
|
|
|
|
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
|
|
|
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
|
|
|
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</b-modal>
|
|
|
|
</b-modal>
|
|
|
|
<b-modal ref="visitorContextMenu"
|
|
|
|
<b-modal ref="visitorContextMenu"
|
|
|
|
id="visitor-context-menu"
|
|
|
|
id="visitor-context-menu"
|
|
|
|
hide-footer
|
|
|
|
hide-footer
|
|
|
|
hide-header
|
|
|
|
hide-header
|
|
|
|
centered
|
|
|
|
centered
|
|
|
|
size="sm"
|
|
|
|
size="sm"
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
<div class="list-group" v-if="relationship">
|
|
|
|
<div class="list-group" v-if="relationship">
|
|
|
|
<div v-if="!owner && !relationship.following" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-primary" @click="followProfile">
|
|
|
|
<div v-if="!owner && !relationship.following" class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-primary" @click="followProfile">
|
|
|
|
Follow
|
|
|
|
Follow
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -473,42 +484,62 @@
|
|
|
|
<div class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
|
|
|
<div class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
|
|
|
Close
|
|
|
|
Close
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</b-modal>
|
|
|
|
</b-modal>
|
|
|
|
|
|
|
|
<b-modal ref="sponsorModal"
|
|
|
|
|
|
|
|
id="sponsor-modal"
|
|
|
|
|
|
|
|
hide-footer
|
|
|
|
|
|
|
|
:title="'Sponsor ' + profileUsername"
|
|
|
|
|
|
|
|
centered
|
|
|
|
|
|
|
|
size="md"
|
|
|
|
|
|
|
|
body-class="px-5">
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
<p class="font-weight-bold">External Links</p>
|
|
|
|
|
|
|
|
<p v-if="sponsorList.patreon" class="pt-2">
|
|
|
|
|
|
|
|
<a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p v-if="sponsorList.liberapay" class="pt-2">
|
|
|
|
|
|
|
|
<a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<p v-if="sponsorList.opencollective" class="pt-2">
|
|
|
|
|
|
|
|
<a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</b-modal>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<!-- <style type="text/css" scoped="">
|
|
|
|
<!-- <style type="text/css" scoped="">
|
|
|
|
.modal-body {
|
|
|
|
.modal-body {
|
|
|
|
padding: 0;
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
.modal-lg, .modal-xl {
|
|
|
|
.modal-lg, .modal-xl {
|
|
|
|
max-width: 900px;
|
|
|
|
max-width: 900px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> -->
|
|
|
|
</style> -->
|
|
|
|
<style type="text/css" scoped>
|
|
|
|
<style type="text/css" scoped>
|
|
|
|
.o-square {
|
|
|
|
.o-square {
|
|
|
|
max-width: 320px;
|
|
|
|
max-width: 320px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.o-portrait {
|
|
|
|
.o-portrait {
|
|
|
|
max-width: 320px;
|
|
|
|
max-width: 320px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.o-landscape {
|
|
|
|
.o-landscape {
|
|
|
|
max-width: 320px;
|
|
|
|
max-width: 320px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.post-icon {
|
|
|
|
.post-icon {
|
|
|
|
color: #fff;
|
|
|
|
color: #fff;
|
|
|
|
position:relative;
|
|
|
|
position:relative;
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-top: 10px;
|
|
|
|
z-index: 9;
|
|
|
|
z-index: 9;
|
|
|
|
opacity: 0.6;
|
|
|
|
opacity: 0.6;
|
|
|
|
text-shadow: 3px 3px 16px #272634;
|
|
|
|
text-shadow: 3px 3px 16px #272634;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
|
|
<script type="text/javascript">
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
props: [
|
|
|
|
props: [
|
|
|
|
'profile-id',
|
|
|
|
'profile-id',
|
|
|
|
'profile-layout',
|
|
|
|
'profile-layout',
|
|
|
@ -536,7 +567,8 @@ export default {
|
|
|
|
following: [],
|
|
|
|
following: [],
|
|
|
|
followingCursor: 1,
|
|
|
|
followingCursor: 1,
|
|
|
|
followingMore: true,
|
|
|
|
followingMore: true,
|
|
|
|
warning: false
|
|
|
|
warning: false,
|
|
|
|
|
|
|
|
sponsorList: [],
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
beforeMount() {
|
|
|
|
beforeMount() {
|
|
|
@ -588,6 +620,7 @@ export default {
|
|
|
|
this.timeline = data;
|
|
|
|
this.timeline = data;
|
|
|
|
this.ownerCheck();
|
|
|
|
this.ownerCheck();
|
|
|
|
this.loading = false;
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
this.loadSponsor();
|
|
|
|
}).catch(err => {
|
|
|
|
}).catch(err => {
|
|
|
|
swal(
|
|
|
|
swal(
|
|
|
|
'Oops, something went wrong',
|
|
|
|
'Oops, something went wrong',
|
|
|
@ -1085,7 +1118,18 @@ export default {
|
|
|
|
c += 'bg-pixelfed';
|
|
|
|
c += 'bg-pixelfed';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return c;
|
|
|
|
return c;
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
loadSponsor() {
|
|
|
|
|
|
|
|
axios.get('/api/local/profile/sponsor/' + this.profileId)
|
|
|
|
|
|
|
|
.then(res => {
|
|
|
|
|
|
|
|
this.sponsorList = res.data;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
showSponsorModal() {
|
|
|
|
|
|
|
|
this.$refs.sponsorModal.show();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|