Skip to content

Commit

Permalink
Implement timeline
Browse files Browse the repository at this point in the history
  • Loading branch information
@danon
danon committed Nov 22, 2023
1 parent f6e88ac commit 77afd48
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 33 deletions.
38 changes: 24 additions & 14 deletions app/Http/Resources/ActivityResource.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
use Coyote\User;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;
use function cdn;

/**
* @property int $user_id
Expand All @@ -31,24 +32,33 @@ class ActivityResource extends JsonResource
public function toArray($request)
{
return [
'excerpt' => $this->excerpt,
'created_at' => $this->created_at,
'headline' => $this->headline(),
'user_id' => $this->user_id,
'object' => strtolower(class_basename($this->content_type)),
'type' => strtolower(class_basename($this->content_type)),
'user' => [
'photo' => $this->user_id ? $this->user->photo : ''
]
'excerpt' => $this->excerpt,
'created_at' => format_date($this->created_at),
'timestamp' => carbon($this->created_at)->timestamp,
'headline' => $this->headline($this->user(), $this->topic()),
'user_id' => $this->user_id,
'object' => strtolower(class_basename($this->content_type)),
'type' => strtolower(class_basename($this->content_type)),
'user_avatar' => $this->userPicture()
];
}

public function headline(): string
public function userPicture(): string
{
return trans('activity.headline.' . strtolower(class_basename($this->content_type)), [
'user' => $this->user(),
'topic' => $this->topic()
]);
if ($this->user_id) {
if ($this->user->photo->getFilename()) {
return $this->user->photo->url();
}
}
return cdn('img/avatar.png');
}

private function headline(string $user, string $topic): string
{
return [
Post::class => "$user dodał <b>post</b> w $topic",
Post\Comment::class => "$user dodał <b>komentarz</b> w $topic",
][$this->content_type];
}

public function user(): string
Expand Down
1 change: 1 addition & 0 deletions app/Http/Resources/Api/MicroblogResource.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ public function toArray($request)
'url' => $this->parent_id ? UrlBuilder::microblogComment($this->resource, true) : UrlBuilder::microblog($this->resource, true),
'created_at' => $this->created_at->toIso8601String(),
'updated_at' => $this->created_at->toIso8601String(),
'timestamp' => $this->created_at->timestamp,
'comments' => $this->when(
$this->isNotComment(),
function () {
Expand Down
16 changes: 14 additions & 2 deletions resources/js/pages/homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
import Vue from "vue";
import VueNotifications from "vue-notification";
import {mapGetters} from "vuex";
import VueAvatar from '../components/avatar.vue';
import VueMicroblog from "../components/microblog/microblog";
import VueModals from "../plugins/modals.ts";
import VuePaste from '../plugins/paste.js';
Expand All @@ -17,7 +18,10 @@ new Vue({
el: '#js-microblog',
delimiters: ['${', '}'],
mixins: [LiveMixin],
components: {'vue-microblog': VueMicroblog},
components: {
'vue-microblog': VueMicroblog,
'vue-avatar': VueAvatar,
},
store,
created() {
Object.keys(window.microblogs).forEach(id => store.commit('microblogs/ADD', window.microblogs[id]));
Expand All @@ -27,7 +31,15 @@ new Vue({
mounted() {
this.liveNotifications();
},
computed: mapGetters('microblogs', ['microblogs'])
computed: {
...mapGetters('microblogs', ['microblogs']),
timeline() {
return Object
.values(this.microblogs)
.concat(window.activities)
.sort((a, b) => b.timestamp - a.timestamp);
}
}
});

function switchForumTab(index) {
Expand Down
8 changes: 0 additions & 8 deletions resources/lang/pl/activity.php
View file

This file was deleted.

97 changes: 97 additions & 0 deletions resources/sass/pages/_homepage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,3 +200,100 @@
margin: 1.25rem;
padding: 0;
}

.timeline {
@include media-breakpoint-up(md) {
border-left: 1px solid #ddd;
}
margin: 10px 0 0 10px;

.icon {
position: absolute;
z-index: 1;
left: -10px;
color: #777;
background: white;
box-shadow: 0 1px 2px #CCC;
border: 1px solid #ddd;
border-radius: 50%;
text-align: center;
width: 20px;
height: 20px;
font-size: 11px;

i {
line-height: 20px;
}

&.comment {
top: 6px;
}

&.post {
top: 14px;
}

&.microblog {
top: 20px;
@include media-breakpoint-up(md) {
top: 28px;
}
}
}

.body {
padding-left: 5px;
@include media-breakpoint-up(md) {
padding: 0 0 0 20px;
}

width: 100%;

.item {
@include media-breakpoint-up(md) {
max-width: 90%;
}

@include media-breakpoint-up(lg) {
max-width: 80%;
}

@include media-breakpoint-up(xl) {
max-width: 70%;
}

img {
width: 38px;
height: 38px;
border: 1px solid #d0d0d0;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
background: white;
padding: 2px;
border-radius: 3px;
}

.content {
margin: 0;
}

&.comment {
margin-bottom: 18px;

.content {
margin: 5px 0 0;
padding-left: 10px;
border-left: 1px solid #ddd;
}
}

&.post {
@extend .card;
@extend .p-2;

.content {
margin-top: 0.5rem;
}
}
}
}
}
38 changes: 29 additions & 9 deletions resources/views/home.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,13 +123,13 @@

<div class="d-none d-sm-block mr-2">
<a href="{{ route('profile', [activity.user_id]) }}">
<img class="media-object" src="{{ user_photo(activity.user.photo) }}"
<img class="media-object" src="{{ activity.user_avatar }}"
style="width: 38px; height: 38px;" alt="activity.user.name">
</a>
</div>
<div class="media-body">
<p>{{ activity.headline|raw }}</p>
<small>{{ activity.created_at|format_date }}</small>
<small>{{ activity.created_at }}</small>
<strong>{{ activity.excerpt }}</strong>
</div>
</div>
Expand All @@ -145,14 +145,33 @@

<section id="js-microblog" class="box">
<h4>
<i class="far fa-comments fa-fw"></i>
<a href="{{ route('microblog.home') }}">
Popularne wpisy na mikroblogu
</a>
<i class="fas fa-stream fa-fw"></i>
Oś czasu
</h4>
<vue-microblog
v-for="microblog in microblogs" :key="microblog.id" :microblog="microblog"
:wrap="true"></vue-microblog>
<div class="timeline mt-4">
<div class="position-relative d-flex align-items-start" v-for="activity in timeline">
<div :class="['icon', activity.type]">
<i class="far fa-comment" v-if="activity.type === 'comment'"></i>
<i class="fas fa-quote-right" v-if="activity.type === 'post'"></i>
<i class="fas fa-shapes" v-if="activity.type === 'microblog'"></i>
</div>
<div class="body">
<vue-microblog v-if="activity.type === 'microblog'" :key="activity.id" :microblog="activity" :wrap="true"></vue-microblog>
<template v-else-if="activity.excerpt">
<div :class="['item', activity.type]">
<div class="d-flex">
<img :src="activity.user_avatar" class="d-block mr-2" loading="lazy">
<div>
<p class="m-0" v-html="activity.headline"></p>
<small class="text-muted">${activity.created_at}</small>
</div>
</div>
<p class="content">${activity.excerpt}</p>
</div>
</template>
</div>
</div>
</div>

<vue-notifications position="bottom right"/>
</section>
Expand Down Expand Up @@ -272,6 +291,7 @@

<script type="text/javascript">
var microblogs = {{ microblogs|json_encode|raw }};
var activities = {{ activities|json_encode|raw }};
var flags = {{ flags|json_encode|raw }};
</script>
{% endblock %}

0 comments on commit 77afd48

Please sign in to comment.