mirror/pixelfed
1
0
Fork 1
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-12-27 02:06:52 +00:00
Code Issues Releases Wiki Activity

Merge pull request #1000 from pixelfed/frontend-ui-refactor

Browse source 
Frontend ui refactor
This commit is contained in:
daniel 2019-03-09 22:47:48 -07:00 committed by GitHub
commit 9a6c6941d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/js/components.js vendored
View file

Binary file not shown.

BIN
public/js/status.js vendored
View file

Binary file not shown.

BIN
public/js/timeline.js vendored
View file

Binary file not shown.

BIN
public/mix-manifest.json
View file

Binary file not shown.

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

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

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

@ -66,7 +66,7 @@
</div> </div>
<div v-else-if="status.pf_type === 'photo:album'" class="w-100"> <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>
<div v-else-if="status.pf_type === 'video:album'" class="w-100"> <div v-else-if="status.pf_type === 'video:album'" class="w-100">
@ -74,7 +74,7 @@
</div> </div>
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100"> <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>
<div v-else class="w-100"> <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"> <source :src="media.url" :type="media.mime">
</video> </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"> <img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" :title="media.description">
</div> </div>
@ -42,7 +42,7 @@
<source :src="media.url" :type="media.mime"> <source :src="media.url" :type="media.mime">
</video> </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"> <img class="d-block img-fluid w-100" :src="media.url" :alt="media.description" :title="media.description">
</div> </div>

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

@ -13,7 +13,7 @@
:interval="0" :interval="0"
> >
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id"> <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"> <img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" :title="img.description">
</div> </div>
</b-carousel-slide> </b-carousel-slide>
@ -32,7 +32,7 @@
:interval="0" :interval="0"
> >
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id"> <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"> <img class="img-fluid" style="max-height: 600px;" :src="img.url" :alt="img.description" :title="img.description">
</div> </div>
</b-carousel-slide> </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="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> <p class="font-weight-light">(click to show)</p>
</summary> </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"> <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> </details>
</div> </div>
<div v-else> <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"> <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>
</div> </div>
@ -19,12 +19,6 @@
<script type="text/javascript"> <script type="text/javascript">
export default { export default {
props: ['status'], props: ['status']
methods: {
showLightbox(src) {
this.$emit('lightbox', src);
}
}
} }
</script> </script>