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; 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 / cultivar images */
.species-image-wrap { .species-image-wrap {
margin: 1rem 0 0.5rem; flex-shrink: 0;
} }
.species-image { .species-image {
max-width: 360px; max-width: 280px;
max-height: 320px; max-height: 260px;
width: auto; width: auto;
height: auto; height: auto;
border-radius: var(--radius); 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()); .or_else(|| s.primary_image_key.clone());
rsx! { rsx! {
h1 { em { "{s.name_scientific}" } } div { class: "species-header",
if common_name != s.name_scientific { div { class: "species-header-text",
p { class: "name-common", "{common_name}" } 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 key) = img_key {
if let Some(ref img) = primary_img { div { class: "species-image-wrap",
div { class: "image-attribution", img { class: "species-image", src: "/img/{key}", alt: "{s.name_scientific}" }
if let Some(ref caption) = img.caption { if let Some(ref img) = primary_img {
span { "{caption}" } div { class: "image-attribution",
} if let Some(ref caption) = img.caption {
if let Some(ref lic) = img.license { span { "{caption}" }
if img.caption.is_some() {
" | "
} }
span { "{lic}" } if let Some(ref lic) = img.license {
} if img.caption.is_some() {
if let Some(ref url) = img.source_url { " | "
if img.caption.is_some() || img.license.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" }
} }
} }
} }