|
@@ -346,176 +346,176 @@
|
|
|
</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">
|
|
|
- <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
|
|
- </a>
|
|
|
- <div class="media-body">
|
|
|
- <p class="mb-0" style="font-size: 14px">
|
|
|
- <a :href="user.url" class="font-weight-bold text-dark">
|
|
|
- {{user.username}}
|
|
|
- </a>
|
|
|
- </p>
|
|
|
- <p class="text-muted mb-0" style="font-size: 14px">
|
|
|
- {{user.display_name}}
|
|
|
- </p>
|
|
|
+ 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">
|
|
|
+ <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
|
|
+ </a>
|
|
|
+ <div class="media-body">
|
|
|
+ <p class="mb-0" style="font-size: 14px">
|
|
|
+ <a :href="user.url" class="font-weight-bold text-dark">
|
|
|
+ {{user.username}}
|
|
|
+ </a>
|
|
|
+ </p>
|
|
|
+ <p class="text-muted mb-0" style="font-size: 14px">
|
|
|
+ {{user.display_name}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div v-if="owner">
|
|
|
+ <a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-if="owner">
|
|
|
- <a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
|
|
|
+ </div>
|
|
|
+ <div v-if="following.length == 0" class="list-group-item border-0">
|
|
|
+ <div class="list-group-item border-0">
|
|
|
+ <p class="p-3 text-center mb-0 lead"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div v-if="following.length == 0" class="list-group-item border-0">
|
|
|
- <div class="list-group-item border-0">
|
|
|
- <p class="p-3 text-center mb-0 lead"></p>
|
|
|
+ <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>
|
|
|
- <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 class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
|
|
|
- <div class="media">
|
|
|
- <a :href="user.url">
|
|
|
- <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
|
|
- </a>
|
|
|
- <div class="media-body">
|
|
|
- <p class="mb-0" style="font-size: 14px">
|
|
|
- <a :href="user.url" class="font-weight-bold text-dark">
|
|
|
- {{user.username}}
|
|
|
- </a>
|
|
|
- </p>
|
|
|
- <p class="text-muted mb-0" style="font-size: 14px">
|
|
|
- {{user.display_name}}
|
|
|
- </p>
|
|
|
+ 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">
|
|
|
+ <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
|
|
|
+ </a>
|
|
|
+ <div class="media-body">
|
|
|
+ <p class="mb-0" style="font-size: 14px">
|
|
|
+ <a :href="user.url" class="font-weight-bold text-dark">
|
|
|
+ {{user.username}}
|
|
|
+ </a>
|
|
|
+ </p>
|
|
|
+ <p class="text-muted mb-0" style="font-size: 14px">
|
|
|
+ {{user.display_name}}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <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>
|
|
|
- <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 class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
|
|
|
- Copy Link
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
|
|
|
- Follow
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
|
|
|
- Unfollow
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
|
|
|
- Mute
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
|
|
|
- Unmute
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
|
|
|
- Report User
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
|
|
|
- Block
|
|
|
- </div>
|
|
|
- <div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
|
|
|
- Unblock
|
|
|
- </div>
|
|
|
- <div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
|
|
|
- Settings
|
|
|
- </div>
|
|
|
- <div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
|
|
- Close
|
|
|
+ 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 class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
|
|
|
+ Copy Link
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
|
|
|
+ Follow
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
|
|
|
+ Unfollow
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
|
|
|
+ Mute
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
|
|
|
+ Unmute
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
|
|
|
+ Report User
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
|
|
|
+ Block
|
|
|
+ </div>
|
|
|
+ <div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
|
|
|
+ Unblock
|
|
|
+ </div>
|
|
|
+ <div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
|
|
|
+ Settings
|
|
|
+ </div>
|
|
|
+ <div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
|
|
|
+ Close
|
|
|
+ </div>
|
|
|
</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>
|
|
|
- </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>
|
|
|
+ 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>
|
|
|
</template>
|
|
|
<style type="text/css" scoped>
|
|
|
-.o-square {
|
|
|
- max-width: 320px;
|
|
|
-}
|
|
|
-.o-portrait {
|
|
|
- max-width: 320px;
|
|
|
-}
|
|
|
-.o-landscape {
|
|
|
- max-width: 320px;
|
|
|
-}
|
|
|
-.post-icon {
|
|
|
- color: #fff;
|
|
|
- position:relative;
|
|
|
- margin-top: 10px;
|
|
|
- z-index: 9;
|
|
|
- opacity: 0.6;
|
|
|
- text-shadow: 3px 3px 16px #272634;
|
|
|
-}
|
|
|
-.font-size-16px {
|
|
|
- font-size: 16px;
|
|
|
-}
|
|
|
-.profile-website {
|
|
|
- color: #003569;
|
|
|
- text-decoration: none;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-.nav-topbar .nav-link {
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-.nav-topbar .nav-link .small {
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
+ .o-square {
|
|
|
+ max-width: 320px;
|
|
|
+ }
|
|
|
+ .o-portrait {
|
|
|
+ max-width: 320px;
|
|
|
+ }
|
|
|
+ .o-landscape {
|
|
|
+ max-width: 320px;
|
|
|
+ }
|
|
|
+ .post-icon {
|
|
|
+ color: #fff;
|
|
|
+ position:relative;
|
|
|
+ margin-top: 10px;
|
|
|
+ z-index: 9;
|
|
|
+ opacity: 0.6;
|
|
|
+ text-shadow: 3px 3px 16px #272634;
|
|
|
+ }
|
|
|
+ .font-size-16px {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .profile-website {
|
|
|
+ color: #003569;
|
|
|
+ text-decoration: none;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .nav-topbar .nav-link {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .nav-topbar .nav-link .small {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
</style>
|
|
|
<script type="text/javascript">
|
|
|
import VueMasonry from 'vue-masonry-css'
|
|
|
|
|
|
- Vue.use(VueMasonry);
|
|
|
+
|
|
|
export default {
|
|
|
props: [
|
|
|
- 'profile-id',
|
|
|
- 'profile-layout',
|
|
|
- 'profile-settings',
|
|
|
- 'profile-username'
|
|
|
+ 'profile-id',
|
|
|
+ 'profile-layout',
|
|
|
+ 'profile-settings',
|
|
|
+ 'profile-username'
|
|
|
],
|
|
|
data() {
|
|
|
return {
|
|
@@ -557,6 +557,7 @@
|
|
|
this.fetchProfile();
|
|
|
let u = new URLSearchParams(window.location.search);
|
|
|
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
|
|
+ Vue.use(VueMasonry);
|
|
|
this.layout = 'moment';
|
|
|
}
|
|
|
if(u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
|
@@ -581,6 +582,11 @@
|
|
|
if(u.has('md') && u.get('md') == 'following') {
|
|
|
this.followingModal();
|
|
|
}
|
|
|
+ if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
|
|
+ axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
|
|
+ this.user = res.data;
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
updated() {
|
|
@@ -591,12 +597,12 @@
|
|
|
fetchProfile() {
|
|
|
axios.get('/api/v1/accounts/' + this.profileId).then(res => {
|
|
|
this.profile = res.data;
|
|
|
+ }).then(res => {
|
|
|
+ this.fetchPosts();
|
|
|
});
|
|
|
- if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
|
|
- axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
|
|
- this.user = res.data;
|
|
|
- });
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ fetchPosts() {
|
|
|
let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
|
|
|
axios.get(apiUrl, {
|
|
|
params: {
|
|
@@ -614,7 +620,7 @@
|
|
|
this.timeline = data;
|
|
|
this.ownerCheck();
|
|
|
this.loading = false;
|
|
|
- this.loadSponsor();
|
|
|
+ //this.loadSponsor();
|
|
|
}).catch(err => {
|
|
|
swal('Oops, something went wrong',
|
|
|
'Please release the page.',
|
|
@@ -825,7 +831,6 @@
|
|
|
});
|
|
|
},
|
|
|
|
|
|
-
|
|
|
unmuteProfile(status = null) {
|
|
|
if($('body').hasClass('loggedIn') == false) {
|
|
|
return;
|