diff options
| -rw-r--r-- | server/src/routes/ui/node.rs | 24 | ||||
| -rw-r--r-- | web/style/nodepage.css | 30 |
2 files changed, 38 insertions, 16 deletions
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs index 7ba455d..6ce82c2 100644 --- a/server/src/routes/ui/node.rs +++ b/server/src/routes/ui/node.rs @@ -174,22 +174,22 @@ markup::define! { p { @format_duration(m.duration) } p { @m.resolution_name() } } - @for (kind, value) in &node.ratings { - p { @match kind { - Rating::YoutubeLikes => { @format_count(*value as usize) " Likes" } - Rating::YoutubeViews => { @format_count(*value as usize) " Views" } - Rating::YoutubeFollowers => { @format_count(*value as usize) " Subscribers" } - Rating::RottenTomatoes => { @value " Tomatoes" } - Rating::Metacritic => { "Metacritic Score: " @value } - Rating::Imdb => { "IMDb Rating: " @value } - Rating::Tmdb => { "TMDB Rating: " @value } - } } + @if let Some(d) = &node.release_date { + p { @d.format("%Y-%m-%d").to_string() } } @if !node.children.is_empty() { p { @format!("{} items", node.children.len()) } } - @if let Some(d) = &node.release_date { - p { "Released " @d.format("%Y-%m-%d").to_string() } + @for (kind, value) in &node.ratings { + @match kind { + Rating::YoutubeLikes => {p{ @format_count(*value as usize) " Likes" }} + Rating::YoutubeViews => {p{ @format_count(*value as usize) " Views" }} + Rating::YoutubeFollowers => {p{ @format_count(*value as usize) " Subscribers" }} + Rating::RottenTomatoes => {p.rating{ @value " Tomatoes" }} + Rating::Metacritic => {p{ "Metacritic Score: " @value }} + Rating::Imdb => {p.rating{ "IMDb " @value }} + Rating::Tmdb => {p.rating{ "TMDB " @value }} + } } @if let Some(f) = &node.federated { p.federation { @f } diff --git a/web/style/nodepage.css b/web/style/nodepage.css index 576e398..c1d6796 100644 --- a/web/style/nodepage.css +++ b/web/style/nodepage.css @@ -47,13 +47,29 @@ margin-right: 1em; } .page.node .title .play { - display: inline; + display: inline-block; font-stretch: 200%; } .page.node .title .play::before { content: "play_arrow"; vertical-align: middle; } +.page.node .title .mark_watched, +.page.node .title .mark_unwatched { + display: inline-block; +} +.page.node .title .mark_watched input, +.page.node .title .mark_unwatched input { + background-color: #80808040; +} + +/* TODO find a non-horrible way to put the icon there */ +/*.page.node .title .mark_watched input::before { + content: "done_all"; +} +.page.node .title .mark_unwatched input::before { + content: "undo"; +}*/ .props p { margin: 0.4em; @@ -65,20 +81,26 @@ border-radius: 4px; } .props p.federation { - background: rgba(68, 129, 49, 0.522); + background: rgba(22, 101, 133, 0.603); } .props p.federation::before { content: "link"; } .props p.watched { - background: rgba(106, 224, 70, 0.522); + background: rgba(75, 175, 44, 0.644); } .props p.watched::before { content: "check"; } .props p.progress { - background: rgba(225, 255, 58, 0.522); + background: rgba(156, 89, 35, 0.63); } .props p.progress::before { content: "pending"; } +.props p.rating { + background: rgba(138, 156, 35, 0.63); +} +.props p.rating::before { + content: "stars"; +} |