chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update PostComponent

Browse source
This commit is contained in:
Daniel Supernault 2019-04-17 18:58:21 -06:00
parent 842574acd1
commit 55dd897902
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 90 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
resources/assets/js/components/PostComponent.vue
View file

@ -7,7 +7,7 @@
</div>
</div>
<div v-if="loaded && warning == false" class="postComponent">
<div class="container px-0">
<div v-if="profileLayout == 'metro'" class="container px-0">
<div class="card card-md-rounded-0 status-container orientation-unknown">
<div class="row px-0 mx-0">
<div class="d-flex d-md-none align-items-center justify-content-between card-header bg-white w-100">
@ -209,6 +209,76 @@
</div>
</div>
</div>
<div v-if="profileLayout == 'moment'" class="momentui">
<div class="bg-dark mt-md-n4">
<div class="container">
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
<div v-if="status.pf_type === 'photo'" class="w-100">
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
</div>
<div v-else-if="status.pf_type === 'video'" class="w-100">
<video-presenter :status="status"></video-presenter>
</div>
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
<photo-album-presenter :status="status" v-on:lightbox="lightbox"></photo-album-presenter>
</div>
<div v-else-if="status.pf_type === 'video:album'" class="w-100">
<video-album-presenter :status="status"></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"></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 py-5">
<div class="col-12 col-md-8">
<div class="reactions py-2">
<h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus"></h3>
<h3 v-if="!status.comments_disabled" class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="replyFocus(status)"></h3>
<h3 v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary float-right cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn float-right cursor-pointer']" title="Share" v-on:click="shareStatus"></h3>
</div>
<div class="reaction-counts font-weight-bold mb-0">
<span style="cursor:pointer;" v-on:click="likesModal">
<span class="like-count">{{status.favourites_count || 0}}</span> likes
</span>
<span class="float-right" style="cursor:pointer;" v-on:click="sharesModal">
<span class="share-count pl-4">{{status.reblogs_count || 0}}</span> shares
</span>
</div>
<hr>
<div class="media align-items-center">
<img :src="statusAvatar" class="rounded-circle shadow-lg mr-3" alt="avatar" width="72px" height="72px">
<div class="media-body lead">
by <a href="#">{{statusUsername}}</a>
</div>
</div>
<hr>
<div>
<p class="lead"><i class="far fa-clock"></i> {{timestampFormat()}}</p>
<div class="lead" v-html="status.content"></div>
</div>
</div>
<div class="col-12 col-md-4">
<div v-if="status.comments_disabled" class="bg-light p-5 text-center lead">
<p class="mb-0">Comments have been disabled on this post.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<b-modal ref="likesModal"
id="l-modal"
@ -352,13 +422,31 @@
background: transparent;
}
</style>
<style type="text/css">
.momentui .bg-dark {
background: #000 !important;
}
.momentui .carousel.slide,
.momentui .carousel-item {
background: #000 !important;
}
</style>
<script>
pixelfed.postComponent = {};
export default {
props: ['status-id', 'status-username', 'status-template', 'status-url', 'status-profile-url', 'status-avatar', 'status-profile-id'],
props: [
'status-id',
'status-username',
'status-template',
'status-url',
'status-profile-url',
'status-avatar',
'status-profile-id',
'profile-layout'
],
data() {
return {
status: false,