From 0691bccd834203561828ed8714d13cb3752fd5fc Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Tue, 10 Oct 2023 23:20:55 +0200
Subject: [PATCH] Switch timeline on page reload

---
 resources/views/home.twig | 158 +++++++++++++++++++++++++-------------
 1 file changed, 106 insertions(+), 52 deletions(-)

diff --git a/resources/views/home.twig b/resources/views/home.twig
index 8083b84d0..562c74eb8 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -47,6 +47,42 @@
           </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">
@@ -75,11 +111,13 @@
                     <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>
-                            <small class="text-nowrap">
-                              {{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }}
-                            </small>
+                          <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>
                           </span>
 
                           <div class="col-sm-10 col-12">
@@ -102,11 +140,13 @@
                     <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>
-                            <small class="text-nowrap">
-                              {{ declination(topic.views, ['wyświetlenie', 'wyświetlenia', 'wyświetleń'], true) }}
-                            </small>
+                          <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>
                           </span>
 
                           <div class="col-sm-10 col-12">
@@ -127,32 +167,34 @@
                 </div>
               </div>
 
-              <div id="stream-wrapper" class="col-lg-6">
-                <div id="stream">
-                  <div class="overview">
-                    {% for activity in activities %}
-                      <div class="media">
+              {% 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>
 
@@ -160,34 +202,46 @@
       </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>
+        {% endif %}
 
         <vue-notifications position="bottom right"/>
       </section>