mirror
/
pixelfed
kopia lustrzana https://github.com/pixelfed/pixelfed
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Update Timeline.vue, and compiled assets

pull/628/head
Daniel Supernault 2018-12-10 20:47:55 -07:00
rodzic 825fcd6fe4
commit a66eac5e5b
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 0DEF1C662C9033F7
3 zmienionych plików z 93 dodań i 28 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
public/js/components.js vendored
Wyświetl plik

File diff suppressed because one or more lines are too long

2
public/mix-manifest.json
Wyświetl plik

@ -1,5 +1,5 @@
{
"/js/components.js": "/js/components.js?id=b792fd822363d85a4d06",
"/js/components.js": "/js/components.js?id=96ce3848888232d3703a",
"/js/app.js": "/js/app.js?id=763d01bb175be69c8ad3",
"/css/app.css": "/css/app.css?id=986cee6cfca852babf8e",
"/js/timeline.js": "/js/timeline.js?id=415bfde862ab8c5b4548",

117
resources/assets/js/components/Timeline.vue
Wyświetl plik

@ -1,7 +1,10 @@
<template>
<div class="container" style="">
<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-header d-inline-flex align-items-center bg-white">
@ -238,35 +241,80 @@
</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">
<a :href="profile.url">
<img class="mr-3 rounded-circle box-shadow" :src="profile.avatar" alt="avatar" width="64px">
</a>
<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 text-muted text-truncate pb-0">{{profile.display_name}}</p>
<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">
<img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px">
</a>
<div class="media-body">
<p class="mb-0 px-0 font-weight-bold"><a :href="profile.url" class="text-dark">&commat;{{profile.username}}</a></p>
<p class="my-0 text-muted text-truncate pb-0">{{profile.display_name}}</p>
</div>
</div>
</div>
<div class="card-footer bg-white py-1 d-none">
<div class="d-flex justify-content-between text-center">
<span class="pl-3">
<p class="mb-0 font-weight-bold">{{profile.statuses_count}}</p>
<p class="mb-0 small text-muted">Posts</p>
</span>
<span>
<p class="mb-0 font-weight-bold">{{profile.followers_count}}</p>
<p class="mb-0 small text-muted">Followers</p>
</span>
<span class="pr-3">
<p class="mb-0 font-weight-bold">{{profile.following_count}}</p>
<p class="mb-0 small text-muted">Following</p>
</span>
</div>
</div>
</div>
</div>
<div class="mb-4">
<ul class="nav nav-pills flex-column timeline-sidenav" style="max-width: 240px;">
<li class="nav-item">
<a v-bind:class="[scope == '/' ? 'nav-link font-weight-bold active' : 'nav-link font-weight-bold']" href="/" data-type="personal">
<i class="far fa-user pr-1"></i> My Timeline
</a>
</li>
<li class="nav-item">
<a v-bind:class="[scope == '/timeline/public' ? 'nav-link font-weight-bold active' : 'nav-link font-weight-bold']" href="/timeline/public" data-type="local">
<i class="fas fa-bars pr-1"></i> Local Timeline
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="The network timeline is not available yet.">
<span class="nav-link font-weight-bold">
<i class="fas fa-globe pr-1"></i> Network Timeline
</span>
</li>
</ul>
<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>
<div class="container pb-5">
<p class="mb-0 text-uppercase font-weight-bold text-muted small">
@ -310,6 +358,9 @@
scope: window.location.pathname,
min_id: 0,
max_id: 0,
notifications: {},
stories: {},
suggestions: {},
}
},
@ -329,6 +380,10 @@
fetchProfile() {
axios.get('/api/v1/accounts/verify_credentials').then(res => {
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 => {
swal(
'Oops, something went wrong',
@ -343,6 +398,7 @@
let localTimeline = '/api/v1/timelines/public?page=' + this.page;
let apiUrl = this.scope == '/' ? homeTimeline : localTimeline;
axios.get(apiUrl).then(res => {
$('.timeline .loader').addClass('d-none');
let data = res.data;
this.feed.push(...data);
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() {
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight == document.documentElement.offsetHeight;