florian.berthold/herbapi
1
0
Fork 0
Code Pull Requests Actions Packages Releases Wiki Activity

Move species image into right column detail card with attribution

Browse Source
This commit is contained in:
Florian Berthold
2026-03-15 15:24:18 +01:00
parent 5155d930b7
commit a7f64e763f
2 changed files with 38 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
herbapi-ui/assets/herbapi.css
+6 -19
View File
@@ -1165,32 +1165,19 @@ td.placeholder {
color: #e65100; color: #e65100;
} }
/* Species header: title left, image right */ /* Species / cultivar images inside detail cards */
.species-header { .image-card-body {
display: flex; padding: 0.75rem;
align-items: flex-start; text-align: center;
gap: 2rem;
margin-bottom: 1rem;
}
.species-header-text {
flex: 1;
}
/* Species / cultivar images */
.species-image-wrap {
flex-shrink: 0;
} }
.species-image { .species-image {
max-width: 280px; max-width: 100%;
max-height: 260px; max-height: 300px;
width: auto; width: auto;
height: auto; height: auto;
border-radius: var(--radius); border-radius: var(--radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
object-fit: cover; object-fit: cover;
} }
herbapi-ui/src/pages/species.rs
+32 -31
View File
@@ -554,37 +554,9 @@ pub fn SpeciesDetail(slug: String) -> Element {
.or_else(|| s.primary_image_key.clone()); .or_else(|| s.primary_image_key.clone());
rsx! { rsx! {
div { class: "species-header", h1 { em { "{s.name_scientific}" } }
div { class: "species-header-text", if common_name != s.name_scientific {
h1 { em { "{s.name_scientific}" } } p { class: "name-common", "{common_name}" }
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" }
}
}
}
}
}
} }
div { class: "detail-row", div { class: "detail-row",
@@ -690,6 +662,35 @@ pub fn SpeciesDetail(slug: String) -> Element {
// === RIGHT COLUMN === // === RIGHT COLUMN ===
div { class: "detail-col", 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 // Card 4: Growing Requirements
div { class: "detail-card", div { class: "detail-card",
div { class: "detail-card-header", "Growing Requirements" } div { class: "detail-card-header", "Growing Requirements" }