From 2ac56e2e7ffdd99dc84d30840246747fa11d37ff Mon Sep 17 00:00:00 2001
From: traxys <quentin+dev@familleboyer.net>
Date: Thu, 29 Jun 2023 13:16:03 +0200
Subject: [PATCH] app: Properly display recipe ratings

---
 app/src/recipe.rs | 47 ++++++++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/app/src/recipe.rs b/app/src/recipe.rs
index 5d161e5..e7b5610 100644
--- a/app/src/recipe.rs
+++ b/app/src/recipe.rs
@@ -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">