fediport/pixelfed
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
Frontend ui refactor
This commit is contained in:
daniel 2019-02-12 23:28:11 -07:00 committed by GitHub
parent 076ec4b1ba 5d0a15c4ef
commit 4674900ee8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/js/timeline.js vendored
View file

File diff suppressed because one or more lines are too long

2
public/mix-manifest.json
View file

@ -8,5 +8,5 @@
"/js/micro.js": "/js/micro.js?id=69703f96f09e6ff04be6",
"/js/profile.js": "/js/profile.js?id=dd006b565cac9962d5ad",
"/js/status.js": "/js/status.js?id=281d075819ccc5ea794d",
"/js/timeline.js": "/js/timeline.js?id=c94e9cce335078728537"
"/js/timeline.js": "/js/timeline.js?id=6a87d35b5038f2968eb8"
}

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

@ -2,6 +2,11 @@
<div class="container" style="">
<div class="row">
<div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline order-2 order-md-1">
<div v-if="loading" class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card mb-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="status.id">
<div class="card-header d-inline-flex align-items-center bg-white">
@ -123,15 +128,29 @@
</form>
</div>
</div>
<div v-if="modes.infinite == true">
<infinite-loading @infinite="infiniteTimeline">
<div slot="no-more" class="font-weight-bold text-light">No more posts to load</div>
<div slot="no-results" class="font-weight-bold text-light">No posts found</div>
</infinite-loading>
<div v-if="modes.infinite == true && !loading && feed.length > 0">
<div class="card">
<div class="card-body">
<infinite-loading @infinite="infiniteTimeline">
<div slot="no-more" class="font-weight-bold">No more posts to load</div>
<div slot="no-results" class="font-weight-bold">No posts found</div>
</infinite-loading>
</div>
</div>
</div>
<div v-if="modes.infinite == false" class="pagination d-none">
<div v-if="modes.infinite == false && !loading && feed.length > 0" class="pagination d-none">
<p class="btn btn-outline-secondary font-weight-bold btn-block" v-on:click="loadMore">Load more posts</p>
</div>
<div v-if="!loading && scope == 'home' && feed.length == 0">
<div class="card">
<div class="card-body text-center">
<p class="h2 font-weight-lighter p-5">Hello, {{profile.acct}}</p>
<p class="text-lighter"><i class="fas fa-camera-retro fa-5x"></i></p>
<p class="h3 font-weight-lighter p-5">Start following people to build your timeline.</p>
<p><a href="/discover" class="btn btn-primary font-weight-bold py-0">Discover new people and posts</a></p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-lg-4 pt-2 my-3 order-1 order-md-2">
@ -214,7 +233,7 @@
</div>
</div>
<div class="card-body pt-2 contents" style="max-height: 170px; overflow-y: scroll;">
<div class="media mb-3 align-items-center" v-for="(n, index) in notifications">
<div v-if="notifications.length > 0" class="media mb-3 align-items-center" v-for="(n, index) in notifications">
<img class="mr-2 rounded-circle" style="border:1px solid #ccc" :src="n.account.avatar" alt="" width="32px" height="32px">
<div class="media-body font-weight-light small">
<div v-if="n.type == 'favourite'">
@ -245,6 +264,10 @@
</div>
</div>
<div v-if="notifications.length == 0" class="text-lighter text-center py-3">
<p class="mb-0"><i class="fas fa-inbox fa-3x"></i></p>
<p class="mb-0 small font-weight-bold">0 Notifications!</p>
</div>
</div>
</div>
</div>
@ -297,7 +320,7 @@
page: 2,
feed: [],
profile: {},
scope: window.location.pathname,
scope: window.location.pathname == '/' ? 'home' : 'local',
min_id: 0,
max_id: 0,
notifications: {},
@ -357,7 +380,7 @@
fetchTimelineApi() {
let homeTimeline = '/api/v1/timelines/home?page=1';
let localTimeline = '/api/v1/timelines/public?page=1';
let apiUrl = this.scope == '/' ? homeTimeline : localTimeline;
let apiUrl = this.scope == 'home' ? homeTimeline : localTimeline;
axios.get(apiUrl).then(res => {
let data = res.data;
this.feed.push(...data);