etc404/thymecrunch
1
0
Fork 0
mirror of https://gitlab.com/etc404/software-engineering-project.git synced 2026-05-10 20:52:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
kaipher7
2026-04-23 16:22:03 -06:00
parent 3533d3576e
commit f19a647ee5
10 changed files with 84 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/create-recipe.css
+14
View File
@@ -351,6 +351,7 @@ textarea {
justify-content: center;
align-items: center;
margin-top: 1rem;
gap: 60px;
}
.btn,
@@ -386,6 +387,19 @@ textarea {
transition: background-color 0.1s ease, transform 0.2s ease;
}
.btn-delete {
background: transparent;
color: var(--dusty-red);
border: none;
border-radius: 8px;
padding: 0 20px;
height: 50px;
font-family: 'Mali', cursive;
font-size: 30px;
font-weight: 500;
cursor: pointer;
}
/* small screens */
@media (max-width: 600px) {
src/main/resources/static/css/home.css
+4
View File
@@ -277,6 +277,10 @@ a {
color: var(--dark);
}
.recipe-card p {
color: var(--dusty-red);
}
/* =========================
Individual Card (Folder Style)
========================= */
src/main/resources/templates/create-recipe.html
+9 -7
View File
@@ -7,6 +7,7 @@
<title>Create Thyme Crunch Recipe</title>
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
@@ -76,13 +77,14 @@
<div class="field">
<label>Estimated Cost: <span class="required">*</span></label>
<div class="cost-selector" id="cost-selector">
<span class="dollar" data-value="1">$</span>
<span class="dollar" data-value="2">$</span>
<span class="dollar" data-value="3">$</span>
<span class="dollar" data-value="4">$</span>
</div>
<input type="hidden" id="cost" value="0">
<div class="cost-selector" id="cost-selector">
<span class="dollar" data-value="1">$</span>
<span class="dollar" data-value="2">$</span>
<span class="dollar" data-value="3">$</span>
<span class="dollar" data-value="4">$</span>
</div>
<input type="hidden" id="cost" value="0">
</div>
</div>
</div>
src/main/resources/templates/explore.html
+1 -1
View File
@@ -23,7 +23,7 @@
<nav class="sidebar-left">
<ul>
<li><a th:href="@{/explore}">Explore</a></li>
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
<li><a th:href="${guest} ? @{/login} : @{/}">Saved</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li>
<li th:if="${guest}">
src/main/resources/templates/home.html
+13 -5
View File
@@ -19,7 +19,7 @@
<nav class="sidebar-left">
<ul>
<li><a th:href="@{/explore}">Explore</a></li>
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
<li><a th:href="${guest} ? @{/login} : @{/}">Saved</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li>
<li th:if="${guest}">
@@ -71,10 +71,18 @@
<div class="body-right">
<div class="sidebar-right">
<h1>FAVES</h1>
<p style="text-align:center; padding:0 16px;">
Your saved recipes appear here.
</p>
<h1>NEW</h1>
<div class="new-recipes">
<a th:each="recipe : ${newestRecipes}"
th:href="@{/recipes/{id}(id=${recipe.id})}"
class="new-recipe-item">
<p th:text="${recipe.title}">Title</p>
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
</div>
</a>
</div>
</div>
</div>
</div>
src/main/resources/templates/my-profile.html
+1 -1
View File
@@ -23,7 +23,7 @@
<nav class="sidebar-left">
<ul>
<li><a th:href="@{/explore}">Explore</a></li>
<li><a href="/">Favorites</a></li>
<li><a href="/">Saved</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li>
<li>
<form th:action="@{/logout}" method="post">
src/main/resources/templates/public-profile.html
+1 -1
View File
@@ -22,7 +22,7 @@
<nav class="sidebar-left">
<ul>
<li><a th:href="@{/explore}">Explore</a></li>
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
<li><a th:href="${guest} ? @{/login} : @{/}">Saved</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li>
<li th:if="${guest}">
src/main/resources/templates/update-recipe.html
+40 -2
View File
@@ -7,6 +7,7 @@
<title>Update Thyme Crunch Recipe</title>
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head>
<body>
@@ -75,8 +76,15 @@
</div>
<div class="field">
<label for="cost">Estimated Cost: <span class="required">*</span></label>
<input type="text" id="cost" placeholder="0">
<div class="field">
<label>Estimated Cost: <span class="required">*</span></label>
<div class="cost-selector" id="cost-selector">
<span class="dollar" data-value="1">$</span>
<span class="dollar" data-value="2">$</span>
<span class="dollar" data-value="3">$</span>
<span class="dollar" data-value="4">$</span>
</div>
<input type="hidden" id="cost" value="0">
</div>
</div>
</div>
@@ -97,6 +105,7 @@
<div class="actions">
<button class="btn-create" id="publish-btn" type="button">UPDATE</button>
<button class="btn-delete" id="delete-btn" type="button"><i class="fa fa-trash"></i></button>
</div>
</div>
@@ -189,6 +198,35 @@ document.getElementById('remove-img-btn').addEventListener('click', function (e)
imageRemoved = true;
});
// ---- Cost display ----
const dollars = document.querySelectorAll('.dollar');
dollars.forEach(dollar => {
dollar.addEventListener('click', () => {
const val = parseInt(dollar.dataset.value);
document.getElementById('cost').value = val;
dollars.forEach(d => {
d.classList.toggle('active', parseInt(d.dataset.value) <= val);
});
clearError(document.getElementById('cost-selector'));
});
dollar.addEventListener('mouseover', () => {
const val = parseInt(dollar.dataset.value);
dollars.forEach(d => {
d.classList.toggle('active', parseInt(d.dataset.value) <= val);
});
});
dollar.addEventListener('mouseout', () => {
const selected = parseInt(document.getElementById('cost').value);
dollars.forEach(d => {
d.classList.toggle('active', parseInt(d.dataset.value) <= selected);
});
});
});
// ---- Tags ----
document.getElementById('tag-input').addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
src/main/resources/templates/view-recipe.html
+1 -1
View File
@@ -22,7 +22,7 @@
<nav class="sidebar-left">
<ul>
<li><a th:href="@{/explore}">Explore</a></li>
<li><a href="/">Favorites</a></li>
<li><a href="/">Saved</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li>
<li>
<form th:action="@{/logout}" method="post">
uploads/8ffcfc5f-0621-4b77-a4e7-82337df6c1c3.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB