Close #34 Create comments section on recipe_detail.html template

chris-townsend · Nov 18, 2022 · 0c85e5b · 0c85e5b
1 parent 74f35ea
commit 0c85e5b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/static/style.css b/static/style.css
@@ -50,4 +50,11 @@ body {
     border: none;
     background-color:bisque;
     color: #886363;
+    letter-spacing: 1px;
 }
+
+
+.comments {
+    border: 0.5px solid rgb(222, 136, 90);
+}
+
diff --git a/templates/recipe_detail.html b/templates/recipe_detail.html
@@ -39,7 +39,7 @@ <h1 class="page-title text-left">{{ recipe.title }}</h1>
                             <p>
                              <br>   
                                 <strong class="text-secondary"><i class="far fa-star pr-2"></i>
-                                     {{ recipe.like_recipe }}</strong>
+                                     {{ recipe.like_recipe |  safe }}</strong>
                             </p>
 
 
@@ -96,7 +96,33 @@ <h5 class="card-header custom-recipe-detail-header">
                             </div>
                         </div>
                     </div>
-
+
+                    <div class="container text-center">
+                        <div class="row">
+                            <div class="col">
+                                <div class="card mb-3">
+                                <h4 class="card-header custom-recipe-detail-header">Comments</h4>
+                                <div class="card-body">
+                                    <!-- a for loop to iterate through each comment in comments -->
+                                    {% for comment in comments %}
+                                    <div class="comments" style="padding: 10px;">
+                                        <p class="font-weight-normal">
+                                            {{ comment.created_date }}
+                                            <span class=" text-muted font-weight-bold">
+                                                {{ comment.name | safe }}
+                                            </span> commented:
+                                            <br>
+                                             {{ comment.body | safe }}   
+                                        </p>
+                                    </div>
+                                    <!-- for loop ends here -->
+                                    {% endfor %}
+                                </div>
+                                </div>
+                            </div>
+                        </div>
+
+
 
 
 {% endblock content %}