This commit is contained in:
Daniel Supernault 2021-04-06 21:53:39 -06:00
parent 56458c1f40
commit 898e41cfe1
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
4 changed files with 111 additions and 79 deletions

View file

@ -334,7 +334,7 @@
<p class="lead mb-0"> <p class="lead mb-0">
by <a :href="statusProfileUrl">{{statusUsername}}</a> by <a :href="statusProfileUrl">{{statusUsername}}</a>
<span v-if="relationship && profile && user && !relationship.following && profile.id != user.id"> <span v-if="relationship && profile && user && !relationship.following && profile.id != user.id">
<span class="px-1 text-lighter"></span> <span class="px-1 text-lighter"></span>
<a class="font-weight-bold small" href="#">Follow</a> <a class="font-weight-bold small" href="#">Follow</a>
</span> </span>
</p> </p>
@ -348,7 +348,7 @@
</h2> </h2>
<p class="lead mb-0"> <p class="lead mb-0">
by <a :href="statusProfileUrl">{{statusUsername}}</a> by <a :href="statusProfileUrl">{{statusUsername}}</a>
<!-- <span class="px-1 text-lighter"></span> <!-- <span class="px-1 text-lighter"></span>
<a class="font-weight-bold small" href="#">Follow</a> --> <a class="font-weight-bold small" href="#">Follow</a> -->
</p> </p>
</div> </div>
@ -400,7 +400,7 @@
<label class="custom-control-label small font-weight-bold text-muted" style="padding-top: 3px" for="sensitiveReply">Add Content Warning</label> <label class="custom-control-label small font-weight-bold text-muted" style="padding-top: 3px" for="sensitiveReply">Add Content Warning</label>
</div> </div>
</span> </span>
<button class="btn btn-sm font-weight-bold btn-outline-primary py-1" <button class="btn btn-sm font-weight-bold btn-outline-primary py-1"
v-if="replyText.length > 2" @click="postReply">Post</button> v-if="replyText.length > 2" @click="postReply">Post</button>
</p> </p>
</div> </div>
@ -442,7 +442,7 @@
</span> </span>
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -687,10 +687,10 @@
.postPresenterContainer { .postPresenterContainer {
background: #fff; background: #fff;
} }
@media(min-width: 720px) { @media(min-width: 720px) {
.postPresenterContainer { .postPresenterContainer {
min-height: 600px; min-height: 600px;
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
@ -773,10 +773,11 @@ export default {
'status-profile-url', 'status-profile-url',
'status-avatar', 'status-avatar',
'status-profile-id', 'status-profile-id',
'profile-layout' 'profile-layout',
'profile-recent'
], ],
components: { components: {
VueTribute VueTribute
}, },
@ -941,12 +942,15 @@ export default {
this.fetchComments(); this.fetchComments();
} }
this.loaded = true; this.loaded = true;
setTimeout(function() {
self.fetchProfilePosts(); if(this.profileRecent !== false) {
}, 3000); 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) {
i.href = App.util.format.rewriteLinks(i); i.href = App.util.format.rewriteLinks(i);
}); });
}, 500); }, 500);
@ -1202,7 +1206,7 @@ export default {
comment: this.replyText, comment: this.replyText,
sensitive: this.replySensitive sensitive: this.replySensitive
} }
this.replyText = ''; this.replyText = '';
axios.post('/i/comment', data) axios.post('/i/comment', data)
@ -1262,7 +1266,7 @@ export default {
this.redirect('/login?next=' + encodeURIComponent(window.location.pathname)); this.redirect('/login?next=' + encodeURIComponent(window.location.pathname));
return; return;
} }
if(this.status.comments_disabled) { if(this.status.comments_disabled) {
return; return;
} }
@ -1284,7 +1288,7 @@ export default {
axios.get(url) axios.get(url)
.then(response => { .then(response => {
let self = this; let self = this;
this.results = this.layout == 'metro' ? this.results = this.layout == 'metro' ?
_.reverse(response.data.data) : _.reverse(response.data.data) :
response.data.data; response.data.data;
this.pagination = response.data.meta.pagination; this.pagination = response.data.meta.pagination;
@ -1294,7 +1298,7 @@ export default {
$('.postCommentsLoader').addClass('d-none'); $('.postCommentsLoader').addClass('d-none');
$('.postCommentsContainer').removeClass('d-none'); $('.postCommentsContainer').removeClass('d-none');
setTimeout(function() { setTimeout(function() {
document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) { document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
i.href = App.util.format.rewriteLinks(i); i.href = App.util.format.rewriteLinks(i);
}); });
}, 500); }, 500);
@ -1505,9 +1509,9 @@ export default {
if(profile.local == true) { if(profile.local == true) {
return reply.url; return reply.url;
} else { } else {
return showOrigin ? return showOrigin ?
reply.url : reply.url :
'/i/web/post/_/' + profile.id + '/' + reply.id; '/i/web/post/_/' + profile.id + '/' + reply.id;
} }
}, },
@ -1575,7 +1579,7 @@ export default {
}); });
swal('Untagged', 'You have been untagged from this post.', 'success'); swal('Untagged', 'You have been untagged from this post.', 'success');
}).catch(err => { }).catch(err => {
swal('An Error Occurred', 'Please try again later.', 'error'); swal('An Error Occurred', 'Please try again later.', 'error');
}); });
}, },
@ -1737,7 +1741,7 @@ export default {
}, 500); }, 500);
}); });
}, },
}, },
} }
</script> </script>

View file

@ -130,7 +130,7 @@
</div> </div>
<div class="pl-2"> <div class="pl-2">
<!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> --> <!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> -->
<a class="username font-weight-bold text-dark text-decoration-none" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)"> <a class="username font-weight-bold text-dark text-decoration-none text-break" v-bind:href="profileUrl(status)" v-html="statusCardUsernameFormat(status)">
Loading... Loading...
</a> </a>
<span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;"> <span v-if="status.account.is_admin" class="fa-stack" title="Admin Account" data-toggle="tooltip" style="height:1em; line-height:1em; max-width:19px;">
@ -408,7 +408,7 @@
<div class="col-12 col-md-6 offset-md-3"> <div class="col-12 col-md-6 offset-md-3">
<div class="card shadow-none border" style="height:100vh;"> <div class="card shadow-none border" style="height:100vh;">
<div class="card-header d-flex justify-content-between align-items-center"> <div class="card-header d-flex justify-content-between align-items-center">
<div <div
@click="commentNavigateBack(status.id)" @click="commentNavigateBack(status.id)"
class="cursor-pointer" class="cursor-pointer"
> >
@ -441,9 +441,9 @@
</div> </div>
<div class="postCommentsContainer d-none"> <div class="postCommentsContainer d-none">
<p v-if="replies.length" class="mb-1 text-center load-more-link my-4"> <p v-if="replies.length" class="mb-1 text-center load-more-link my-4">
<a <a
href="#" href="#"
class="text-dark" class="text-dark"
title="Load more comments" title="Load more comments"
@click.prevent="loadMoreComments" @click.prevent="loadMoreComments"
> >
@ -516,19 +516,19 @@
</div> </div>
<div class="card-footer mb-3"> <div class="card-footer mb-3">
<div class="align-middle d-flex"> <div class="align-middle d-flex">
<img <img
:src="profile.avatar" :src="profile.avatar"
width="36" width="36"
height="36" height="36"
class="rounded-circle border mr-3"> class="rounded-circle border mr-3">
<textarea <textarea
class="form-control rounded-pill" class="form-control rounded-pill"
name="comment" name="comment"
placeholder="Add a comment…" placeholder="Add a comment…"
autocomplete="off" autocomplete="off"
autocorrect="off" autocorrect="off"
rows="1" rows="1"
maxlength="0" maxlength="0"
style="resize: none;overflow-y: hidden" style="resize: none;overflow-y: hidden"
@click="replyFocus(status)"> @click="replyFocus(status)">
</textarea> </textarea>
@ -741,9 +741,9 @@
body-class="p-2 rounded"> body-class="p-2 rounded">
<div> <div>
<vue-tribute :options="tributeSettings"> <vue-tribute :options="tributeSettings">
<textarea <textarea
class="form-control replyModalTextarea" class="form-control replyModalTextarea"
rows="4" rows="4"
v-model="replyText"> v-model="replyText">
</textarea> </textarea>
</vue-tribute> </vue-tribute>
@ -764,7 +764,7 @@
<input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw"> <input type="checkbox" class="custom-control-input" id="replyModalCWSwitch" v-model="replyNsfw">
<label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label> <label :class="[replyNsfw ? 'custom-control-label font-weight-bold text-dark':'custom-control-label text-lighter']" for="replyModalCWSwitch">Mark as NSFW</label>
</div> </div>
<button class="btn btn-primary btn-sm py-2 px-4 lead text-uppercase font-weight-bold" v-on:click.prevent="commentSubmit(status, $event)" :disabled="replyText.length == 0"> <button class="btn btn-primary btn-sm py-2 px-4 lead text-uppercase font-weight-bold" v-on:click.prevent="commentSubmit(status, $event)" :disabled="replyText.length == 0">
{{replySending == true ? 'POSTING' : 'POST'}} {{replySending == true ? 'POSTING' : 'POST'}}
</button> </button>
@ -781,14 +781,14 @@
size="xl" size="xl"
body-class="list-group-flush p-0 m-0 rounded"> body-class="list-group-flush p-0 m-0 rounded">
<!-- <post-component <!-- <post-component
v-if="ctxMenuStatus" v-if="ctxMenuStatus"
:status-template="ctxMenuStatus.pf_type" :status-template="ctxMenuStatus.pf_type"
:status-id="ctxMenuStatus.id" :status-id="ctxMenuStatus.id"
:status-username="ctxMenuStatus.account.username" :status-username="ctxMenuStatus.account.username"
:status-url="ctxMenuStatus.url" :status-url="ctxMenuStatus.url"
:status-profile-url="ctxMenuStatus.account.url" :status-profile-url="ctxMenuStatus.account.url"
:status-avatar="ctxMenuStatus.account.avatar" :status-avatar="ctxMenuStatus.account.avatar"
:status-profile-id="ctxMenuStatus.account.id" :status-profile-id="ctxMenuStatus.account.id"
profile-layout="metro"> profile-layout="metro">
</post-component> --> </post-component> -->
</b-modal> </b-modal>
@ -934,7 +934,7 @@
let el = document.querySelector('link[data-stylesheet="light"]'); let el = document.querySelector('link[data-stylesheet="light"]');
el.setAttribute('href', '/css/appdark.css?id=' + Date.now()); el.setAttribute('href', '/css/appdark.css?id=' + Date.now());
el.setAttribute('data-stylesheet', 'dark'); el.setAttribute('data-stylesheet', 'dark');
}*/ }*/
if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') { if(localStorage.getItem('pf_metro_ui.exp.rec') == 'false') {
@ -1019,14 +1019,14 @@
$('.timeline .pagination').removeClass('d-none'); $('.timeline .pagination').removeClass('d-none');
// if(this.feed.length == 4) { // if(this.feed.length == 4) {
// this.fetchTimelineApi(); // this.fetchTimelineApi();
// } // }
if(this.hashtagPosts.length == 0) { if(this.hashtagPosts.length == 0) {
this.fetchHashtagPosts(); this.fetchHashtagPosts();
} }
// this.fetchStories(); // this.fetchStories();
this.rtw(); this.rtw();
setTimeout(function() { setTimeout(function() {
document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) { document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) {
i.href = App.util.format.rewriteLinks(i); i.href = App.util.format.rewriteLinks(i);
}); });
}, 500); }, 500);
@ -1079,7 +1079,7 @@
'status_id': d.id, 'status_id': d.id,
'profile_id': d.account.id 'profile_id': d.account.id
}); });
} }
}); });
this.min_id = Math.max(...this.ids).toString(); this.min_id = Math.max(...this.ids).toString();
this.max_id = Math.min(...this.ids).toString(); this.max_id = Math.min(...this.ids).toString();
@ -1211,7 +1211,7 @@
}, },
fetchStatusComments(status, card) { fetchStatusComments(status, card) {
// axios.get('/api/v2/status/'+status.id+'/replies', // axios.get('/api/v2/status/'+status.id+'/replies',
// { // {
// params: { // params: {
// limit: 6 // limit: 6
@ -1223,7 +1223,7 @@
// }); // });
// this.replies = _.reverse(data); // this.replies = _.reverse(data);
// setTimeout(function() { // setTimeout(function() {
// document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) { // document.querySelectorAll('.timeline .card-body .comments .comment-body a').forEach(function(i, e) {
// i.href = App.util.format.rewriteLinks(i); // i.href = App.util.format.rewriteLinks(i);
// }); // });
// }, 500); // }, 500);
@ -1233,7 +1233,7 @@
axios.get(url) axios.get(url)
.then(response => { .then(response => {
let self = this; let self = this;
// this.results = this.layout == 'metro' ? // this.results = this.layout == 'metro' ?
// _.reverse(response.data.data) : // _.reverse(response.data.data) :
// response.data.data; // response.data.data;
this.replies = _.reverse(response.data.data); this.replies = _.reverse(response.data.data);
@ -1244,7 +1244,7 @@
$('.postCommentsLoader').addClass('d-none'); $('.postCommentsLoader').addClass('d-none');
$('.postCommentsContainer').removeClass('d-none'); $('.postCommentsContainer').removeClass('d-none');
// setTimeout(function() { // setTimeout(function() {
// document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) { // document.querySelectorAll('.status-comment .postCommentsContainer .comment-body a').forEach(function(i, e) {
// i.href = App.util.format.rewriteLinks(i); // i.href = App.util.format.rewriteLinks(i);
// }); // });
// }, 500); // }, 500);
@ -1622,7 +1622,7 @@
this.replyText += em + ' '; this.replyText += em + ' ';
$('textarea[name="comment"]').focus(); $('textarea[name="comment"]').focus();
} }
}, },
refreshSuggestions() { refreshSuggestions() {
return; return;
@ -1794,7 +1794,7 @@
this.$refs.ctxModModal.hide(); this.$refs.ctxModModal.hide();
this.$refs.ctxModOtherModal.show(); this.$refs.ctxModOtherModal.show();
}, },
ctxModMenu() { ctxModMenu() {
this.$refs.ctxModal.hide(); this.$refs.ctxModal.hide();
}, },
@ -1854,7 +1854,7 @@
return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>'; return usr + '<span class="text-lighter font-weight-bold"> ' + txt + ' ' + dom + '</span>';
break; break;
default: default:
return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>'; return usr + '<span class="text-lighter font-weight-bold">@' + dom + '</span>';
break; break;
} }
@ -2104,7 +2104,7 @@
if(this.status.comments_disabled) { if(this.status.comments_disabled) {
return; return;
} }
this.replyToIndex = index; this.replyToIndex = index;
this.replyingToId = e.id; this.replyingToId = e.id;
this.replyingToUsername = e.account.username; this.replyingToUsername = e.account.username;
@ -2184,9 +2184,9 @@
color: #3897f0; color: #3897f0;
} }
.replyModalTextarea { .replyModalTextarea {
border: none; border: none;
font-size: 18px; font-size: 18px;
resize: none; resize: none;
white-space: pre-wrap; white-space: pre-wrap;
outline: none; outline: none;
} }

View file

@ -8,6 +8,20 @@
<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb"> <carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb">
<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" :title="img.description"> <slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" :title="img.description">
<img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'"> <img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<p
v-if="status.media_attachments[0].license"
style="
margin-bottom: 0;
padding: 0 5px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 5px;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
</slide> </slide>
</carousel> </carousel>
</details> </details>
@ -16,6 +30,20 @@
<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="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description"> <slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
<img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'"> <img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="altText(img)" onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<p
v-if="status.media_attachments[0].license"
style="
margin-bottom: 0;
padding: 0 5px;
color: #fff;
font-size: 10px;
text-align: right;
position: absolute;
bottom: 0;
right: 0;
border-top-left-radius: 5px;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
</slide> </slide>
</carousel> </carousel>
</div> </div>
@ -83,4 +111,4 @@
} }
} }
} }
</script> </script>

View file

@ -23,27 +23,27 @@
</div> </div>
<div v-else> <div v-else>
<div :title="status.media_attachments[0].description" style="position: relative;"> <div :title="status.media_attachments[0].description" style="position: relative;">
<img class="card-img-top" <img class="card-img-top"
:src="status.media_attachments[0].url" :src="status.media_attachments[0].url"
loading="lazy" loading="lazy"
:alt="altText(status)" :alt="altText(status)"
:width="width()" :width="width()"
:height="height()" :height="height()"
onerror="this.onerror=null;this.src='/storage/no-preview.png'"> onerror="this.onerror=null;this.src='/storage/no-preview.png'">
<p <p
v-if="status.media_attachments[0].license" v-if="status.media_attachments[0].license"
style=" style="
margin-bottom: 0; margin-bottom: 0;
padding: 0 5px; padding: 0 5px;
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;
text-align: right; text-align: right;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
border-top-left-radius: 5px; border-top-left-radius: 5px;
background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)); background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5));
"><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p> "><a :href="status.url" class="font-weight-bold text-light">Photo</a> by <a :href="status.account.url" class="font-weight-bold text-light">&commat;{{status.account.username}}</a> licensed under <a :href="status.media_attachments[0].license.url" class="font-weight-bold text-light">{{status.media_attachments[0].license.title}}</a></p>
</div> </div>
</div> </div>
@ -91,7 +91,7 @@
}, },
width() { width() {
if( !this.status.media_attachments[0].meta || if( !this.status.media_attachments[0].meta ||
!this.status.media_attachments[0].meta.original || !this.status.media_attachments[0].meta.original ||
!this.status.media_attachments[0].meta.original.width ) { !this.status.media_attachments[0].meta.original.width ) {
return; return;
@ -100,7 +100,7 @@
}, },
height() { height() {
if( !this.status.media_attachments[0].meta || if( !this.status.media_attachments[0].meta ||
!this.status.media_attachments[0].meta.original || !this.status.media_attachments[0].meta.original ||
!this.status.media_attachments[0].meta.original.height ) { !this.status.media_attachments[0].meta.original.height ) {
return; return;
@ -109,4 +109,4 @@
} }
} }
} }
</script> </script>