diff options
Diffstat (limited to 'server/src/routes')
| -rw-r--r-- | server/src/routes/ui/browser.rs | 8 | ||||
| -rw-r--r-- | server/src/routes/ui/node.rs | 47 | ||||
| -rw-r--r-- | server/src/routes/ui/style/directorypage.css | 24 |
3 files changed, 41 insertions, 38 deletions
diff --git a/server/src/routes/ui/browser.rs b/server/src/routes/ui/browser.rs index d0c09b1..30eb3f2 100644 --- a/server/src/routes/ui/browser.rs +++ b/server/src/routes/ui/browser.rs @@ -3,7 +3,7 @@ which is licensed under the GNU Affero General Public License (version 3); see /COPYING. Copyright (C) 2023 metamuffin <metamuffin.org> */ -use super::{account::session::Session, error::MyError, layout::DynLayoutPage, node::ItemCard}; +use super::{account::session::Session, error::MyError, layout::DynLayoutPage, node::PosterCard}; use crate::library::{Library, Node}; use rocket::{get, State}; use std::collections::VecDeque; @@ -26,7 +26,11 @@ pub fn r_all_items(_sess: Session, library: &State<Library>) -> Result<DynLayout .page.dir { h1 { "All Items" } ul.directorylisting { @for item in &items { - li { @ItemCard { item: &item } } + li {@PosterCard { + wide: false, dir: false, + path: item.lib_path.clone(), + title: &item.info.title + }} }} } }, diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs index d5e52ff..b9e9871 100644 --- a/server/src/routes/ui/node.rs +++ b/server/src/routes/ui/node.rs @@ -15,6 +15,7 @@ use crate::{ CONF, }; use anyhow::Context; +use jellycommon::DirectoryKind; use log::info; use rocket::{get, http::ContentType, State}; use rocket::{FromFormField, UriDisplayQuery}; @@ -49,23 +50,17 @@ markup::define! { } NodeCard<'a>(node: &'a Arc<Node>) { @match node.as_ref() { - Node::Directory(dir) => { @DirectoryCard { dir } } - Node::Item(item) => { @ItemCard { item } } - } - } - DirectoryCard<'a>(dir: &'a Arc<Directory>) { - div.card.dir { - div.banner { - a[href=uri!(r_library_node(&dir.lib_path))] { - img[src=uri!(r_item_assets(&dir.lib_path, AssetRole::Poster))]; - } - div.hover { a[href=uri!(r_library_node(&dir.lib_path))] { "Open" } } - } - p.title { - a[href=uri!(r_library_node(&dir.lib_path))] { - @dir.info.title - } - } + Node::Directory(dir) => {@PosterCard { + wide: !matches!(dir.info.kind, DirectoryKind::Series | DirectoryKind::Season), + dir: true, + path: dir.lib_path.clone(), + title: &dir.info.title + }} + Node::Item(item) => {@PosterCard { + wide: false, dir: false, + path: item.lib_path.clone(), + title: &item.info.title + }} } } DirectoryPage<'a>(dir: &'a Arc<Directory>) { @@ -81,17 +76,21 @@ markup::define! { } } } - ItemCard<'a>(item: &'a Arc<Item>) { - div.card.item { + PosterCard<'a>(path: PathBuf, title: &'a str, wide: bool, dir: bool) { + div[class=if *wide {"card wide poster"} else {"card poster"}] { div.banner { - a[href=uri!(r_library_node(&item.lib_path))] { - img[src=uri!(r_item_assets(&item.lib_path, AssetRole::Poster))]; + a[href=uri!(r_library_node(path))] { + img[src=uri!(r_item_assets(path, AssetRole::Poster))]; + } + @if *dir { + div.hoverdir { a[href=&uri!(r_library_node(path))] { "Open" } } + } else { + div.hoveritem { a[href=&player_uri(path)] { "▶" } } } - div.hover { a[href=&player_uri(&item.lib_path)] { "▶" } } } p.title { - a[href=uri!(r_library_node(&item.lib_path))] { - @item.info.title + a[href=uri!(r_library_node(path))] { + @title } } } diff --git a/server/src/routes/ui/style/directorypage.css b/server/src/routes/ui/style/directorypage.css index e81dce7..0d18c82 100644 --- a/server/src/routes/ui/style/directorypage.css +++ b/server/src/routes/ui/style/directorypage.css @@ -37,10 +37,10 @@ padding: 1em; height: var(--card-size); } -.card.item { +.card.poster { width: calc(var(--card-size) / var(--item-banner-aspect)); } -.card.dir { +.card.poster.wide { width: calc(var(--card-size) / var(--dir-banner-aspect)); } @@ -56,11 +56,11 @@ grid-area: 1 / 1; } -.card.item .banner img { +.card.poster .banner img { width: calc(var(--card-size) / var(--item-banner-aspect)); height: var(--card-size); } -.card.dir .banner img { +.card.poster.wide .banner img { width: calc(var(--card-size) / var(--dir-banner-aspect)); height: var(--card-size); } @@ -70,7 +70,7 @@ } -.card.dir .banner .hover { +.card.poster .banner .hoverdir { transition: opacity 0.3s, backdrop-filter 0.3s; opacity: 0; display: flex; @@ -79,12 +79,12 @@ height: 5em; margin-top: -5em; } -.card.dir .banner:hover .hover { +.card.poster .banner:hover .hoverdir { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.card.dir .banner .hover a { +.card.poster .banner .hoverdir a { text-decoration: none; width: 100%; height: 1.7em; @@ -97,11 +97,11 @@ margin: 0.6em; transition: background-color 0.2s; } -.card.dir .banner .hover a:hover { +.card.poster .banner .hoverdir a:hover { background-color: #0008; } -.card.item .banner .hover { +.card.poster .banner .hoveritem { pointer-events: none; grid-area: 1 / 1; transition: opacity 0.3s, backdrop-filter 0.3s; @@ -110,12 +110,12 @@ justify-content: center; align-items: center; } -.card.item .banner:hover .hover { +.card.poster .banner:hover .hoveritem { opacity: 1; background-color: #0004; backdrop-filter: blur(3px); } -.card.item .banner .hover a { +.card.poster .banner .hoveritem a { text-decoration: none; font-stretch: 200%; width: 1em; @@ -129,7 +129,7 @@ background-color: #0005; transition: background-color 0.2s, font-size 0.2s; } -.card.item .banner .hover a:hover { +.card.poster .banner .hoveritem a:hover { background-color: #0008; font-size: 2.4em; } |