diff options
| -rw-r--r-- | server/src/routes/ui/node.rs | 51 | ||||
| -rw-r--r-- | server/src/routes/ui/style/nodecard.css | 26 | ||||
| -rw-r--r-- | server/src/routes/ui/style/nodepage.css | 3 |
3 files changed, 47 insertions, 33 deletions
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs index 4574709..97d0516 100644 --- a/server/src/routes/ui/node.rs +++ b/server/src/routes/ui/node.rs @@ -68,14 +68,17 @@ 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"}); div[class=cls] { - div.poster { + .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) { - div.hoverdir { a[href=&uri!(r_library_node(id))] { "Open" } } + .cardhover.open { a[href=&uri!(r_library_node(id))] { "Open" } } } else { - div.hoveritem { a[href=&player_uri(id)] { "▶" } } + .cardhover.item { + a.play[href=&player_uri(id)] { "▶" } + @Props { node } + } } } p.title { @@ -89,31 +92,16 @@ markup::define! { @if !matches!(node.kind, NodeKind::Collection) { img.backdrop[src=uri!(r_item_assets(id, AssetRole::Backdrop, Some(2048)))]; } - div.page.node { + .page.node { @if !matches!(node.kind, NodeKind::Collection) { div.bigposter { img[src=uri!(r_item_assets(id, AssetRole::Poster, Some(2048)))]; } } - div.title { + .title { h1 { @node.title } @if node.media.is_some() { a.play[href=&player_uri(id)] { "Watch now" }} } - div.details { - div.props { - @if let Some(m) = &node.media { - p { @format_duration(m.duration) } - p { @m.resolution_name() } - } - @for r in &node.ratings { - p { @match r { - Rating::YoutubeLikes(n) => { @format_count(*n) " Likes" } - Rating::YoutubeViews(n) => { @format_count(*n) " Views" } - Rating::YoutubeFollowers(n) => { @format_count(*n) " Subscribers" } - Rating::RottenTomatoes(n) => { @n " Tomatoes" } - Rating::Metacritic(n) => { "Metacritic Score: " @n } - Rating::Imdb(n) => { "IMDb Rating: " @n } - } } - } - } + .details { + @Props { node } h3 { @node.tagline } p { @if matches!(node.kind, NodeKind::Video | NodeKind::Channel) { pre { @node.description } } else { @node.description } } } @@ -137,6 +125,25 @@ markup::define! { } } } + + Props<'a>(node: &'a NodePublic) { + .props { + @if let Some(m) = &node.media { + p { @format_duration(m.duration) } + p { @m.resolution_name() } + } + @for r in &node.ratings { + p { @match r { + Rating::YoutubeLikes(n) => { @format_count(*n) " Likes" } + Rating::YoutubeViews(n) => { @format_count(*n) " Views" } + Rating::YoutubeFollowers(n) => { @format_count(*n) " Subscribers" } + Rating::RottenTomatoes(n) => { @n " Tomatoes" } + Rating::Metacritic(n) => { "Metacritic Score: " @n } + Rating::Imdb(n) => { "IMDb Rating: " @n } + } } + } + } + } } pub fn format_duration(mut d: f64) -> String { diff --git a/server/src/routes/ui/style/nodecard.css b/server/src/routes/ui/style/nodecard.css index 54bdcfe..ae6b707 100644 --- a/server/src/routes/ui/style/nodecard.css +++ b/server/src/routes/ui/style/nodecard.css @@ -26,7 +26,7 @@ border-radius: 0.2em; padding: 0.6em; margin: 0.2em; - transition: filter 0.2s; + transition: filter 0.22s; } .dirup:hover { filter: brightness(120%); @@ -82,8 +82,7 @@ object-position: center; } - -.node.card.poster .poster .hoverdir { +.node.card.poster .poster .cardhover.open { transition: opacity 0.3s, backdrop-filter 0.3s; opacity: 0; display: flex; @@ -92,12 +91,12 @@ height: 5em; margin-top: -5em; } -.node.card.poster .poster:hover .hoverdir { +.node.card.poster .poster:hover .cardhover.open { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.node.card.poster .poster .hoverdir a { +.node.card.poster .poster .cardhover.open a { text-decoration: none; width: 100%; height: 1.7em; @@ -110,11 +109,12 @@ margin: 0.6em; transition: background-color 0.2s; } -.node.card.poster .poster .hoverdir a:hover { +.node.card.poster .poster .cardhover.open a:hover { background-color: #0008; } -.node.card.poster .poster .hoveritem { +.node.card.poster .poster .cardhover.item { + position: relative; pointer-events: none; grid-area: 1 / 1; transition: opacity 0.3s, backdrop-filter 0.3s; @@ -123,12 +123,13 @@ justify-content: center; align-items: center; } -.node.card.poster .poster:hover .hoveritem { +.node.card.poster .poster:hover .cardhover.item { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.node.card.poster .poster .hoveritem a { + +.node.card.poster .poster .cardhover.item a.play { text-decoration: none; font-stretch: 200%; width: 1em; @@ -142,7 +143,12 @@ background-color: #0005; transition: background-color 0.2s, font-size 0.2s; } -.node.card.poster .poster .hoveritem a:hover { +.node.card.poster .poster .cardhover.item a.play:hover { background-color: #0008; font-size: 2.4em; } +.node.card.poster .poster .cardhover.item .props { + position: absolute; + bottom: 0px; + left: 0px; +} diff --git a/server/src/routes/ui/style/nodepage.css b/server/src/routes/ui/style/nodepage.css index 21d7754..2590b74 100644 --- a/server/src/routes/ui/style/nodepage.css +++ b/server/src/routes/ui/style/nodepage.css @@ -60,5 +60,6 @@ font-weight: bolder; display: inline-block; padding: 0.2em; - background: #ffffff15; + background: #5a5a5a85; + border-radius: 4px; } |