traxys/regalade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

app: Properly display recipe ratings

Browse source
This commit is contained in:
traxys 2023-06-29 13:16:03 +02:00
parent d614029931
commit 2ac56e2e7f
1 changed files with 22 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

47
app/src/recipe.rs
View file

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