fediport/pixelfed
2
0
Fork 0
Code Issues Pull requests Packages Projects 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
parent 00b0dece87 95f00dae1b
commit 9a6c6941d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 18 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/js/components.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/js/status.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/js/timeline.js vendored
View file

File diff suppressed because one or more lines are too long

6
public/mix-manifest.json
View file

@ -3,10 +3,10 @@
"/js/app.js": "/js/app.js?id=a51da95c2b9df7cf8de2",
"/css/app.css": "/css/app.css?id=a3d1a9d5833199d019d4",
"/css/appdark.css": "/css/appdark.css?id=241076c8fb3c47e088d2",
"/js/components.js": "/js/components.js?id=2cc86bfe798c5a7af92b",
"/js/components.js": "/js/components.js?id=39d45813739697ddad5c",
"/js/discover.js": "/js/discover.js?id=75fb12b06ee23fa05186",
"/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
"/js/profile.js": "/js/profile.js?id=9b4b7d662fb70fb48856",
"/js/status.js": "/js/status.js?id=fd76f38cedc711b9c634",
"/js/timeline.js": "/js/timeline.js?id=3d3a0103fc53c6b03769"
"/js/status.js": "/js/status.js?id=0013d7a91c8d0080f3ca",
"/js/timeline.js": "/js/timeline.js?id=84ae2d0b7f36936d8f68"
}

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>