Fix cs
This commit is contained in:
parent
56458c1f40
commit
898e41cfe1
4 changed files with 111 additions and 79 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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">@{{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">@{{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>
|
||||||
|
|
|
@ -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">@{{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">@{{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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue