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

explore visual tweaks

Browse Source
This commit is contained in:
kaipher7
2026-04-19 17:08:25 -06:00
parent 3afe31d425 7d59e99f7d
commit 12afcaa58a
4 changed files with 165 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/explore.css
+2 -16
View File
@@ -174,24 +174,10 @@ body, html {
scrollbar-width: none; /* hid the scroll bar but you can scroll through filters */ scrollbar-width: none; /* hid the scroll bar but you can scroll through filters */
} }
.sidebar-right ul {
list-style: none;
padding: 0;
}
.sidebar-right li {
margin-bottom: 5px;
}
.sidebar-right a {
color: var(--dusty-red);
text-decoration: none;
}
#filter-form h3 { #filter-form h3 {
color: var(--dusty-red-hover); color: var(--dusty-red-hover);
font-size: 0.9em; font-size: 0.9em;
margin: 4px 0 8px; margin: 8px 0 10px;
} }
#filter-form label { #filter-form label {
@@ -200,7 +186,7 @@ body, html {
gap: 4px; gap: 4px;
font-size: 0.75em; font-size: 0.75em;
color: var(--dusty-red); color: var(--dusty-red);
margin-bottom: 2px; margin-bottom: 4px;
} }
#filter-form input[type="checkbox"] { #filter-form input[type="checkbox"] {
src/main/resources/templates/explore.html
+15 -11
View File
@@ -2,11 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<meta name="_csrf" th:content="${_csrf.token}"/>
<title>Thyme Crunch Home</title> <title>Thyme Crunch Home</title>
<link rel="stylesheet" th:href="@{css/explore.css}"> <link rel="stylesheet" th:href="@{css/explore.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 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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head> </head>
<body> <body>
<header class="top-header"> <header class="top-header">
@@ -75,18 +78,18 @@
<label> <label>
<input type="checkbox" name="prepTime" value="15"><15 min <input type="checkbox" name="prepTime" value="15"><15 min
</label><br> </label>
<label> <label>
<input type="checkbox" name="prepTime" value="30">15~30 min <input type="checkbox" name="prepTime" value="30">15~30 min
</label><br> </label>
<label> <label>
<input type="checkbox" name="prepTime" value="60">30~60 min <input type="checkbox" name="prepTime" value="60">30~60 min
</label><br> </label>
<label> <label>
<input type="checkbox" name="prepTime" value="240">1~4 hours <input type="checkbox" name="prepTime" value="240">1~4 hours
</label><br> </label>
<label> <label>
<input type="checkbox" name="prepTime" value="241">4+ hours <input type="checkbox" name="prepTime" value="241">4+ hours
@@ -95,18 +98,18 @@
<label> <label>
<input type="checkbox" name="cookTime" value="15"><15 min <input type="checkbox" name="cookTime" value="15"><15 min
</label><br> </label>
<label> <label>
<input type="checkbox" name="cookTime" value="30">15~30 min <input type="checkbox" name="cookTime" value="30">15~30 min
</label><br> </label>
<label> <label>
<input type="checkbox" name="cookTime" value="60">30~60 min <input type="checkbox" name="cookTime" value="60">30~60 min
</label><br> </label>
<label> <label>
<input type="checkbox" name="cookTime" value="120">1~2 hours <input type="checkbox" name="cookTime" value="120">1~2 hours
</label><br> </label>
<label> <label>
<input type="checkbox" name="cookTime" value="121">2+ hours <input type="checkbox" name="cookTime" value="121">2+ hours
@@ -115,15 +118,15 @@
<label> <label>
<input type="checkbox" name="price" value="1"> $ <input type="checkbox" name="price" value="1"> $
</label><br> </label>
<label> <label>
<input type="checkbox" name="price" value="2"> $$ <input type="checkbox" name="price" value="2"> $$
</label><br> </label>
<label> <label>
<input type="checkbox" name="price" value="3"> $$$ <input type="checkbox" name="price" value="3"> $$$
</label><br> </label>
<label> <label>
<input type="checkbox" name="price" value="4"> $$$$ <input type="checkbox" name="price" value="4"> $$$$
@@ -230,5 +233,6 @@
} }
})(); })();
</script> </script>
</body> </body>
</html> </html>
src/main/resources/templates/my-profile.html
+74 -11
View File
@@ -2,42 +2,105 @@
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>My Profile</title> <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<meta name="_csrf" th:content="${_csrf.token}"/>
<title>My Profile - Thyme Crunch</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">
</head> </head>
<body> <body>
<header class="top-header">
<img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
<h1 class="site-name">Thyme Crunch</h1>
<img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
<div class="form-wrap">
<div class="form-split">
<h1>My Profile</h1> <h1>My Profile</h1>
<p><strong>Username:</strong> <span th:text="${profile.username}">username</span></p> <nav>
<a th:href="@{/}">Home</a> |
<a th:href="@{/explore}">Explore</a> |
<a th:href="@{/my-profile}">Profile</a>
</nav>
<br>
<p>
<strong>Username:</strong>
<span th:text="${profile.username}">username</span>
</p>
<p> <p>
<strong>Public Profile:</strong> <strong>Public Profile:</strong>
<a th:href="@{/users/{id}(id=${profile.id})}">View my public profile</a> <a th:href="@{/users/{id}(id=${profile.id})}">View my public profile</a>
</p> </p>
<h2>Edit Profile</h2> <h2>Edit Profile</h2>
<form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}"> <form th:action="@{/my-profile/update}" method="post" th:object="${updateProfileDto}">
<div> <div class="rows">
<label for="displayName">Screen Name</label><br> <label for="displayName">Screen Name</label>
<input type="text" id="displayName" th:field="*{displayName}" maxlength="100"> <input type="text" id="displayName" th:field="*{displayName}" maxlength="100">
</div> </div>
<br> <div class="rows">
<label for="bio">Bio</label>
<div> <textarea id="bio" th:field="*{bio}" rows="6" maxlength="1000"></textarea>
<label for="bio">Bio</label><br>
<textarea id="bio" th:field="*{bio}" rows="6" cols="50" maxlength="1000"></textarea>
</div> </div>
<br>
<button type="submit">Save Profile</button> <button type="submit">Save Profile</button>
</form> </form>
<br>
<h2>My Recipes</h2> <h2>My Recipes</h2>
<div th:if="${#lists.isEmpty(profile.recipes)}"> <div th:if="${#lists.isEmpty(profile.recipes)}">
<p>You have not created any recipes yet.</p> <p>You have not created any recipes yet.</p>
</div> </div>
<div th:unless="${#lists.isEmpty(profile.recipes)}">
<div th:each="recipe : ${profile.recipes}" class="recipe-block" style="margin-bottom: 20px;">
<h3 th:text="${recipe.title}">Recipe Title</h3>
<p>
<strong>Author:</strong>
<a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
Author Name
</a>
</p>
<p th:text="${recipe.description}">Recipe description</p>
<p>
<strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
<strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
<strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
<strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
</p>
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
</div>
<p>
<a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a>
|
<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}">Edit Recipe</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<div th:unless="${#lists.isEmpty(profile.recipes)}"> <div th:unless="${#lists.isEmpty(profile.recipes)}">
<div th:each="recipe : ${profile.recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;"> <div th:each="recipe : ${profile.recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
<h3 th:text="${recipe.title}">Recipe Title</h3> <h3 th:text="${recipe.title}">Recipe Title</h3>
src/main/resources/templates/public-profile.html
+40 -152
View File
@@ -2,10 +2,26 @@
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Explore Recipes</title> <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<meta name="_csrf" th:content="${_csrf.token}"/>
<title>Public Profile - Thyme Crunch</title>
<!--<link rel="stylesheet" th:href="@{css/public-profile.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">
</head> </head>
<body> <body>
<h1>Explore Recipes</h1>
<header class="top-header">
<img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
<h1 class="site-name">Thyme Crunch</h1>
<img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
<div class="form-wrap">
<div class="form-split">
<h1 th:text="${profile.displayName != null and !#strings.isEmpty(profile.displayName) ? profile.displayName : profile.username}">
Display Name
</h1>
<nav> <nav>
<a th:href="@{/}">Home</a> | <a th:href="@{/}">Home</a> |
@@ -13,65 +29,29 @@
<a th:href="@{/my-profile}">Profile</a> <a th:href="@{/my-profile}">Profile</a>
</nav> </nav>
<form id="search-form" th:action="@{/explore}" method="get"> <br>
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search recipes">
<button type="submit">Search</button>
<h3>Prep Time</h3> <p>
<label> <strong>Username:</strong>
<input type="checkbox" name="prepTime" value="15"> &lt;15 min <span th:text="${profile.username}">username</span>
</label><br> </p>
<label>
<input type="checkbox" name="prepTime" value="30"> 15~30 min
</label><br>
<label>
<input type="checkbox" name="prepTime" value="60"> 30~60 min
</label><br>
<label>
<input type="checkbox" name="prepTime" value="240"> 1~4 hours
</label><br>
<label>
<input type="checkbox" name="prepTime" value="241"> 4+ hours
</label>
<h3>Cook Time</h3> <h2>Bio</h2>
<label> <p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">
<input type="checkbox" name="cookTime" value="15"> &lt;15 min Bio text
</label><br> </p>
<label> <p th:unless="${profile.bio != null and !#strings.isEmpty(profile.bio)}">
<input type="checkbox" name="cookTime" value="30"> 15~30 min This user has not added a bio yet.
</label><br> </p>
<label>
<input type="checkbox" name="cookTime" value="60"> 30~60 min
</label><br>
<label>
<input type="checkbox" name="cookTime" value="120"> 1~2 hours
</label><br>
<label>
<input type="checkbox" name="cookTime" value="121"> 2+ hours
</label>
<h3>Price</h3> <h2>Recipes</h2>
<label>
<input type="checkbox" name="price" value="1"> $
</label><br>
<label>
<input type="checkbox" name="price" value="2"> $$
</label><br>
<label>
<input type="checkbox" name="price" value="3"> $$$
</label><br>
<label>
<input type="checkbox" name="price" value="4"> $$$$
</label>
</form>
<div th:if="${#lists.isEmpty(recipes)}"> <div th:if="${#lists.isEmpty(profile.recipes)}">
<p>No recipes found.</p> <p>This user has not created any recipes yet.</p>
</div> </div>
<div th:unless="${#lists.isEmpty(recipes)}"> <div th:unless="${#lists.isEmpty(profile.recipes)}">
<div th:each="recipe : ${recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;"> <div th:each="recipe : ${profile.recipes}" class="recipe-block" style="margin-bottom: 20px;">
<h3> <h3>
<a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a> <a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
</h3> </h3>
@@ -86,110 +66,18 @@
<p th:text="${recipe.description}">Recipe description</p> <p th:text="${recipe.description}">Recipe description</p>
<p>
<strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
<strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
<strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
<strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
</p>
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}"> <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;"> <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
</div> </div>
<p><a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a></p> <p>
<a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a>
</p>
</div> </div>
</div> </div>
<script> </div>
(function () { </div>
const input = document.getElementById('site-search');
const tags = [];
const params = new URLSearchParams(window.location.search);
params.getAll('prices').forEach(p => {
const cb = document.querySelector(`input[name="price"][value="${p}"]`);
if (cb) cb.checked = true;
});
params.getAll('cookTime').forEach(p => {
const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
if (cb) cb.checked = true;
});
params.getAll('prepTime').forEach(p => {
const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
if (cb) cb.checked = true;
});
params.getAll('tags').forEach(addChip);
input.addEventListener('keydown', (e) => {
if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
const val = input.value + ' ';
const match = val.match(/(^|\s)(#\w+)(\s)/);
if (match) {
e.preventDefault();
addChip(match[2].substring(1));
input.value = val.replace(match[0], '');
input.value += ' ';
}
}
});
document.querySelectorAll('input[name="price"]').forEach(cb => {
cb.addEventListener('change', submitSearch);
});
document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
cb.addEventListener('change', submitSearch);
});
document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
cb.addEventListener('change', submitSearch);
});
document.getElementById('search-form').addEventListener('submit', (e) => {
e.preventDefault();
submitSearch();
});
function addChip(tag) {
if (tags.includes(tag)) return;
tags.push(tag);
const chip = document.createElement('span');
chip.className = 'tag-chip';
chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
chip.querySelector('button').addEventListener('click', () => {
chip.remove();
tags.splice(tags.indexOf(tag), 1);
submitSearch();
});
input.insertAdjacentElement('afterend', chip);
}
function submitSearch() {
const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
const out = new URLSearchParams();
if (cleanedQuery) out.set('q', cleanedQuery);
tags.forEach(t => out.append('tags', t));
document.querySelectorAll('input[name="price"]:checked')
.forEach(cb => out.append('prices', cb.value));
document.querySelectorAll('input[name="cookTime"]:checked')
.forEach(cb => out.append('cookTime', cb.value));
document.querySelectorAll('input[name="prepTime"]:checked')
.forEach(cb => out.append('prepTime', cb.value));
window.location.href = '/explore?' + out.toString();
}
})();
</script>
</body> </body>
</html> </html>