app: Properly display recipe ratings

This commit is contained in:
traxys 2023-06-29 13:16:03 +02:00
parent d614029931
commit 2ac56e2e7f

View file

@ -28,9 +28,11 @@ struct RecipeRatingProps {
fn RecipeRating(props: &RecipeRatingProps) -> Html { fn RecipeRating(props: &RecipeRatingProps) -> Html {
let rating = (props.rating + 1).min(3); let rating = (props.rating + 1).min(3);
html! { html! {
<div aria-label={format!("Rating: {rating}")}> <span aria-label={format!("Rating: {rating}")} class="ms-1">
{ for (0..rating).map(|_| html!{<i aria-hidden="true" class="bi-star-fill" />}) } { for (0..rating).map(|_| html!{
</div> <i aria-hidden="true" class="bi-star-fill ms-1"/>
}) }
</span>
} }
} }
@ -722,7 +724,7 @@ fn EditRating(props: &EditRatingProps) -> Html {
}; };
html! {<> html! {<>
<ModalToggleButton modal_id="rcpEditRating" classes={classes!("btn", "btn-secondary")}> <ModalToggleButton modal_id="rcpEditRating" classes={classes!("btn", "btn-secondary", "ms-2")}>
{"Edit Rating"} {"Edit Rating"}
</ModalToggleButton> </ModalToggleButton>
<FormModal <FormModal
@ -794,27 +796,22 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
Ok(match &*recipe { Ok(match &*recipe {
Ok(r) => html! {<> Ok(r) => html! {<>
<h1>{&r.name}</h1> <h1>{&r.name} <RecipeRating rating={r.rating} /> </h1>
<EditName <div class="mt-2">
token={props.token.clone()} <EditName
id={props.id} token={props.token.clone()}
household={props.household} id={props.id}
name={r.name.clone()} household={props.household}
update={update.clone()} name={r.name.clone()}
/> update={update.clone()}
<div class="container row mt-2"> />
<div class="col-8"> <EditRating
<RecipeRating rating={r.rating} /> token={props.token.clone()}
</div> recipe={props.id}
<div class="col-4"> household={props.household}
<EditRating rating={r.rating + 1}
token={props.token.clone()} update={update.clone()}
recipe={props.id} />
household={props.household}
rating={r.rating + 1}
update={update.clone()}
/>
</div>
</div> </div>
if let Some(e) = &*error { if let Some(e) = &*error {
<div class={classes!("alert", "alert-danger")} role="alert"> <div class={classes!("alert", "alert-danger")} role="alert">