style new elems

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";
+}