Add feeds to home page

district0x · Dec 20, 2024 · 0c21005 · 0c21005
1 parent cd349ac
commit 0c21005
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 71 deletions.
diff --git a/resources/scss/layouts/feeds.scss b/resources/scss/layouts/feeds.scss
@@ -1,87 +1,89 @@
 .pageFeeds {
 	padding-top: 97.21px;
 	background-color: $bgProfile;
-	.contentFeeds {
-		margin-bottom: 20px;
-		.medias {
-			.content {
-				width: calc(100% - 25px);
-				margin: 0 12.5px 24px;
 
-				audio, video {
-					width: 100%;
-				}
+	.not-found {
+		text-align: center;
+		font-weight: bold;
+	}
 
-				.contentFoot {
-					display: flex;
-					justify-content: space-between;
+	@include media-breakpoint-up(lg) {
+		padding-top: 140.29px;
+		background-color: $bgSite;
+	}
+}
 
-					.userProfile {
-						a {
-							margin-top: 14px;
-							margin-bottom: 30px;
-							margin-left: 30px;
+.contentFeeds {
+	margin-bottom: 20px;
+	.medias {
+		.content {
+			width: calc(100% - 25px);
+			margin: 0 12.5px 24px;
 
-							width: fit-content;
+			audio, video {
+				width: 100%;
+			}
 
-							display: flex;
-							align-items: center;
+			.contentFoot {
+				display: flex;
+				justify-content: space-between;
 
-							.user {
-								width: 36px;
-								height: 36px;
+				.userProfile {
+					a {
+						margin-top: 14px;
+						margin-bottom: 30px;
+						margin-left: 30px;
 
-								.photo {
-									box-shadow: 0px 0px 0px 1px $lilac;
-								}
+						width: fit-content;
 
-								&.star {
-									&::after {
-										height: 18px;
-										width: 19px;
-										bottom: 0px;
-										right: -9.5px;
-									}
-								}
+						display: flex;
+						align-items: center;
+
+						.user {
+							width: 36px;
+							height: 36px;
+
+							.photo {
+								box-shadow: 0px 0px 0px 1px $lilac;
 							}
 
-							h3 {
-								margin-left: 10px;
+							&.star {
+								&::after {
+									height: 18px;
+									width: 19px;
+									bottom: 0px;
+									right: -9.5px;
+								}
 							}
 						}
-					}
 
-					.date {
-						font-size: smaller;
-						margin-top: 14px;
-						margin-right: 14px;
+						h3 {
+							margin-left: 10px;
+						}
 					}
 				}
+
+				.date {
+					font-size: smaller;
+					margin-top: 14px;
+					margin-right: 14px;
+				}
 			}
 		}
 	}
-	.not-found {
-		text-align: center;
-		font-weight: bold;
-	}
+
 	@include media-breakpoint-up(md) {
-		.contentFeeds {
-			.medias {
-				.content {
-					width: calc(50% - 25px);
-					margin: 0 12.5px 24px;
-				}
+		.medias {
+			.content {
+				width: calc(50% - 25px);
+				margin: 0 12.5px 24px;
 			}
 		}
 	}
 	@include media-breakpoint-up(lg) {
-		padding-top: 140.29px;
-		background-color: $bgSite;
-		.contentFeeds {
-			background-color: $bgCard;
-			border-radius: 15px;
-			padding: 14px 40px;
-			position: relative;
-		}
+		background-color: $bgCard;
+		border-radius: 15px;
+		padding: 14px 40px;
+		position: relative;
 	}
 }
diff --git a/resources/scss/layouts/home.scss b/resources/scss/layouts/home.scss
@@ -86,6 +86,9 @@
 			}
 		}
 	}
+	.feeds {
+		margin-top: 30px;
+	}
 	@include media-breakpoint-up(sm) {
 		.hero {
 			.imgHero {
@@ -170,7 +173,7 @@
 		}
 		.hero {
 			position: absolute;
-			bottom: -2px;
+			top: -50px;
 			right: 0;
 			z-index: 0;
 			transform: translateY(0);
@@ -187,6 +190,13 @@
 				}
 			}
 		}
+		.feeds {
+			margin-top: 200px;
+			.titleFeeds {
+				padding-left: 40px;
+				padding-bottom: 20px;
+			}
+		}
 	}
 	@include media-breakpoint-up(xxl) {
 		.hero {

diff --git a/src/streamtide/ui/feeds/page.cljs b/src/streamtide/ui/feeds/page.cljs
@@ -71,7 +71,7 @@
        [timeago {:title (.toUTCString creation-date)
                  :datetime creation-date}]]]]))
 
-(defmethod page :route.feeds/index []
+(defn feeds []
   (let [active-account (subscribe [::accounts-subs/active-account])
         active-session? (subscribe [::st-subs/active-account-has-session?])]
     (fn []
@@ -81,12 +81,6 @@
             all-content (->> @user-content
                              (mapcat (fn [r] (-> r :search-contents :items))))
             has-more? (-> (last @user-content) :search-contents :has-next-page)]
-        [app-layout
-         [:main.pageSite.pageFeeds
-          {:id "feeds"}
-          ;[:div.headerFeeds
-          ; [:div.container
-          ;  [:h1.titlePage "Feeds"]]]
           (if loading?
             [spinner/spin]
             [:div.container
@@ -106,5 +100,11 @@
                    (doall
                      (for [{:keys [:content/id] :as content} all-content]
                        ^{:key id}
-                       [content-card content])))])]])]
-         [embed/safe-link-popup]]))))
+                       [content-card content])))])]
+             [embed/safe-link-popup]])))))
+
+(defmethod page :route.feeds/index []
+  [app-layout
+   [:main.pageSite.pageFeeds
+    {:id "feeds"}
+    [feeds]]])
diff --git a/src/streamtide/ui/home/page.cljs b/src/streamtide/ui/home/page.cljs
@@ -2,7 +2,8 @@
   "Home page"
   (:require
     [district.ui.component.page :refer [page]]
-    [streamtide.ui.components.app-layout :refer [app-layout]]))
+    [streamtide.ui.components.app-layout :refer [app-layout]]
+    [streamtide.ui.feeds.page :refer [feeds]]))
 
 (defmethod page :route/home []
   (let []
@@ -27,4 +28,10 @@
            [:video.item-night
             {:autoPlay true :muted true :loop true}
             [:source {:src "/img/layout/stream_night.mp4" :type "video/mp4"}]
-            "Your browser does not support the video tag."]]]]]])))
+            "Your browser does not support the video tag."]]]
+         [:div.feeds.container
+          [:h1.titlePage.titleFeeds
+           "Latest Activity"]
+          [feeds]
+          ]
+         ]]])))