Skip to content

Commit

Permalink
Add timeline switch
Browse files Browse the repository at this point in the history
  • Loading branch information
@danon
danon committed Jan 30, 2024
1 parent 3d072ab commit 016a5a8
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 60 deletions.
15 changes: 14 additions & 1 deletion resources/js/pages/homepage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,12 +64,20 @@ function switchForumTab(index) {
axios.post('/User/Settings/Ajax', {'homepage_mode': index});
}

function switchTimeline(index) {
axios.post('/User/Settings/Ajax', {'homepage_timeline': index})
.finally(() => window.location.reload());
}

function switchReputationTab(index) {
axios.post('/User/Settings/Ajax', {'homepage_reputation': index});
}

(function () {
new PerfectScrollbar(document.getElementById('stream'));
const stream = document.getElementById('stream');
if (stream) {
new PerfectScrollbar(stream);
}

const forumTabs = document.querySelectorAll('#forum-tabs .nav-link');
for (let i = 0; i < forumTabs.length; i++) {
Expand All @@ -80,4 +88,9 @@ function switchReputationTab(index) {
for (let i = 0; i < reputationTabs.length; i++) {
reputationTabs[i].addEventListener('click', () => switchReputationTab(i));
}

const timelineTabs = document.querySelectorAll('#timeline-switch .nav-item');
for (let i = 0; i < timelineTabs.length; i++) {
timelineTabs[i].addEventListener('click', () => switchTimeline(i));
}
})();
195 changes: 136 additions & 59 deletions resources/views/home.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,70 @@
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-12">
<div class="box">
<h2 class="h4">
<i class="fas fa-star fa-fw"></i>
Co nowego na forum?
</h2>
</div>
</div>
</div>
<div class="row">
<main class="col-md-8">
<div class="row mt-4">
<div class="col-12">
<div class="d-flex justify-content-between">
<h2 class="h4">
<i class="fas fa-star fa-fw"></i>
Co nowego na forum?
</h2>
<ul id="timeline-switch" class="nav nav-pills" style="border: none">
<li class="nav-item">
<a class="nav-link {{ settings['homepage.timeline'] == 0 ? 'active' }}"
role="tab" data-bs-toggle="tab" style="cursor: pointer"
title="Pokaż tylko wpisy na mikroblogu">
Microblogi
</a>
</li>
<li class="nav-item">
<a class="nav-link {{ settings['homepage.timeline'] == 1 ? 'active' }}"
role="tab" data-bs-toggle="tab" style="cursor: pointer"
title="Pokaż oś czasu, z wpisami na mikroblogu, postami i komentarzami">
<i class="fas fa-flask"></i> Oś czasu (Beta)
</a>
</li>
</ul>
</div>
</div>
</div>

{% if settings['homepage.timeline'] == 1 %}
<style>
#box-forum > .card > .card-body > .row > .col-lg-6,
#box-forum > .card > .card-body > .row {
display: block;
width: auto;
max-width: initial;
flex: initial;
flex-wrap: initial;
}
#forum-tabs {
display: none;
}
#box-forum #box-forum-headline {
margin-top: 0;
}
.tab-content {
display: flex;
}
.tab-content .tab-pane#interesting,
.tab-content .tab-pane#newest {
display: block;
width: 50%;
}
.tab-content .views {
padding: 0;
}
</style>
{% endif %}

<section id="box-forum" class="box">
<div class="card card-forum">
<div class="card-body">
Expand Down Expand Up @@ -53,8 +105,10 @@
<div role="tabpanel" class="tab-pane {{ settings['homepage.mode'] == 0 ? 'active' }}" id="interesting">
{% for topic in interesting %}
<div class="row">
<span class="col-sm-2 d-none d-sm-block">
<strong class="text-nowrap">{{ topic.views }}</strong>
<span class="col-sm-2 d-none d-sm-block views">
<strong class="text-nowrap">
{{ topic.views }}
</strong>
<small class="text-nowrap">
{{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }}
</small>
Expand All @@ -80,8 +134,10 @@
<div role="tabpanel" class="tab-pane {{ settings['homepage.mode'] == 1 ? 'active' }}" id="newest">
{% for topic in newest %}
<div class="row">
<span class="col-sm-2 d-none d-sm-block">
<strong class="text-nowrap">{{ topic.views }}</strong>
<span class="col-sm-2 d-none d-sm-block views">
<strong class="text-nowrap">
{{ topic.views }}
</strong>
<small class="text-nowrap">
{{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }}
</small>
Expand All @@ -107,66 +163,87 @@
</div>
</div>

<div id="stream-wrapper" class="col-lg-6">
<div id="stream">
<div class="overview">
{% for activity in activities %}
<div class="media">
<span class="{{ activity.object }} d-none d-sm-block"
title="{{ activity.headline|striptags|unescape }}">
</span>
{% if settings['homepage.timeline'] == 0 %}
<div id="stream-wrapper" class="col-lg-6">
<div id="stream">
<div class="overview">
{% for activity in activities %}
<div class="media">
<span class="{{ activity.object }} d-none d-sm-block"
title="{{ activity.headline|striptags|unescape }}">
</span>

<div class="d-none d-sm-block mr-2">
<a href="{{ route('profile', [activity.user_id]) }}">
<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 }}</small>
<strong>{{ activity.excerpt }}</strong>
<div class="d-none d-sm-block mr-2">
<a href="{{ route('profile', [activity.user_id]) }}">
<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 }}</small>
<strong>{{ activity.excerpt }}</strong>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
</div>
</div>

</div>
</section>

<section id="js-microblog" class="box">
<h4>
<i class="fas fa-stream fa-fw"></i>
Oś czasu
</h4>
<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>
{% if settings['homepage.timeline'] == 1 %}
<h4>
<i class="fas fa-stream fa-fw"></i>
Oś czasu
</h4>
<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>
<p class="content">${activity.excerpt}</p>
</div>
</template>
</template>
</div>
</div>
</div>
</div>
{% else %}
<h4>
<i class="far fa-comments fa-fw"></i>
<a href="{{ route('microblog.home') }}">
Popularne wpisy na mikroblogu
</a>
</h4>
<div v-for="microblog in microblogs">
<vue-microblog :key="microblog.id" :microblog="microblog" :wrap="true"></vue-microblog>
</div>
<div class="mt-3 mb-3 d-flex justify-content-center">
<vue-pagination
:current-page="currentPage"
:total-pages="totalPages"
@change="changePage">
</vue-pagination>
</div>
{% endif %}
<vue-notifications position="bottom right"/>
</section>
</main>
Expand Down

0 comments on commit 016a5a8

Please sign in to comment.