refactor: restructure homepage layout

src/nitter.nim

@@ -7,7 +7,7 @@ from os import getEnv
 import jester
 
 import types, config, prefs, formatters, redis_cache, http_pool, auth, query
-import views/[general, about, search, profile]
+import views/[general, about, search, profile, homepage]
 import karax/[karaxdsl, vdom]
 import routes/[
   preferences, timeline, status, media, search, rss, list, debug,
@@ -129,14 +129,7 @@ routes:
         except:
           continue
       
-      let homepageHtml = buildHtml(tdiv(class="homepage-container")):
-        tdiv(class="following-column"):
-          tdiv(class="profile-cards"):
-            for user in users:
-              renderUserCard(user, prefs, currentPath)
-        
-        tdiv(class="timeline"):
-          html
+      let homepageHtml = renderHomepage(users, html, prefs, currentPath)
       
       resp renderMain(homepageHtml, request, cfg, prefs, "Following")
     else:

src/sass/homepage.scss

@@ -6,29 +6,48 @@
     gap: 5px;
     max-width: 1200px;
     margin: 0 auto;
+    justify-content: center;
 }
 
-.following-column {
+.following-column,
+.timeline-users-column {
     width: 280px;
     flex-shrink: 0;
 }
 
+.timeline-users-column {
+    .timeline-item {
+        flex-direction: column;
+
+    }
+}
+
 .profile-cards {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }
 
+.timeline-users-column > :first-child,
 .homepage-container .timeline-container > .timeline > :first-child {
     margin-top: 0;
 }
 
-@media (max-width: 887px) {
+@media (max-width: 1200px) {
     .homepage-container {
         max-width: 100%;
-    }
-
-    .following-column {
-        display:none;
+        padding: 0 10px;
+    }
+}
+
+@media (max-width: 1100px) {
+    .following-column {
+        display: none;
+    }
+}
+
+@media (max-width: 800px) {
+    .timeline-users-column {
+        display: none;
     }
 }

src/views/homepage.nim

@@ -1,15 +1,19 @@
 # SPDX-License-Identifier: AGPL-3.0-only
 import karax/[karaxdsl, vdom]
 
-import profile
+import timeline, profile
 import ".."/[types]
 
-proc renderHomepage*(users: seq[User]; prefs: Prefs; path: string): VNode =
+proc renderHomepage*(users: seq[User]; timeline: VNode; prefs: Prefs; path: string): VNode =
   buildHtml(tdiv(class="homepage-container")):
+    tdiv(class="timeline-users-column"):
+      for user in users:
+        renderUser(user, prefs, path)
+
+    tdiv(class="timeline"):
+      timeline
+
     tdiv(class="following-column"):
       tdiv(class="profile-cards"):
         for user in users:
           renderUserCard(user, prefs, path)
-
-    tdiv(class="timeline"):
-      tdiv(id="timeline-container")

src/views/timeline.nim

@@ -55,7 +55,7 @@ proc renderThread(thread: Tweets; prefs: Prefs; path: string): VNode =
       renderTweet(tweet, prefs, path, class=(header & "thread"),
                   index=i, last=(i == thread.high), showThread=show)
 
-proc renderUser(user: User; prefs: Prefs; path: string): VNode =
+proc renderUser*(user: User; prefs: Prefs; path: string): VNode =
   let class = if user.sensitive: "timeline-item nsfw" else: "timeline-item"
   buildHtml(tdiv(class=class)):
     a(class="tweet-link", href=("/" & user.username))