lazy image loading, person subtitles

4 files changed, 47 insertions, 12 deletions

diff --git a/common/src/lib.rs b/common/src/lib.rs
index f16338b..d61532c 100644
--- a/common/src/lib.rs
+++ b/common/src/lib.rs
@@ -312,3 +312,21 @@ impl Display for ObjectIds {
         Ok(())
     }
 }
+impl Display for PeopleGroup {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.write_str(match self {
+            PeopleGroup::Cast => "Cast",
+            PeopleGroup::Writing => "Writing",
+            PeopleGroup::Directing => "Directing",
+            PeopleGroup::Art => "Art",
+            PeopleGroup::Sound => "Sound",
+            PeopleGroup::Camera => "Camera",
+            PeopleGroup::Lighting => "Lighting",
+            PeopleGroup::Crew => "Crew",
+            PeopleGroup::Editing => "Editing",
+            PeopleGroup::Production => "Production",
+            PeopleGroup::Vfx => "Visual Effects",
+            PeopleGroup::CostumeMakeup => "Costume & Makeup",
+        })
+    }
+}
diff --git a/server/src/routes/ui/node.rs b/server/src/routes/ui/node.rs
index fc12db3..7f538ac 100644
--- a/server/src/routes/ui/node.rs
+++ b/server/src/routes/ui/node.rs
@@ -176,18 +176,28 @@ markup::define! {
                     }
                     h2 { "Cast & Crew" }
                     @for (group, people) in &node_ext.people {
-                        h3 { @format!("{:?}", group) }
-                        .hlist { ul.children { @for (i, pe) in people.iter().enumerate() {
-                            li { .card."aspect-port" {
-                                .poster {
-                                    a[href="#"] {
-                                        img[src=&uri!(r_person_asset(id, i, group, Some(1024))), loading="lazy"];
+                        details[open=group==&PeopleGroup::Cast] {
+                            summary { h3 { @format!("{}", group) } }
+                            .hlist { ul.children { @for (i, pe) in people.iter().enumerate() {
+                                li { .card."aspect-port" {
+                                    .poster {
+                                        a[href="#"] {
+                                            img[src=&uri!(r_person_asset(id, i, group, Some(1024))), loading="lazy"];
+                                        }
+                                        // .cardhover { .props { p { @pe.person.name } } }
                                     }
-                                    // .cardhover { .props { p { @pe.person.name } } }
-                                }
-                                .title { @pe.person.name }
-                            }}
-                        }}}
+                                    .title {
+                                        @pe.person.name br;
+                                        @if let Some(c) = pe.characters.get(0) {
+                                            .subtitle { @c }
+                                        }
+                                        @if let Some(c) = pe.jobs.get(0) {
+                                            .subtitle { @c }
+                                        }
+                                    }
+                                }}
+                            }}}
+                        }
                     }
                     details {
                         summary { "Tracks" }
diff --git a/web/style/layout.css b/web/style/layout.css
index 3ad5236..7fcfee1 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -92,6 +92,10 @@ footer p {
     font-size: 0.8em;
 }
 
+summary h3 {
+    display: inline;
+}
+
 *::before,
 .icon {
     font-family: "Material Icons";
@@ -126,4 +130,4 @@ footer p {
     #main h2 {
         margin: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/web/style/nodecard.css b/web/style/nodecard.css
index b0dd3e2..623a1e7 100644
--- a/web/style/nodecard.css
+++ b/web/style/nodecard.css
@@ -56,6 +56,9 @@
 .card .title a:hover {
     text-decoration-line: underline;
 }
+.card .title .subtitle {
+    color: grey;
+}
 .card .poster {
     display: grid;
 }