node highlight card + css cleanup

1 files changed, 30 insertions, 5 deletions

diff --git a/ui/src/components/node_card.rs b/ui/src/components/node_card.rs
index eb00ccc..d93825b 100644
--- a/ui/src/components/node_card.rs
+++ b/ui/src/components/node_card.rs
@@ -18,13 +18,12 @@ markup::define! {
     NodeCard<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
         @let node = nku.get(NKU_NODE).unwrap_or_default();
         @let slug = node.get(NO_SLUG).unwrap_or_default();
-        @let cls = format!("node card poster {}", aspect_class(node));
-        div[class=cls] {
+        div[class=&format!("card {}", aspect_class(node))] {
             .poster {
                 a[href=u_node_slug(&slug)] {
                     img[src=cover_image(&node, 512), loading="lazy"];
                 }
-                .cardhover.item {
+                .overlay {
                     @if node.has(NO_TRACK.0) {
                         a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" }
                     }
@@ -43,15 +42,16 @@ markup::define! {
             }
         }
     }
+
     NodeCardWide<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
         @let node = nku.get(NKU_NODE).unwrap_or_default();
         @let slug = node.get(NO_SLUG).unwrap_or_default();
-        div[class="node card widecard poster"] {
+        div[class="card wide"] {
             div[class=&format!("poster {}", aspect_class(node))] {
                 a[href=u_node_slug(&slug)] {
                     img[src=cover_image(&node, 512), loading="lazy"];
                 }
-                .cardhover.item {
+                .overlay {
                     @if node.has(NO_TRACK.0) {
                         a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" }
                     }
@@ -64,6 +64,31 @@ markup::define! {
             }
         }
     }
+
+    NodeCardHightlight<'a>(ri: &'a RenderInfo<'a>, nku: Object<'a>) {
+        @let node = nku.get(NKU_NODE).unwrap_or_default();
+        @let slug = node.get(NO_SLUG).unwrap_or_default();
+        @let backdrop = u_image(node.get(NO_PICTURES).unwrap_or_default().get(PICT_BACKDROP).unwrap_or_default(), 2048);
+        div[class="card highlight", style=format!("background-image: url(\"{backdrop}\")")] {
+            .inner {
+                div.overview {
+                    h2 { a[href=u_node_slug(slug)] { @node.get(NO_TITLE) } }
+                    @Props { ri, nku: *nku, full: false }
+                    p { b { @node.get(NO_TAGLINE) } " " @node.get(NO_DESCRIPTION) }
+                }
+                div[class=&format!("poster {}", aspect_class(node))] {
+                    a[href=u_node_slug(&slug)] {
+                        img[src=cover_image(&node, 512), loading="lazy"];
+                    }
+                    .overlay {
+                        @if node.has(NO_TRACK.0) {
+                            a.play.icon[href=u_node_slug_player(&slug)] { "play_arrow" }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 fn cover_image(node: &Object, size: usize) -> String {