UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-26 00:03:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update Timeline.vue, and compiled assets

Browse source
This commit is contained in:
Daniel Supernault 2018-12-10 20:47:55 -07:00
parent 825fcd6fe4
commit a66eac5e5b
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
3 changed files with 91 additions and 26 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/mix-manifest.json
View file

Binary file not shown.

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

@ -1,7 +1,10 @@
<template> <template>
<div class="container" style=""> <div class="container" style="">
<div class="row"> <div class="row">
<div class="col-md-8 col-lg-8 pt-4 px-0 my-3"> <div class="col-md-8 col-lg-8 pt-2 px-0 my-3 timeline">
<div class="loader text-center">
<div class="lds-ring"><div></div><div></div><div></div><div></div></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 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"> <div class="card-header d-inline-flex align-items-center bg-white">
@ -238,35 +241,80 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 col-lg-4 pt-4 my-3">
<div class="media d-flex align-items-center mb-4"> <div class="col-md-4 col-lg-4 pt-2 my-3">
<div class="mb-4">
<div class="card profile-card">
<div class="card-body loader text-center">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
<div class="card-body contents d-none">
<div class="media d-flex align-items-center">
<a :href="profile.url"> <a :href="profile.url">
<img class="mr-3 rounded-circle box-shadow" :src="profile.avatar" alt="avatar" width="64px"> <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px">
</a> </a>
<div class="media-body"> <div class="media-body">
<p class="mb-0 px-0 font-weight-bold"><a :href="profile.url">&commat;{{profile.username}}</a></p> <p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">&commat;{{profile.username}}</a></p>
<p class="mb-0 text-muted text-truncate pb-0">{{profile.display_name}}</p> <p class="my-0 text-muted text-truncate pb-0">{{profile.display_name}}</p>
</div> </div>
</div> </div>
<div class="mb-4"> </div>
<ul class="nav nav-pills flex-column timeline-sidenav" style="max-width: 240px;"> <div class="card-footer bg-white py-1 d-none">
<li class="nav-item"> <div class="d-flex justify-content-between text-center">
<a v-bind:class="[scope == '/' ? 'nav-link font-weight-bold active' : 'nav-link font-weight-bold']" href="/" data-type="personal"> <span class="pl-3">
<i class="far fa-user pr-1"></i> My Timeline <p class="mb-0 font-weight-bold">{{profile.statuses_count}}</p>
</a> <p class="mb-0 small text-muted">Posts</p>
</li> </span>
<li class="nav-item"> <span>
<a v-bind:class="[scope == '/timeline/public' ? 'nav-link font-weight-bold active' : 'nav-link font-weight-bold']" href="/timeline/public" data-type="local"> <p class="mb-0 font-weight-bold">{{profile.followers_count}}</p>
<i class="fas fa-bars pr-1"></i> Local Timeline <p class="mb-0 small text-muted">Followers</p>
</a> </span>
</li> <span class="pr-3">
<li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="The network timeline is not available yet."> <p class="mb-0 font-weight-bold">{{profile.following_count}}</p>
<span class="nav-link font-weight-bold"> <p class="mb-0 small text-muted">Following</p>
<i class="fas fa-globe pr-1"></i> Network Timeline
</span> </span>
</li>
</ul>
</div> </div>
</div>
</div>
</div>
<div class="mb-4">
<div class="card notification-card">
<div class="card-header bg-white">
<p class="mb-0 d-flex align-items-center justify-content-between">
<span class="text-muted font-weight-bold">Notifications</span>
<a class="text-dark small" href="/account/activity">See All</a>
</p>
</div>
<div class="card-body loader text-center" style="height: 300px;">
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
<div class="card-body pt-2 contents" style="max-height: 300px; overflow-y: scroll;">
<div class="media mb-3 align-items-center" v-for="(n, index) in notifications">
<img class="mr-2 rounded-circle img-thumbnail" :src="n.account.avatar" alt="" width="32px">
<div class="media-body font-weight-light small">
<div v-if="n.type == 'favourite'">
<p class="my-0">
<span class="font-weight-bold">{{n.account.username}}</span> liked your post.
</p>
</div>
<div v-else-if="n.type == 'comment'">
<p class="my-0">
<span class="font-weight-bold">{{n.account.username}}</span> commented on your post.
</p>
</div>
<div v-else-if="n.type == 'mention'">
<p class="my-0">
<span class="font-weight-bold">{{n.account.username}}</span> mentioned you.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer> <footer>
<div class="container pb-5"> <div class="container pb-5">
<p class="mb-0 text-uppercase font-weight-bold text-muted small"> <p class="mb-0 text-uppercase font-weight-bold text-muted small">
@ -310,6 +358,9 @@
scope: window.location.pathname, scope: window.location.pathname,
min_id: 0, min_id: 0,
max_id: 0, max_id: 0,
notifications: {},
stories: {},
suggestions: {},
} }
}, },
@ -329,6 +380,10 @@
fetchProfile() { fetchProfile() {
axios.get('/api/v1/accounts/verify_credentials').then(res => { axios.get('/api/v1/accounts/verify_credentials').then(res => {
this.profile = res.data; this.profile = res.data;
$('.profile-card .loader').addClass('d-none');
$('.profile-card .contents').removeClass('d-none');
$('.profile-card .card-footer').removeClass('d-none');
this.fetchNotifications();
}).catch(err => { }).catch(err => {
swal( swal(
'Oops, something went wrong', 'Oops, something went wrong',
@ -343,6 +398,7 @@
let localTimeline = '/api/v1/timelines/public?page=' + this.page; let localTimeline = '/api/v1/timelines/public?page=' + this.page;
let apiUrl = this.scope == '/' ? homeTimeline : localTimeline; let apiUrl = this.scope == '/' ? homeTimeline : localTimeline;
axios.get(apiUrl).then(res => { axios.get(apiUrl).then(res => {
$('.timeline .loader').addClass('d-none');
let data = res.data; let data = res.data;
this.feed.push(...data); this.feed.push(...data);
let ids = data.map(status => status.id); let ids = data.map(status => status.id);
@ -355,6 +411,15 @@
}); });
}, },
fetchNotifications() {
axios.get('/api/v1/notifications')
.then(res => {
this.notifications = res.data;
$('.notification-card .loader').addClass('d-none');
$('.notification-card .contents').removeClass('d-none');
});
},
scroll() { scroll() {
window.onscroll = () => { window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight == document.documentElement.offsetHeight; let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight == document.documentElement.offsetHeight;