diff options
| -rw-r--r-- | server/src/routes/ui/node.rs | 37 | ||||
| -rw-r--r-- | web/nodecard.css | 33 |
2 files changed, 27 insertions, 43 deletions
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs index e4d53e6..773daa4 100644 --- a/server/src/routes/ui/node.rs +++ b/server/src/routes/ui/node.rs @@ -82,24 +82,37 @@ pub async fn r_library_node_filter<'a>( markup::define! { NodeCard<'a>(id: &'a str, node: &'a NodePublic) { - @let cls = format!("node card {}", match node.kind {NodeKind::Channel => "aspect-square", NodeKind::Video => "aspect-thumb", NodeKind::Collection => "aspect-land", _ => "aspect-port"}); + @let cls = format!("node card poster {}", match node.kind {NodeKind::Channel => "aspect-square", NodeKind::Video => "aspect-thumb", NodeKind::Collection => "aspect-land", _ => "aspect-port"}); div[class=cls] { .poster { - .inner { - a[href=uri!(r_library_node(id))] { - img[src=uri!(r_item_assets(id, AssetRole::Poster, Some(1024)))]; + 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" } + @Props { node } } - div.details { - h3 { @node.title } + } else { + .cardhover.item { + a.play[href=&uri!(r_player(id, PlayerConfig::default()))] { "▶" } @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" } - } } } + // .inner { + // a[href=uri!(r_library_node(id))] { + // img[src=uri!(r_item_assets(id, AssetRole::Poster, Some(1024)))]; + // } + // div.details { + // h3 { @node.title } + // p.descriptioüwn { @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" } + // } + // } + // } } div.title { a[href=uri!(r_library_node(id))] { diff --git a/web/nodecard.css b/web/nodecard.css index fb1a9ff..d32d5f4 100644 --- a/web/nodecard.css +++ b/web/nodecard.css @@ -40,13 +40,6 @@ .node.card .poster, .node.card .poster img { height: var(--card-size); - transition-property: height; - transition-duration: 0.2s; - transition-timing-function: ease; - /* transition-delay: 0.2s; */ -} -.node.card:hover .poster img { - height: calc(var(--card-size) + 10em); } .node.card.aspect-port { width: calc(var(--card-size) / var(--port-poster-aspect)); @@ -71,27 +64,6 @@ text-align: center; } -.node.card .inner { - transition-property: margin, padding; - transition-duration: 0.2s, 0.2s; - transition-timing-function: ease, ease; - /* transition-delay: 0.2s, 0.2s; */ -} -.node.card:hover .inner { - background-color: rgba(0, 0, 0, 0.76); - 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; @@ -102,9 +74,8 @@ } .node.card .poster a { grid-area: 1 / 1; -} */ +} -/* .node.card.poster .poster .cardhover.open { transition: opacity 0.3s, backdrop-filter 0.3s; opacity: 0; @@ -174,4 +145,4 @@ position: absolute; bottom: 0px; left: 0px; -} */ +} |