mirror of https://github.com/pixelfed/pixelfed.git
Merge pull request #999 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
00b0dece87
Binary file not shown.
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 586 KiB After Width: | Height: | Size: 644 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 141 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
Before Width: | Height: | Size: 477 KiB After Width: | Height: | Size: 797 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"/js/activity.js": "/js/activity.js?id=7915246c3bc2b7e9770e",
|
||||
"/js/app.js": "/js/app.js?id=a51da95c2b9df7cf8de2",
|
||||
"/css/app.css": "/css/app.css?id=da1490bc71c86824a5d8",
|
||||
"/css/appdark.css": "/css/appdark.css?id=75eb957c4cbdd84b6016",
|
||||
"/js/components.js": "/js/components.js?id=fe7e6d95339a03a9b03f",
|
||||
"/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/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=d3866ac390bc28d9bcc1",
|
||||
"/js/timeline.js": "/js/timeline.js?id=8a3d417eb838a7219cc9"
|
||||
"/js/status.js": "/js/status.js?id=fd76f38cedc711b9c634",
|
||||
"/js/timeline.js": "/js/timeline.js?id=3d3a0103fc53c6b03769"
|
||||
}
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
<div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
|
||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
||||
<photo-presenter :status="status"></photo-presenter>
|
||||
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
||||
|
@ -227,6 +227,19 @@
|
|||
</infinite-loading>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal
|
||||
id="lightbox"
|
||||
ref="lightboxModal"
|
||||
:hide-header="true"
|
||||
:hide-footer="true"
|
||||
centered
|
||||
size="lg"
|
||||
body-class="p-0"
|
||||
>
|
||||
<div v-if="lightboxMedia" :class="lightboxMedia.filter_class">
|
||||
<img :src="lightboxMedia.url" class="img-fluid">
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -249,6 +262,7 @@ export default {
|
|||
likesPage: 1,
|
||||
shares: [],
|
||||
sharesPage: 1,
|
||||
lightboxMedia: false
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -534,6 +548,11 @@ export default {
|
|||
|
||||
ownerOrAdmin() {
|
||||
return this.owner() || this.admin();
|
||||
},
|
||||
|
||||
lightbox(src) {
|
||||
this.lightboxMedia = src;
|
||||
this.$refs.lightboxModal.show();
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
<div class="postPresenterContainer">
|
||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
||||
<photo-presenter :status="status"></photo-presenter>
|
||||
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
|
||||
</div>
|
||||
|
||||
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
||||
|
@ -355,6 +355,19 @@
|
|||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
<b-modal
|
||||
id="lightbox"
|
||||
ref="lightboxModal"
|
||||
hide-header="true"
|
||||
hide-footer="true"
|
||||
centered
|
||||
size="lg"
|
||||
body-class="p-0"
|
||||
>
|
||||
<div v-if="lightboxMedia" :class="lightboxMedia.filter_class">
|
||||
<img :src="lightboxMedia.url" class="img-fluid">
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -374,12 +387,12 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['scope'],
|
||||
data() {
|
||||
return {
|
||||
page: 2,
|
||||
feed: [],
|
||||
profile: {},
|
||||
scope: window.location.pathname == '/' ? 'home' : 'local',
|
||||
min_id: 0,
|
||||
max_id: 0,
|
||||
notifications: {},
|
||||
|
@ -401,7 +414,8 @@
|
|||
followerMore: true,
|
||||
following: [],
|
||||
followingCursor: 1,
|
||||
followingMore: true
|
||||
followingMore: true,
|
||||
lightboxMedia: false
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -437,12 +451,23 @@
|
|||
},
|
||||
|
||||
fetchTimelineApi() {
|
||||
let homeTimeline = '/api/v1/timelines/home';
|
||||
let localTimeline = '/api/v1/timelines/public';
|
||||
let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
|
||||
let apiUrl = false;
|
||||
switch(this.scope) {
|
||||
case 'home':
|
||||
apiUrl = '/api/v1/timelines/home';
|
||||
break;
|
||||
|
||||
case 'local':
|
||||
apiUrl = '/api/v1/timelines/public';
|
||||
break;
|
||||
|
||||
case 'network':
|
||||
apiUrl = '/api/v1/timelines/network';
|
||||
break;
|
||||
}
|
||||
axios.get(apiUrl, {
|
||||
params: {
|
||||
max_id: 0,
|
||||
max_id: this.max_id,
|
||||
limit: 4
|
||||
}
|
||||
}).then(res => {
|
||||
|
@ -459,9 +484,20 @@
|
|||
},
|
||||
|
||||
infiniteTimeline($state) {
|
||||
let homeTimeline = '/api/v1/timelines/home';
|
||||
let localTimeline = '/api/v1/timelines/public';
|
||||
let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
|
||||
let apiUrl = false;
|
||||
switch(this.scope) {
|
||||
case 'home':
|
||||
apiUrl = '/api/v1/timelines/home';
|
||||
break;
|
||||
|
||||
case 'local':
|
||||
apiUrl = '/api/v1/timelines/public';
|
||||
break;
|
||||
|
||||
case 'network':
|
||||
apiUrl = '/api/v1/timelines/network';
|
||||
break;
|
||||
}
|
||||
axios.get(apiUrl, {
|
||||
params: {
|
||||
max_id: this.max_id,
|
||||
|
@ -894,7 +930,7 @@
|
|||
this.following = res.data;
|
||||
this.followingCursor++;
|
||||
});
|
||||
if(res.data.length < 10) {
|
||||
if(res.data.length < 10) {
|
||||
this.followingMore = false;
|
||||
}
|
||||
this.$refs.followingModal.show();
|
||||
|
@ -914,7 +950,7 @@
|
|||
this.followers = res.data;
|
||||
this.followerCursor++;
|
||||
})
|
||||
if(res.data.length < 10) {
|
||||
if(res.data.length < 10) {
|
||||
this.followerMore = false;
|
||||
}
|
||||
this.$refs.followerModal.show();
|
||||
|
@ -931,13 +967,12 @@
|
|||
this.following.push(...res.data);
|
||||
this.followingCursor++;
|
||||
}
|
||||
if(res.data.length < 10) {
|
||||
if(res.data.length < 10) {
|
||||
this.followingMore = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
followersLoadMore() {
|
||||
axios.get('/api/v1/accounts/'+this.profile.id+'/followers', {
|
||||
params: {
|
||||
|
@ -949,10 +984,15 @@
|
|||
this.followers.push(...res.data);
|
||||
this.followerCursor++;
|
||||
}
|
||||
if(res.data.length < 10) {
|
||||
if(res.data.length < 10) {
|
||||
this.followerMore = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
lightbox(src) {
|
||||
this.lightboxMedia = src;
|
||||
this.$refs.lightboxModal.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
</details>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div :class="status.media_attachments[0].filter_class">
|
||||
<div :class="status.media_attachments[0].filter_class" v-on:click="showLightbox(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,6 +19,12 @@
|
|||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['status']
|
||||
props: ['status'],
|
||||
|
||||
methods: {
|
||||
showLightbox(src) {
|
||||
this.$emit('lightbox', src);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
File diff suppressed because it is too large
Load Diff
|
@ -2,7 +2,7 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<timeline></timeline>
|
||||
<timeline scope="home"></timeline>
|
||||
|
||||
@endsection
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
@section('content')
|
||||
|
||||
<timeline></timeline>
|
||||
<timeline scope="local"></timeline>
|
||||
|
||||
@endsection
|
||||
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
|
||||
<timeline scope="network"></timeline>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript" src="{{ mix('js/timeline.js') }}"></script>
|
||||
<script type="text/javascript">
|
||||
new Vue({
|
||||
el: '#content'
|
||||
});
|
||||
</script>
|
||||
@endpush
|
Loading…
Reference in New Issue