refactor hlist once again. also added top rated in home

3 files changed, 39 insertions, 25 deletions

diff --git a/server/src/routes/ui/home.rs b/server/src/routes/ui/home.rs
index 3abc9e9..f9994cc 100644
--- a/server/src/routes/ui/home.rs
+++ b/server/src/routes/ui/home.rs
@@ -18,7 +18,7 @@ use jellybase::{
     database::{ReadableTable, TableExt, T_NODE, T_USER_NODE},
     CONF,
 };
-use jellycommon::user::WatchedState;
+use jellycommon::{user::WatchedState, Rating};
 use rocket::{get, State};
 use tokio::fs::read_to_string;
 
@@ -60,6 +60,19 @@ pub fn r_home(sess: Session, db: &State<DataAcid>) -> MyResult<DynLayoutPage> {
         .into_iter()
         .collect::<Vec<_>>();
 
+    items.sort_by_key(|(_, n, _)| {
+        n.ratings
+            .get(&Rating::Tmdb)
+            .map(|x| (*x * -1000.) as i32)
+            .unwrap_or(0)
+    });
+
+    let top_rated = items
+        .iter()
+        .take(16)
+        .map(|k| k.to_owned())
+        .collect::<Vec<_>>();
+
     items.sort_by_key(|(_, n, _)| n.release_date.map(|d| -d).unwrap_or(i64::MAX));
 
     let latest = items
@@ -84,31 +97,33 @@ pub fn r_home(sess: Session, db: &State<DataAcid>) -> MyResult<DynLayoutPage> {
         title: "Home".to_string(),
         content: markup::new! {
             h2 { "Explore " @CONF.brand }
-            ul.hlist {@for (id, node, udata) in &toplevel {
+            ul.children.hlist {@for (id, node, udata) in &toplevel {
                 li { @NodeCard { id, node, udata } }
             }}
             @if !continue_watching.is_empty() {
                 h2 { "Continue Watching" }
-                ul.hlist {@for (id, node, udata) in &continue_watching {
+                ul.children.hlist {@for (id, node, udata) in &continue_watching {
                     li { @NodeCard { id, node, udata } }
                 }}
             }
             @if !watchlist.is_empty() {
                 h2 { "Watchlist" }
-                ul.hlist {@for (id, node, udata) in &watchlist {
+                ul.children.hlist {@for (id, node, udata) in &watchlist {
                     li { @NodeCard { id, node, udata } }
                 }}
             }
             h2 { "Latest Releases" }
-            ul.hlist {@for (id, node, udata) in &latest {
+            ul.children.hlist {@for (id, node, udata) in &latest {
                 li { @NodeCard { id, node, udata } }
             }}
             h2 { "Today's Picks" }
-            ul.hlist {@for (id, node, udata) in &random {
+            ul.children.hlist {@for (id, node, udata) in &random {
+                li { @NodeCard { id, node, udata } }
+            }}
+            h2 { "Top Rated" }
+            ul.children.hlist {@for (id, node, udata) in &top_rated {
                 li { @NodeCard { id, node, udata } }
             }}
-            p.error { "TODO: recently added" }
-            p.error { "TODO: best rating" }
         },
         ..Default::default()
     })
diff --git a/web/style/layout.css b/web/style/layout.css
index 46fecde..b261781 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -110,15 +110,28 @@ summary h3 {
     margin-right: 3px;
 }
 
+.children {
+    padding: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    list-style: none;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+}
+.children:not(.hlist) {
+    flex-wrap: wrap;
+}
+.children li {
+    display: block;
+}
 .hlist {
     overflow-x: auto;
     max-width: 100%;
-    white-space: nowrap;
+    flex-wrap: nowrap;
 }
 .hlist li {
     display: inline-block;
-    vertical-align: top;
-    white-space: normal;
 }
 
 @media (max-width: 750px) {
diff --git a/web/style/nodecard.css b/web/style/nodecard.css
index 623a1e7..3ed89da 100644
--- a/web/style/nodecard.css
+++ b/web/style/nodecard.css
@@ -4,20 +4,6 @@
     Copyright (C) 2023 metamuffin <metamuffin.org>
     Copyright (C) 2023 tpart
 */
-.children {
-    padding: 1em;
-    padding-left: 3em;
-    padding-right: 3em;
-    list-style: none;
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    box-sizing: border-box;
-}
-.children li {
-    display: block;
-}
-
 .card {
     padding: 1em;
 }