draft nr. 1 of new card animtions

3 files changed, 58 insertions, 38 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
                 }
diff --git a/server/src/routes/ui/style.rs b/server/src/routes/ui/style.rs
index 282eaaa..1f92690 100644
--- a/server/src/routes/ui/style.rs
+++ b/server/src/routes/ui/style.rs
@@ -16,7 +16,7 @@ macro_rules! concat_files {
                 .map(|n| {
                     read_to_string({
                         let p = PathBuf::from_str(file!()).unwrap().parent().unwrap().join($base).join(n);
-                        log::debug!("load {p:?}");
+                        log::info!("load {p:?}");
                         p
                     })
                     .unwrap()
diff --git a/web/nodecard.css b/web/nodecard.css
index bfc0b74..4103c5e 100644
--- a/web/nodecard.css
+++ b/web/nodecard.css
@@ -35,21 +35,57 @@
 
 .node.card {
     padding: 1em;
+}
+
+.node.card .poster,
+.node.card .poster img {
     height: var(--card-size);
+    transition: height 0.2s;
+}
+.node.card:hover .poster img {
+    height: calc(var(--card-size)+10em);
 }
-.node.card.poster.poster-port {
+.node.card.aspect-port {
     width: calc(var(--card-size) / var(--port-poster-aspect));
 }
-.node.card.poster.poster-land {
+.node.card.aspect-land {
     width: calc(var(--card-size) / var(--land-poster-aspect));
 }
-.node.card.poster.thumb-land {
+.node.card.aspect-thumb {
     width: calc(var(--card-size) / var(--land-thumb-aspect));
 }
-.node.card.poster.poster-square {
+.node.card.aspect-square {
     width: calc(var(--card-size));
 }
 
+.node.card .poster a img {
+    object-fit: cover;
+    object-position: center;
+    width: 100%;
+}
+
+.node.card .title {
+    text-align: center;
+}
+
+.node.card .inner {
+    transition: margin 0.2s, padding 0.2s;
+}
+.node.card:hover .inner {
+    background-color: rgba(0, 0, 0, 0.603);
+    backdrop-filter: blur(10px);
+    border-radius: 1em;
+    padding: 1.5em;
+    margin: -5em;
+}
+.node.card:not(:hover) .details {
+    display: none;
+}
+.node.card:hover .title {
+    display: none;
+}
+
+/* 
 .node.card .title {
     margin-top: 0.1em;
     text-align: center;
@@ -60,29 +96,9 @@
 }
 .node.card .poster a {
     grid-area: 1 / 1;
-}
-
-.node.card.poster.poster-port .poster img {
-    width: calc(var(--card-size) / var(--port-poster-aspect));
-    height: var(--card-size);
-}
-.node.card.poster.poster-land .poster img {
-    width: calc(var(--card-size) / var(--land-poster-aspect));
-    height: var(--card-size);
-}
-.node.card.poster.thumb-land .poster img {
-    width: calc(var(--card-size) / var(--land-thumb-aspect));
-    height: var(--card-size);
-}
-.node.card.poster.poster-square .poster img {
-    width: calc(var(--card-size));
-    height: var(--card-size);
-}
-.node.card .poster a img {
-    object-fit: cover;
-    object-position: center;
-}
+} */
 
+/* 
 .node.card.poster .poster .cardhover.open {
     transition: opacity 0.3s, backdrop-filter 0.3s;
     opacity: 0;
@@ -152,4 +168,4 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-}
+} */