mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-26 09:46:49 +00:00
Merge pull request #1000 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
9a6c6941d5
9 changed files with 12 additions and 18 deletions
BIN
public/js/components.js
vendored
BIN
public/js/components.js
vendored
Binary file not shown.
BIN
public/js/status.js
vendored
BIN
public/js/status.js
vendored
Binary file not shown.
BIN
public/js/timeline.js
vendored
BIN
public/js/timeline.js
vendored
Binary file not shown.
Binary file not shown.
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue