Pair image with copyright notice in http_cats example. (#895)

While on slow internet connection I noticed that copyright notice is
conflicting with the spinner:

![http_cat-screenshot](https://github.com/user-attachments/assets/e8f418d5-9a03-4497-a830-9a268e5c8455)

So I paired the image with the copyright notice to display it only when
image is loaded. I hope this is not complicating the example code.

---------

Co-authored-by: Daniel McNab <36049421+DJMcNab@users.noreply.github.com>
This commit is contained in:
platlas 2025-03-18 16:40:27 +01:00 committed by GitHub
parent 6d1d6b9217
commit e1907a242a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 16 additions and 14 deletions

View File

@ -182,17 +182,8 @@ impl Status {
),
ImageState::Pending => OneOf3::B(sized_box(spinner()).width(80.).height(80.)),
// TODO: Alt text?
ImageState::Available(image_data) => OneOf3::C(image(image_data)),
};
flex((
prose(format!("HTTP Status Code: {}", self.code)).alignment(TextAlignment::Middle),
prose(self.message)
.text_size(20.)
.alignment(TextAlignment::Middle),
FlexSpacer::Fixed(10.),
zstack((
image,
sized_box(
ImageState::Available(image_data) => {
let attribution = sized_box(
sized_box(
prose("Copyright ©️ https://http.cat")
.line_break_mode(LineBreaking::Clip)
@ -202,9 +193,20 @@ impl Status {
.rounded(4.)
.background(palette::css::BLACK.multiply_alpha(0.5)),
)
.padding((30., 42., 0., 0.))
.alignment(Alignment::TopTrailing),
)),
.padding((30., 42., 0., 0.));
OneOf3::C(zstack((
image(image_data),
attribution.alignment(Alignment::TopTrailing),
)))
}
};
flex((
prose(format!("HTTP Status Code: {}", self.code)).alignment(TextAlignment::Middle),
prose(self.message)
.text_size(20.)
.alignment(TextAlignment::Middle),
FlexSpacer::Fixed(10.),
image,
))
.main_axis_alignment(xilem::view::MainAxisAlignment::Start)
}