mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-26 00:03:16 +00:00
Update Timeline.vue, and compiled assets
This commit is contained in:
Daniel Supernault
parent
825fcd6fe4
commit
a66eac5e5b
3 changed files with 91 additions and 26 deletions
BIN
public/js/components.js
vendored
BIN
public/js/components.js
vendored
Binary file not shown.
Binary file not shown.
|
|
@ -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">
|
||||||
<a :href="profile.url">
|
<div class="mb-4">
|
||||||
<img class="mr-3 rounded-circle box-shadow" :src="profile.avatar" alt="avatar" width="64px">
|
<div class="card profile-card">
|
||||||
</a>
|
<div class="card-body loader text-center">
|
||||||
<div class="media-body">
|
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
|
||||||
<p class="mb-0 px-0 font-weight-bold"><a :href="profile.url">@{{profile.username}}</a></p>
|
</div>
|
||||||
<p class="mb-0 text-muted text-truncate pb-0">{{profile.display_name}}</p>
|
<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">@{{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>
|
</div>
|
||||||
|
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<ul class="nav nav-pills flex-column timeline-sidenav" style="max-width: 240px;">
|
<div class="card notification-card">
|
||||||
<li class="nav-item">
|
<div class="card-header bg-white">
|
||||||
<a v-bind:class="[scope == '/' ? 'nav-link font-weight-bold active' : 'nav-link font-weight-bold']" href="/" data-type="personal">
|
<p class="mb-0 d-flex align-items-center justify-content-between">
|
||||||
<i class="far fa-user pr-1"></i> My Timeline
|
<span class="text-muted font-weight-bold">Notifications</span>
|
||||||
</a>
|
<a class="text-dark small" href="/account/activity">See All</a>
|
||||||
</li>
|
</p>
|
||||||
<li class="nav-item">
|
</div>
|
||||||
<a v-bind:class="[scope == '/timeline/public' ? 'nav-link font-weight-bold active' : 'nav-link font-weight-bold']" href="/timeline/public" data-type="local">
|
<div class="card-body loader text-center" style="height: 300px;">
|
||||||
<i class="fas fa-bars pr-1"></i> Local Timeline
|
<div class="lds-ring"><div></div><div></div><div></div><div></div></div>
|
||||||
</a>
|
</div>
|
||||||
</li>
|
<div class="card-body pt-2 contents" style="max-height: 300px; overflow-y: scroll;">
|
||||||
<li class="nav-item" data-toggle="tooltip" data-placement="bottom" title="The network timeline is not available yet.">
|
<div class="media mb-3 align-items-center" v-for="(n, index) in notifications">
|
||||||
<span class="nav-link font-weight-bold">
|
<img class="mr-2 rounded-circle img-thumbnail" :src="n.account.avatar" alt="" width="32px">
|
||||||
<i class="fas fa-globe pr-1"></i> Network Timeline
|
<div class="media-body font-weight-light small">
|
||||||
</span>
|
<div v-if="n.type == 'favourite'">
|
||||||
</li>
|
<p class="my-0">
|
||||||
</ul>
|
<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>
|
</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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue