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

Frontend ui refactor
This commit is contained in:
daniel 2019-02-26 00:20:40 -07:00 committed by GitHub
commit 1f64b81215
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 8 deletions

File diff suppressed because one or more lines are too long

View File

@ -8,5 +8,5 @@
"/js/micro.js": "/js/micro.js?id=178479fb6990f8806257",
"/js/profile.js": "/js/profile.js?id=488dcd99d616ca9ef8de",
"/js/status.js": "/js/status.js?id=096927f9312b1d7bb1b0",
"/js/timeline.js": "/js/timeline.js?id=7a400692c9ed6419702c"
"/js/timeline.js": "/js/timeline.js?id=afa68ba1bfc868adde1c"
}

View File

@ -227,12 +227,12 @@
<a class="text-dark small" href="/account/activity">See All</a>
</p>
</div>
<div class="card-body loader text-center" style="height: 170px;">
<div class="card-body loader text-center" style="height: 270px;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body pt-2 contents" style="max-height: 170px; overflow-y: scroll;">
<div class="card-body pt-2 contents" style="max-height: 270px; overflow-y: scroll;">
<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">
@ -262,7 +262,12 @@
</p>
</div>
</div>
</div>
<div v-if="notifications.length">
<infinite-loading @infinite="infiniteNotifications">
<div slot="no-results" class="font-weight-bold"></div>
<div slot="no-more" class="font-weight-bold"></div>
</infinite-loading>
</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>
@ -318,6 +323,7 @@
min_id: 0,
max_id: 0,
notifications: {},
notificationCursor: 2,
stories: {},
suggestions: {},
loading: true,
@ -438,17 +444,44 @@
fetchNotifications() {
axios.get('/api/v1/notifications')
.then(res => {
this.notifications = res.data.filter(n => {
let data = res.data.filter(n => {
if(n.type == 'share' && !status) {
return false;
}
return true;
});
this.notifications = data;
$('.notification-card .loader').addClass('d-none');
$('.notification-card .contents').removeClass('d-none');
});
},
infiniteNotifications($state) {
if(this.notificationCursor > 10) {
$state.complete();
return;
}
axios.get('/api/v1/notifications', {
params: {
page: this.notificationCursor
}
}).then(res => {
if(res.data.length) {
let data = res.data.filter(n => {
if(n.type == 'share' && !status) {
return false;
}
return true;
});
this.notifications.push(...data);
this.notificationCursor++;
$state.loaded();
} else {
$state.complete();
}
});
},
reportUrl(status) {
let type = status.in_reply_to ? 'comment' : 'post';
let id = status.id;

View File

@ -8,10 +8,13 @@
<hr>
<section>
<p class="lead">Fediverse is a portmanteau of “federation” and “universe”. It is a common, informal name for a somewhat broad federation of social network servers.</p>
<p class="lead font-weight-bold text-muted mt-4">Supported Fediverse Projects</p>
<p class="lead font-weight-bold text-muted mt-4 mb-0">Supported Fediverse Projects</p>
<p class="small text-muted">This is a partial list of well known supported projects</p>
<ul class="lead pl-4">
<li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> A federated twitter alternative.</li>
<li><a href="https://anfora.app/" rel="nofollow noopener">Anfora</a> Self-hosted photo gallery social network.</li>
<li><a href="https://pleroma.social/" rel="nofollow noopener">Pleroma</a> A federated microblogging alternative.</li>
<li><a href="https://joinmastodon.org" rel="nofollow noopener">Mastodon</a> A federated microblogging alternative.</li>
<li><a href="https://github.com/syuilo/misskey" rel="nofollow noopener">Misskey</a> A federated microblogging alternative.</li>
</ul>
</section>
@endsection