draft nr. 1 of new card animtions

1 files changed, 14 insertions, 10 deletions

diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index b72ec11..e4d53e6 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -82,22 +82,26 @@ pub async fn r_library_node_filter<'a>(
 
 markup::define! {
     NodeCard<'a>(id: &'a str, node: &'a NodePublic) {
-        @let cls = format!("node card poster {}", match node.kind {NodeKind::Channel => "poster-square", NodeKind::Video => "thumb-land", NodeKind::Collection => "poster-land", _ => "poster-port"});
+        @let cls = format!("node card {}", match node.kind {NodeKind::Channel => "aspect-square", NodeKind::Video => "aspect-thumb", NodeKind::Collection => "aspect-land", _ => "aspect-port"});
         div[class=cls] {
             .poster {
-                a[href=uri!(r_library_node(id))] {
-                    img[src=uri!(r_item_assets(id, AssetRole::Poster, Some(1024)))];
-                }
-                @if matches!(node.kind, NodeKind::Collection | NodeKind::Channel) {
-                    .cardhover.open { a[href=&uri!(r_library_node(id))] { "Open" } }
-                } else {
-                    .cardhover.item {
-                        a.play[href=&uri!(r_player(id, PlayerConfig::default()))] { "▶" }
+                .inner {
+                    a[href=uri!(r_library_node(id))] {
+                        img[src=uri!(r_item_assets(id, AssetRole::Poster, Some(1024)))];
+                    }
+                    div.details {
+                        h3 { @node.title }
                         @Props { node }
+                        p.description { @node.description }
+                        @if matches!(node.kind, NodeKind::Collection | NodeKind::Channel) {
+                            a[href=&uri!(r_library_node(id))] { "Open" }
+                        } else {
+                            a.play[href=&uri!(r_player(id, PlayerConfig::default()))] { "Watch now" }
+                        }
                     }
                 }
             }
-            p.title {
+            div.title {
                 a[href=uri!(r_library_node(id))] {
                     @node.title
                 }