|
@@ -0,0 +1,69 @@
|
|
|
+<template>
|
|
|
+<div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-4 p-0 p-sm-2 p-md-3 p-xs-1" v-for="(s, index) in posts">
|
|
|
+ <a class="card info-overlay card-md-border-0" :href="s.url">
|
|
|
+ <div class="square">
|
|
|
+ <span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
|
|
|
+ <span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
|
|
|
+ <span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
|
|
|
+ <div class="square-content" v-bind:style="previewBackground(s)">
|
|
|
+ </div>
|
|
|
+ <div class="info-overlay-text">
|
|
|
+ <h5 class="text-white m-auto font-weight-bold">
|
|
|
+ <span>
|
|
|
+ <span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
|
|
|
+ <span class="d-flex-inline">{{s.favourites_count}}</span>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
|
|
|
+ <span class="d-flex-inline">{{s.reblogs_count}}</span>
|
|
|
+ </span>
|
|
|
+ </h5>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style type="text/css" scoped></style>
|
|
|
+
|
|
|
+<script type="text/javascript">
|
|
|
+export default {
|
|
|
+ props: ['collection-id'],
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loaded: false,
|
|
|
+ posts: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeMount() {
|
|
|
+ this.fetchItems();
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ fetchItems() {
|
|
|
+ axios.get('/api/local/collection/items/' + this.collectionId)
|
|
|
+ .then(res => {
|
|
|
+ this.posts = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ previewUrl(status) {
|
|
|
+ return status.sensitive ? '/storage/no-preview.png?v=' + new Date().getTime() : status.media_attachments[0].preview_url;
|
|
|
+ },
|
|
|
+
|
|
|
+ previewBackground(status) {
|
|
|
+ let preview = this.previewUrl(status);
|
|
|
+ return 'background-image: url(' + preview + ');';
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|