|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<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 class="container">
|
|
|
|
|
<p class="text-center font-weight-bold">You are blocking this account</p>
|
|
|
|
@ -144,29 +144,24 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-white">
|
|
|
|
|
<ul class="nav nav-topbar d-flex justify-content-center border-0">
|
|
|
|
|
<!-- <li class="nav-item">
|
|
|
|
|
<a class="nav-link active font-weight-bold text-uppercase" :href="profile.url">Posts</a>
|
|
|
|
|
</li>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<li class="nav-item">
|
|
|
|
|
<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 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>
|
|
|
|
|
</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>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="nav-item" v-if="owner">
|
|
|
|
|
<a class="nav-link font-weight-bold text-uppercase" :href="profile.url + '/saved'">Saved</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</li>
|
|
|
|
|
<!-- <li class="nav-item pr-3">
|
|
|
|
|
<a :class="this.mode == 'collections' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images fa-lg"></i></a>
|
|
|
|
|
</li> -->
|
|
|
|
|
<li class="nav-item" v-if="owner">
|
|
|
|
|
<a :class="this.mode == 'bookmarks' ? 'nav-link font-weight-bold text-uppercase text-primary' : 'nav-link font-weight-bold text-uppercase'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark fa-lg"></i></a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="profile-timeline mt-md-4">
|
|
|
|
|
<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">
|
|
|
|
@ -287,24 +282,45 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="masonry-grid" v-if="mode == 'masonry'">
|
|
|
|
|
<div class="d-inline p-0 p-sm-2 p-md-3 masonry-item" v-for="(status, index) in timeline">
|
|
|
|
|
<a class="" v-on:click.prevent="statusModal(status)" :href="status.url">
|
|
|
|
|
<img :src="previewUrl(status)" :class="'o-'+masonryOrientation(status)">
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="timeline.length">
|
|
|
|
|
<div v-if="timeline.length && ['grid','list'].indexOf(mode) != -1">
|
|
|
|
|
<infinite-loading @infinite="infiniteTimeline">
|
|
|
|
|
<div slot="no-more"></div>
|
|
|
|
|
<div slot="no-results"></div>
|
|
|
|
|
</infinite-loading>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" v-if="mode == 'bookmarks'">
|
|
|
|
|
<div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in bookmarks">
|
|
|
|
|
<a class="card info-overlay card-md-border-0" :href="s.url">
|
|
|
|
|
<div class="square">
|
|
|
|
|
<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
|
|
|
|
|
<span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
|
|
|
|
|
<span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
|
|
|
|
|
<div class="square-content" v-bind:style="previewBackground(s)">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="info-overlay-text">
|
|
|
|
|
<h5 class="text-white m-auto font-weight-bold">
|
|
|
|
|
<span>
|
|
|
|
|
<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
|
|
|
|
|
<span class="d-flex-inline">{{s.favourites_count}}</span>
|
|
|
|
|
</span>
|
|
|
|
|
<span>
|
|
|
|
|
<span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
|
|
|
|
|
<span class="d-flex-inline">{{s.reblogs_count}}</span>
|
|
|
|
|
</span>
|
|
|
|
|
</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row" v-if="mode == 'collections'">
|
|
|
|
|
<p class="text-center">Collections here</p>
|
|
|
|
|
</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>
|
|
|
|
|
<div class="bg-white border-bottom">
|
|
|
|
@ -381,18 +397,15 @@
|
|
|
|
|
</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> -->
|
|
|
|
|
<b-modal ref="followingModal"
|
|
|
|
|
id="following-modal"
|
|
|
|
|
hide-footer
|
|
|
|
|
centered
|
|
|
|
|
title="Following"
|
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
|
<div class="list-group">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<b-modal ref="followingModal"
|
|
|
|
|
id="following-modal"
|
|
|
|
|
hide-footer
|
|
|
|
|
centered
|
|
|
|
|
title="Following"
|
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
|
<div class="list-group">
|
|
|
|
|
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
|
|
|
|
|
<div class="media">
|
|
|
|
|
<a :href="user.url">
|
|
|
|
@ -421,15 +434,15 @@ body-class="list-group-flush p-0">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</b-modal>
|
|
|
|
|
<b-modal ref="followerModal"
|
|
|
|
|
id="follower-modal"
|
|
|
|
|
hide-footer
|
|
|
|
|
centered
|
|
|
|
|
title="Followers"
|
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
|
<div class="list-group">
|
|
|
|
|
</div>
|
|
|
|
|
</b-modal>
|
|
|
|
|
<b-modal ref="followerModal"
|
|
|
|
|
id="follower-modal"
|
|
|
|
|
hide-footer
|
|
|
|
|
centered
|
|
|
|
|
title="Followers"
|
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
|
<div class="list-group">
|
|
|
|
|
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
|
|
|
|
|
<div class="media">
|
|
|
|
|
<a :href="user.url">
|
|
|
|
@ -450,16 +463,16 @@ body-class="list-group-flush p-0">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</b-modal>
|
|
|
|
|
<b-modal ref="visitorContextMenu"
|
|
|
|
|
id="visitor-context-menu"
|
|
|
|
|
hide-footer
|
|
|
|
|
hide-header
|
|
|
|
|
centered
|
|
|
|
|
size="sm"
|
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
|
<div class="list-group" v-if="relationship">
|
|
|
|
|
</div>
|
|
|
|
|
</b-modal>
|
|
|
|
|
<b-modal ref="visitorContextMenu"
|
|
|
|
|
id="visitor-context-menu"
|
|
|
|
|
hide-footer
|
|
|
|
|
hide-header
|
|
|
|
|
centered
|
|
|
|
|
size="sm"
|
|
|
|
|
body-class="list-group-flush p-0">
|
|
|
|
|
<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">
|
|
|
|
|
Follow
|
|
|
|
|
</div>
|
|
|
|
@ -484,16 +497,16 @@ body-class="list-group-flush p-0">
|
|
|
|
|
<div class="list-group-item cursor-pointer text-center font-weight-bold lead rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
|
|
|
|
Close
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</b-modal>
|
|
|
|
|
<b-modal ref="sponsorModal"
|
|
|
|
|
id="sponsor-modal"
|
|
|
|
|
hide-footer
|
|
|
|
|
:title="'Sponsor ' + profileUsername"
|
|
|
|
|
centered
|
|
|
|
|
size="md"
|
|
|
|
|
body-class="px-5">
|
|
|
|
|
<div>
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
@ -504,21 +517,10 @@ body-class="px-5">
|
|
|
|
|
<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>
|
|
|
|
|
</b-modal>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- <style type="text/css" scoped="">
|
|
|
|
|
.modal-body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
|
.modal-lg, .modal-xl {
|
|
|
|
|
max-width: 900px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style> -->
|
|
|
|
|
<style type="text/css" scoped>
|
|
|
|
|
.o-square {
|
|
|
|
|
max-width: 320px;
|
|
|
|
@ -558,7 +560,7 @@ max-width: 900px;
|
|
|
|
|
loading: true,
|
|
|
|
|
owner: false,
|
|
|
|
|
mode: 'grid',
|
|
|
|
|
modes: ['grid', 'list', 'masonry'],
|
|
|
|
|
modes: ['grid', 'list', 'masonry', 'bookmarks'],
|
|
|
|
|
modalStatus: false,
|
|
|
|
|
relationship: {},
|
|
|
|
|
followers: [],
|
|
|
|
@ -569,6 +571,10 @@ max-width: 900px;
|
|
|
|
|
followingMore: true,
|
|
|
|
|
warning: false,
|
|
|
|
|
sponsorList: [],
|
|
|
|
|
bookmarks: [],
|
|
|
|
|
bookmarksPage: 2,
|
|
|
|
|
collections: [],
|
|
|
|
|
collectionsPage: 2
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
beforeMount() {
|
|
|
|
@ -676,10 +682,10 @@ max-width: 900px;
|
|
|
|
|
|
|
|
|
|
switchMode(mode) {
|
|
|
|
|
this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
|
|
|
|
|
if(this.mode == 'masonry') {
|
|
|
|
|
$('.masonry').masonry({
|
|
|
|
|
columnWidth: 200,
|
|
|
|
|
itemSelector: '.masonry-item'
|
|
|
|
|
if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
|
|
|
|
|
axios.get('/api/local/bookmarks')
|
|
|
|
|
.then(res => {
|
|
|
|
|
this.bookmarks = res.data
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|