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

Move species image to right of header (flex layout)

Browse Source
This commit is contained in:
Florian Berthold
2026-03-15 15:21:35 +01:00
parent 1cba5a9eaf
commit 5155d930b7
2 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
herbapi-ui/assets/herbapi.css
+16 -3
View File
@@ -1165,15 +1165,28 @@ td.placeholder {
color: #e65100;
}
/* Species header: title left, image right */
.species-header {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 1rem;
}
.species-header-text {
flex: 1;
}
/* Species / cultivar images */
.species-image-wrap {
margin: 1rem 0 0.5rem;
flex-shrink: 0;
}
.species-image {
max-width: 360px;
max-height: 320px;
max-width: 280px;
max-height: 260px;
width: auto;
height: auto;
border-radius: var(--radius);
herbapi-ui/src/pages/species.rs
+25 -22
View File
@@ -554,30 +554,33 @@ pub fn SpeciesDetail(slug: String) -> Element {
.or_else(|| s.primary_image_key.clone());
rsx! {
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() {
" | "
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}" }
}
span { "{lic}" }
}
if let Some(ref url) = img.source_url {
if img.caption.is_some() || img.license.is_some() {
" | "
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" }
}
a { href: "{url}", target: "_blank", class: "attribution-link", "Source" }
}
}
}