mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 00:34:50 +00:00
Update components
This commit is contained in:
Daniel Supernault
parent
eaafe13249
commit
692a73ec0b
6 changed files with 76 additions and 311 deletions
|
|
@ -67,8 +67,37 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-between align-items-center pt-3">
|
<div class="d-flex justify-content-between align-items-center pt-3">
|
||||||
<a class="text-primary font-weight-bold text-decoration-none" href="#" @click.prevent="showEditPhotosModal">Edit Photos</a>
|
<a
|
||||||
<button type="button" class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right" @click.prevent="updateCollection">Save</button>
|
class="text-primary font-weight-bold text-decoration-none"
|
||||||
|
href="#"
|
||||||
|
@click.prevent="showEditPhotosModal">
|
||||||
|
Edit Photos
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div v-if="collection.published_at">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary btn-sm py-1 font-weight-bold px-3 float-right"
|
||||||
|
@click.prevent="updateCollection">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="float-right">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-outline-primary btn-sm py-1 font-weight-bold px-3"
|
||||||
|
@click.prevent="publishCollection">
|
||||||
|
Publish
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary btn-sm py-1 font-weight-bold px-3"
|
||||||
|
@click.prevent="updateCollection">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</b-modal>
|
</b-modal>
|
||||||
|
|
@ -161,6 +190,7 @@ export default {
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
collection: {},
|
||||||
config: window.App.config,
|
config: window.App.config,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
posts: [],
|
posts: [],
|
||||||
|
|
@ -179,14 +209,21 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
this.fetchCurrentUser();
|
this.fetchCollection();
|
||||||
this.fetchItems();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
fetchCollection() {
|
||||||
|
axios.get('/api/local/collection/' + this.collectionId)
|
||||||
|
.then(res => {
|
||||||
|
this.collection = res.data;
|
||||||
|
this.fetchCurrentUser();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
fetchCurrentUser() {
|
fetchCurrentUser() {
|
||||||
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
|
||||||
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
|
axios.get('/api/pixelfed/v1/accounts/verify_credentials').then(res => {
|
||||||
|
|
@ -194,9 +231,13 @@ export default {
|
||||||
this.owner = this.currentUser.id == this.profileId;
|
this.owner = this.currentUser.id == this.profileId;
|
||||||
window._sharedData.curUser = res.data;
|
window._sharedData.curUser = res.data;
|
||||||
window.App.util.navatar();
|
window.App.util.navatar();
|
||||||
|
this.fetchItems();
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
this.fetchItems();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
fetchItems() {
|
fetchItems() {
|
||||||
axios.get('/api/local/collection/items/' + this.collectionId)
|
axios.get('/api/local/collection/items/' + this.collectionId)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
|
|
@ -296,6 +337,26 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
publishCollection() {
|
||||||
|
if(this.owner == false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let confirmed = window.confirm('Are you sure you want to publish this collection?');
|
||||||
|
if(confirmed) {
|
||||||
|
axios.post('/api/local/collection/' + this.collectionId + '/publish', {
|
||||||
|
title: this.title,
|
||||||
|
description: this.description,
|
||||||
|
visibility: this.visibility
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
window.location.href = '/';
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
updateCollection() {
|
updateCollection() {
|
||||||
this.$refs.editModal.hide();
|
this.$refs.editModal.hide();
|
||||||
axios.post('/api/local/collection/' + this.collectionId, {
|
axios.post('/api/local/collection/' + this.collectionId, {
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@
|
||||||
</b-carousel-slide>
|
</b-carousel-slide>
|
||||||
</b-carousel>
|
</b-carousel>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="bg-dark align-items-center">
|
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="bg-dark align-items-center">
|
||||||
<ul class="nav media-drawer-filters text-center">
|
<ul class="nav media-drawer-filters text-center">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="p-1 pt-3">
|
<div class="p-1 pt-3">
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="ids.length > 0 && ['Image', 'Video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
|
<div v-if="ids.length > 0 && ['image', 'video'].indexOf(media[carouselCursor].type) != -1" class="bg-lighter p-2 row">
|
||||||
<div v-if="media[carouselCursor].type == 'Image'" class="col-12">
|
<div v-if="media[carouselCursor].type == 'Image'" class="col-12">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
|
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
|
||||||
|
|
|
||||||
|
|
@ -358,7 +358,7 @@
|
||||||
<img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
|
<img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
|
||||||
</div>
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
|
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
|
||||||
<ul class="nav media-drawer-filters text-center">
|
<ul class="nav media-drawer-filters text-center">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="p-1 pt-3">
|
<div class="p-1 pt-3">
|
||||||
|
|
@ -395,7 +395,7 @@
|
||||||
<li class="nav-item mx-md-4"> </li>
|
<li class="nav-item mx-md-4"> </li>
|
||||||
</ul>
|
</ul>
|
||||||
<hr>
|
<hr>
|
||||||
<div v-if="ids.length > 0 && media[carouselCursor].type == 'Image'" class="align-items-center px-2 pt-2">
|
<div v-if="ids.length > 0 && media[carouselCursor].type == 'image'" class="align-items-center px-2 pt-2">
|
||||||
<ul class="nav media-drawer-filters text-center">
|
<ul class="nav media-drawer-filters text-center">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<div class="p-1 pt-3">
|
<div class="p-1 pt-3">
|
||||||
|
|
|
||||||
|
|
@ -283,178 +283,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="layout == 'moment'" class="momentui">
|
|
||||||
<div class="bg-dark mt-md-n4">
|
|
||||||
<div class="container" style="max-width: 700px;">
|
|
||||||
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center bg-dark">
|
|
||||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
|
||||||
<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
|
||||||
<video-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-presenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
|
|
||||||
<photo-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-album-presenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="status.pf_type === 'video:album'" class="w-100">
|
|
||||||
<video-album-presenter :status="status" v-on:togglecw="status.sensitive = false"></video-album-presenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
|
|
||||||
<mixed-album-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></mixed-album-presenter>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else class="w-100">
|
|
||||||
<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row pb-5">
|
|
||||||
<div class="col-12 col-md-8 py-4">
|
|
||||||
<div class="reactions d-flex align-items-center">
|
|
||||||
<div class="text-center mr-5">
|
|
||||||
<div v-bind:class="[reactions.liked ? 'fas fa-heart text-danger m-0 cursor-pointer' : 'far fa-heart m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus" style="font-size:1.575rem">
|
|
||||||
</div>
|
|
||||||
<div class="like-count font-weight-bold mt-2 rounded border" style="cursor:pointer;" v-on:click="likesModal">
|
|
||||||
|
|
||||||
{{ownerOrAdmin == true ? (status.liked_by.total_count + 1) : 0}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="text-center">
|
|
||||||
<div v-if="status.visibility == 'public'" v-bind:class="[reactions.shared ? 'h3 far fa-share-square m-0 text-primary cursor-pointer' : 'h3 far fa-share-square m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus">
|
|
||||||
</div>
|
|
||||||
<div class="share-count font-weight-bold mt-2 rounded border" v-if="status.visibility == 'public'" style="cursor:pointer;" v-on:click="sharesModal">{{status.reblogs_count || 0}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="status.length && status.content_text.includes('#') || status.content_text.includes('https://') || status.content_text.includes('@') || status.content_text.length > 45" class="media align-items-center mt-3">
|
|
||||||
<div class="media-body">
|
|
||||||
<p class="lead mr-2" v-html="status.content">
|
|
||||||
</p>
|
|
||||||
<p class="lead mb-0">
|
|
||||||
by <a :href="statusProfileUrl">{{statusUsername}}</a>
|
|
||||||
<span v-if="relationship && profile && user && !relationship.following && profile.id != user.id">
|
|
||||||
<span class="px-1 text-lighter">•</span>
|
|
||||||
<a class="font-weight-bold small" href="#">Follow</a>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
|
|
||||||
</div>
|
|
||||||
<div v-else class="media align-items-center mt-3">
|
|
||||||
<div class="media-body">
|
|
||||||
<h2 class="font-weight-bold mr-2">
|
|
||||||
{{status.content_text.length ? status.content_text : 'Untitled Post'}}
|
|
||||||
</h2>
|
|
||||||
<p class="lead mb-0">
|
|
||||||
by <a :href="statusProfileUrl">{{statusUsername}}</a>
|
|
||||||
<!-- <span class="px-1 text-lighter">•</span>
|
|
||||||
<a class="font-weight-bold small" href="#">Follow</a> -->
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<a :href="statusProfileUrl" :title="statusUsername"><img :src="statusAvatar" class="rounded-circle border mr-3" alt="avatar" width="72px" height="72px"></a>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div>
|
|
||||||
<p class="lead">
|
|
||||||
<span v-if="status.place" class="text-truncate">
|
|
||||||
<i class="fas fa-map-marker-alt text-lighter mr-3"></i> {{status.place.name}}, {{status.place.country}}
|
|
||||||
</span>
|
|
||||||
<span v-once class="float-right">
|
|
||||||
<i class="far fa-clock text-lighter mr-3"></i> {{timeAgo(status.created_at)}} ago
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<!-- <div class="">
|
|
||||||
<p class="lead">
|
|
||||||
<span class="mr-3"><i class="fas fa-camera text-lighter"></i></span>
|
|
||||||
<span>Nikon D850</span>
|
|
||||||
</p>
|
|
||||||
<p class="lead">
|
|
||||||
<span class="mr-3"><i class="fas fa-ruler-horizontal text-lighter"></i></span>
|
|
||||||
<span>200-500mm</span>
|
|
||||||
</p>
|
|
||||||
<p class="lead">
|
|
||||||
<span class="mr-3"><i class="fas fa-stream text-lighter"></i></span>
|
|
||||||
<span>500mm <span class="px-1"></span> ƒ/7.1 <span class="px-1"></span> 1/1600s <span class="px-1"></span> ISO 800</span>
|
|
||||||
</p>
|
|
||||||
</div> -->
|
|
||||||
<div v-if="status.tags" class="pt-4">
|
|
||||||
<p class="lead">
|
|
||||||
<a v-for="(tag, index) in status.tags" class="btn btn-outline-dark mr-1 mb-1" :href="tag.url + '?src=mp'">{{tag.name}}</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-4 pt-4 pl-md-3">
|
|
||||||
<p class="lead font-weight-bold">Comments</p>
|
|
||||||
<div v-if="user != false" class="moment-comments">
|
|
||||||
<div class="form-group">
|
|
||||||
<textarea class="form-control" rows="3" placeholder="Add a comment ..." v-model="replyText"></textarea>
|
|
||||||
<p class="d-flex justify-content-between align-items-center mt-3">
|
|
||||||
<span class="small text-lighter font-weight-bold">
|
|
||||||
{{replyText.length}}/{{config.uploader.max_caption_length}}
|
|
||||||
</span>
|
|
||||||
<span v-if="replyText.length > 2">
|
|
||||||
<div class="custom-control custom-switch">
|
|
||||||
<input type="checkbox" class="custom-control-input" @click="!!replySensitive" v-model="replySensitive" id="sensitiveReply">
|
|
||||||
<label class="custom-control-label small font-weight-bold text-muted" style="padding-top: 3px" for="sensitiveReply">Add Content Warning</label>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<button class="btn btn-sm font-weight-bold btn-outline-primary py-1"
|
|
||||||
v-if="replyText.length > 2" @click="postReply">Post</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="comment mt-4" style="max-height: 500px; overflow-y: auto;">
|
|
||||||
<div v-for="(reply, index) in results" :key="'tl' + reply.id + '_' + index" class="media mb-3 mt-2">
|
|
||||||
<a :href="reply.account.url" :title="reply.account.username"><img :src="reply.account.avatar" class="rounded-circle border mr-3" alt="avatar" width="32px" height="32px"></a>
|
|
||||||
<div class="media-body">
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<span>
|
|
||||||
<a class="font-weight-bold text-dark" :href="reply.account.url">{{reply.account.username}}</a>
|
|
||||||
</span>
|
|
||||||
<span class="text-lighter">
|
|
||||||
<span v-if="reply.favourited" class="cursor-pointer mr-2" @click="likeReply(reply)">
|
|
||||||
<i class="fas fa-heart text-danger"></i>
|
|
||||||
</span>
|
|
||||||
<span v-else class="cursor-pointer mr-2" @click="likeReply(reply)">
|
|
||||||
<i class="far fa-heart"></i>
|
|
||||||
</span>
|
|
||||||
<span class="">
|
|
||||||
<post-menu :status="reply" :profile="user" :size="'sm'" :modal="'true'" class="d-inline-block px-2" v-on:deletePost="deleteComment(reply.id, index)"></post-menu>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="reply.sensitive == true">
|
|
||||||
<span class="py-3">
|
|
||||||
<span class="text-break">
|
|
||||||
<span class="font-italic text-muted">This comment may contain sensitive material</span>
|
|
||||||
<span class="badge badge-primary cursor-pointer ml-2 py-1" @click="reply.sensitive = false;">Show</span>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div v-else class="read-more" style="overflow-y: hidden;">
|
|
||||||
<p v-html="reply.content" class="mb-0">loading ...</p>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
<span class="small">
|
|
||||||
<a class="text-lighter text-decoration-none" :href="reply.url">{{timeAgo(reply.created_at)}}</a>
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="layout == 'poll'" class="container px-0">
|
<div v-if="layout == 'poll'" class="container px-0">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-12 col-md-6">
|
<div class="col-12 col-md-6">
|
||||||
|
|
@ -833,19 +661,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style type="text/css" scoped>
|
|
||||||
.momentui .bg-dark {
|
|
||||||
background: #000 !important;
|
|
||||||
}
|
|
||||||
.momentui .carousel.slide,
|
|
||||||
.momentui .carousel-item {
|
|
||||||
background: #000 !important;
|
|
||||||
}
|
|
||||||
.reply-btn[disabled] {
|
|
||||||
opacity: .3;
|
|
||||||
color: #3897f0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VueTribute from 'vue-tribute';
|
import VueTribute from 'vue-tribute';
|
||||||
|
|
@ -1042,11 +857,6 @@ export default {
|
||||||
}
|
}
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
|
|
||||||
if(this.profileRecent !== false) {
|
|
||||||
setTimeout(function() {
|
|
||||||
self.fetchProfilePosts();
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
self.fetchState();
|
self.fetchState();
|
||||||
document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
|
document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="w-100 h-100">
|
<div class="w-100 h-100">
|
||||||
<div v-if="owner && layout == 'moment'">
|
|
||||||
<div class="bg-primary shadow">
|
|
||||||
<p class="text-center text-white mb-0 py-3 font-weight-bold border-bottom border-info">
|
|
||||||
<i class="fas fa-exclamation-triangle fa-lg mr-2"></i> The Moment UI layout has been deprecated and will be removed in a future release.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="isMobile" class="bg-white p-3 border-bottom">
|
<div v-if="isMobile" class="bg-white p-3 border-bottom">
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<div @click="goBack" class="cursor-pointer">
|
<div @click="goBack" class="cursor-pointer">
|
||||||
|
|
@ -328,97 +321,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="layout == 'moment'" class="mt-3">
|
|
||||||
<div :class="momentBackground()" style="width:100%;min-height:274px;">
|
|
||||||
</div>
|
|
||||||
<div class="bg-white border-bottom">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 row mx-0">
|
|
||||||
<div class="col-4 text-left mt-2">
|
|
||||||
<span v-if="relationship && relationship.followed_by">
|
|
||||||
<span class="bg-light border border-secondary font-weight-bold small py-1 px-2 text-muted rounded">FOLLOWS YOU</span>
|
|
||||||
</span>
|
|
||||||
<span v-if="profile.is_admin">
|
|
||||||
<span class="bg-light border border-danger font-weight-bold small py-1 px-2 text-danger rounded">ADMIN</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 text-center">
|
|
||||||
<div class="d-block d-md-none">
|
|
||||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="110px" height="110px" style="margin-top:-60px; border: 5px solid #fff">
|
|
||||||
</div>
|
|
||||||
<div class="d-none d-md-block">
|
|
||||||
<img class="rounded-circle box-shadow" :src="profile.avatar" width="172px" height="172px" style="margin-top:-90px; border: 5px solid #fff">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 text-right mt-2">
|
|
||||||
<span class="d-none d-md-inline-block pl-4">
|
|
||||||
<a :href="'/users/'+profile.username+'.atom'" class="fas fa-rss fa-lg text-muted text-decoration-none"></a>
|
|
||||||
</span>
|
|
||||||
<span class="pl-md-4 pl-sm-2" v-if="owner">
|
|
||||||
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="/settings/home"></a>
|
|
||||||
</span>
|
|
||||||
<span class="pl-md-4 pl-sm-2" v-if="profile.id != user.id && user.hasOwnProperty('id')">
|
|
||||||
<a class="fas fa-cog fa-lg text-muted text-decoration-none" href="#" @click.prevent="visitorMenu"></a>
|
|
||||||
</span>
|
|
||||||
<span v-if="profile.id != user.id && user.hasOwnProperty('id')">
|
|
||||||
<span class="pl-md-4 pl-sm-2" v-if="relationship.following == true">
|
|
||||||
<button type="button" class="btn btn-outline-secondary font-weight-bold btn-sm" @click.prevent="followProfile()">Unfollow</button>
|
|
||||||
</span>
|
|
||||||
<span class="pl-md-4 pl-sm-2" v-else>
|
|
||||||
<button type="button" class="btn btn-primary font-weight-bold btn-sm" @click.prevent="followProfile()">Follow</button>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</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">{{formatCount(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">{{formatCount(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">{{formatCount(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="" v-if="mode == 'grid'">
|
|
||||||
<masonry
|
|
||||||
:cols="{default: 3, 700: 2, 400: 1}"
|
|
||||||
:gutter="{default: '5px'}"
|
|
||||||
>
|
|
||||||
<div class="p-1" v-for="(s, index) in timeline">
|
|
||||||
<a :class="[s.sensitive ? 'card info-overlay card-md-border-0' : s.media_attachments[0].filter_class + ' card info-overlay card-md-border-0']" :href="statusUrl(s)">
|
|
||||||
<img :src="previewUrl(s)" class="img-fluid w-100">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</masonry>
|
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<b-modal
|
<b-modal
|
||||||
|
|
@ -750,15 +652,7 @@
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
this.fetchProfile();
|
this.fetchProfile();
|
||||||
let u = new URLSearchParams(window.location.search);
|
let u = new URLSearchParams(window.location.search);
|
||||||
let forceMetro = localStorage.getItem('pf_metro_ui.exp.forceMetro') == 'true';
|
|
||||||
|
|
||||||
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
|
|
||||||
this.layout = 'moment';
|
|
||||||
}
|
|
||||||
|
|
||||||
if(forceMetro == true || u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
|
|
||||||
this.layout = 'metro';
|
this.layout = 'metro';
|
||||||
}
|
|
||||||
|
|
||||||
if(this.layout == 'metro' && u.has('t')) {
|
if(this.layout == 'metro' && u.has('t')) {
|
||||||
if(this.modes.indexOf(u.get('t')) != -1) {
|
if(this.modes.indexOf(u.get('t')) != -1) {
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,11 @@
|
||||||
>
|
>
|
||||||
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
|
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
|
||||||
|
|
||||||
<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
|
<video v-if="media.type == 'video'" slot="img" class="embed-responsive-item" preload="none" controls playsinline loop :alt="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||||
<source :src="media.url" :type="media.mime">
|
<source :src="media.url" :type="media.mime">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<div v-else-if="media.type == 'Image'" slot="img" :title="media.description">
|
<div v-else-if="media.type == 'image'" slot="img" :title="media.description">
|
||||||
<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
|
<img :class="media.filter_class + ' d-block img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -53,11 +53,11 @@
|
||||||
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
|
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
|
||||||
<slide v-for="(media, index) in status.media_attachments" :key="'px-carousel-'+media.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" style="background: #000; display: flex;align-items: center;">
|
<slide v-for="(media, index) in status.media_attachments" :key="'px-carousel-'+media.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" style="background: #000; display: flex;align-items: center;">
|
||||||
|
|
||||||
<video v-if="media.type == 'Video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
|
<video v-if="media.type == 'video'" class="embed-responsive-item" preload="none" controls loop :title="media.description" width="100%" height="100%" :poster="media.preview_url">
|
||||||
<source :src="media.url" :type="media.mime">
|
<source :src="media.url" :type="media.mime">
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
<div v-else-if="media.type == 'Image'" :title="media.description">
|
<div v-else-if="media.type == 'image'" :title="media.description">
|
||||||
<img :class="media.filter_class + ' img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
|
<img :class="media.filter_class + ' img-fluid w-100'" :src="media.url" :alt="media.description" loading="lazy" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue