manage: show ingredients in recipe list

kassner · Oct 9, 2023 · e429779 · e429779
1 parent 87acac5
commit e429779
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/main/js/manage/main.scss b/src/main/js/manage/main.scss
@@ -46,6 +46,28 @@ h1 {
             @apply hover:bg-zinc-100 dark:hover:bg-gray-800;
         }
 
+        td.name {
+            p {
+                font-size: 1rem;
+                font-weight: bold;
+            }
+
+            ul {
+                margin-top: 5px;
+                display: flex;
+                flex-wrap: wrap;
+                gap: 3px;
+
+                font-size: 0.75rem;
+                line-height: 1rem;
+
+                li {
+                    @apply border-zinc-200 bg-zinc-50 border rounded-md p-1 text-zinc-500;
+                    display: inline-block;
+                }
+            }
+        }
+
         td.actions {
             @apply flex flex-col space-y-1 sm:flex-row sm:space-x-2 sm:space-y-0;
 

diff --git a/src/main/resources/templates/recipe/index.html b/src/main/resources/templates/recipe/index.html
@@ -20,7 +20,12 @@ <h1 class="flex-grow">Manage recipes</h1>
         <tbody>
             <tr th:each="recipe: ${recipes}">
                 <td th:text="${recipe.getId()}"></td>
-                <td th:text="${recipe.getName()}"></td>
+                <td class="name">
+                    <p th:text="${recipe.getName()}"></p>
+                    <ul>
+                        <li th:each="ingredient: ${recipe.getIngredients()}" th:text="${ingredient.getName()}"></li>
+                    </ul>
+                </td>
                 <td class="actions">
                     <a class="btn-edit" th:href="@{/manage/recipe/{id}/edit(id=${recipe.getId()})}">Edit</a>
                     <form th:action="@{/manage/recipe/{id}/delete(id=${recipe.getId()})}" method="POST" th:data-recipe-name="${recipe.getName()}">