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,7 +796,8 @@ 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>
<div class="mt-2">
<EditName <EditName
token={props.token.clone()} token={props.token.clone()}
id={props.id} id={props.id}
@ -802,11 +805,6 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
name={r.name.clone()} name={r.name.clone()}
update={update.clone()} update={update.clone()}
/> />
<div class="container row mt-2">
<div class="col-8">
<RecipeRating rating={r.rating} />
</div>
<div class="col-4">
<EditRating <EditRating
token={props.token.clone()} token={props.token.clone()}
recipe={props.id} recipe={props.id}
@ -815,7 +813,6 @@ fn RecipeViewerInner(props: &RecipeViewerInnerProps) -> HtmlResult {
update={update.clone()} 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">
{e} {e}