Move species image into right column detail card with attribution

This commit is contained in:
2026-03-15 15:24:18 +01:00
parent 5155d930b7
commit a7f64e763f
2 changed files with 38 additions and 50 deletions
+32 -31
View File
@@ -554,37 +554,9 @@ pub fn SpeciesDetail(slug: String) -> Element {
.or_else(|| s.primary_image_key.clone());
rsx! {
div { class: "species-header",
div { class: "species-header-text",
h1 { em { "{s.name_scientific}" } }
if common_name != s.name_scientific {
p { class: "name-common", "{common_name}" }
}
}
if let Some(ref key) = img_key {
div { class: "species-image-wrap",
img { class: "species-image", src: "/img/{key}", alt: "{s.name_scientific}" }
if let Some(ref img) = primary_img {
div { class: "image-attribution",
if let Some(ref caption) = img.caption {
span { "{caption}" }
}
if let Some(ref lic) = img.license {
if img.caption.is_some() {
" | "
}
span { "{lic}" }
}
if let Some(ref url) = img.source_url {
if img.caption.is_some() || img.license.is_some() {
" | "
}
a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
}
}
}
}
}
h1 { em { "{s.name_scientific}" } }
if common_name != s.name_scientific {
p { class: "name-common", "{common_name}" }
}
div { class: "detail-row",
@@ -690,6 +662,35 @@ pub fn SpeciesDetail(slug: String) -> Element {
// === RIGHT COLUMN ===
div { class: "detail-col",
// Image card
if let Some(ref key) = img_key {
div { class: "detail-card",
div { class: "detail-card-header", "Image" }
div { class: "image-card-body",
img { class: "species-image", src: "/img/{key}", alt: "{s.name_scientific}" }
if let Some(ref img) = primary_img {
div { class: "image-attribution",
if let Some(ref caption) = img.caption {
span { "{caption}" }
}
if let Some(ref lic) = img.license {
if img.caption.is_some() {
" | "
}
span { "{lic}" }
}
if let Some(ref url) = img.source_url {
if img.caption.is_some() || img.license.is_some() {
" | "
}
a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
}
}
}
}
}
}
// Card 4: Growing Requirements
div { class: "detail-card",
div { class: "detail-card-header", "Growing Requirements" }