create icon and cards improved

This commit is contained in:
kaipher7
2026-04-20 11:38:46 -06:00
parent 5cf01983e6
commit 24d193504e
7 changed files with 442 additions and 26 deletions
+16 -14
View File
@@ -52,21 +52,23 @@
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<div class="recipe-card">
</div>
<p th:if="${#lists.isEmpty(recipes)}">There are no recipes that fit this description.</p>
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
<div class="card-text">
<h2 th:text="${recipe.title}"></h2>
<p th:text="${recipe.description}"></p>
</div>
<div class="card-right">
<div th:each="img : ${recipe.images}">
<img th:src="${img.imageUrl}" alt="Recipe Image"/>
</div>
</div>
</a>
</div>
<div class="recipe-card" th:unless="${#lists.isEmpty(recipes)}">
<a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
<div class="card-text">
<h2 th:text="${recipe.title}">Recipe Title</h2>
<p th:text="${recipe.description}">Description</p>
</div>
<div class="card-right">
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
</div>
<p th:text="${recipe.cost}">Cost</p>
</div>
</a>
</div>
</main>
<!--Filter -->