mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Add lightbox to albums

This commit is contained in:
Daniel Supernault 2019-03-09 22:46:43 -07:00
parent 5106a041f6
commit 1cff56c72a
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
5 changed files with 12 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/assets/js/components/PostComponent.vue
View File

@ -63,7 +63,7 @@
</div>
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
<photo-album-presenter :status="status"></photo-album-presenter>
<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">
@ -71,7 +71,7 @@
</div>
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
<mixed-album-presenter :status="status"></mixed-album-presenter>
<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
</div>
<div v-else class="w-100">

4
resources/assets/js/components/Timeline.vue
View File

@ -66,7 +66,7 @@
</div>
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
<photo-album-presenter :status="status"></photo-album-presenter>
<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">
@ -74,7 +74,7 @@
</div>
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
<mixed-album-presenter :status="status"></mixed-album-presenter>
<mixed-album-presenter :status="status" v-on:lightbox="lightbox"></mixed-album-presenter>
</div>
<div v-else class="w-100">

4
resources/assets/js/components/presenter/MixedAlbumPresenter.vue
View File

@ -18,7 +18,7 @@
<source :src="media.url" :type="media.mime">
</video>
<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class">
<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class" v-on:click="$emit('lightbox', media)">
<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" :title="media.description">
</div>
@ -42,7 +42,7 @@
<source :src="media.url" :type="media.mime">
</video>
<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class">
<div v-else-if="media.type == 'Image'" slot="img" :class="media.filter_class" v-on:click="$emit('lightbox', media)">
<img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" :title="media.description">
</div>

4
resources/assets/js/components/presenter/PhotoAlbumPresenter.vue
View File

@ -13,7 +13,7 @@
:interval="0"
>
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;">
<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;" v-on:click="$emit('lightbox', img)">
<img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" :title="img.description">
</div>
</b-carousel-slide>
@ -32,7 +32,7 @@
:interval="0"
>
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;">
<div slot="img" :class="img.filter_class + ' d-block mx-auto text-center'" style="max-height: 600px;" v-on:click="$emit('lightbox', img)">
<img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" :title="img.description">
</div>
</b-carousel-slide>

14
resources/assets/js/components/presenter/PhotoPresenter.vue
View File

@ -5,13 +5,13 @@
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
<p class="font-weight-light">(click to show)</p>
</summary>
<a class="max-hide-overflow" :href="status.url" :class="status.media_attachments[0].filter_class">
<div class="max-hide-overflow" v-on:click="$emit('lightbox', status.media_attachments[0])" :class="status.media_attachments[0].filter_class">
<img class="card-img-top" :src="status.media_attachments[0].url" :alt="status.media_attachments[0].description" :title="status.media_attachments[0].description">
</a>
</div>
</details>
</div>
<div v-else>
<div :class="status.media_attachments[0].filter_class" v-on:click="showLightbox(status.media_attachments[0])">
<div :class="status.media_attachments[0].filter_class" v-on:click="$emit('lightbox', status.media_attachments[0])">
<img class="card-img-top" :src="status.media_attachments[0].url" :alt="status.media_attachments[0].description" :title="status.media_attachments[0].description">
</div>
</div>
@ -19,12 +19,6 @@
<script type="text/javascript">
export default {
props: ['status'],
methods: {
showLightbox(src) {
this.$emit('lightbox', src);
}
}
props: ['status']
}
</script>