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 16:54:20 -06:00
parent 3d4e64826f
commit 3afe31d425
4 changed files with 235 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/explore.css
+26 -1
View File
@@ -169,6 +169,9 @@ body, html {
font-size: 1.3em; font-size: 1.3em;
font-weight: 900; font-weight: 900;
letter-spacing: 1.3px; letter-spacing: 1.3px;
overflow: auto;
scrollbar-color: var(--dusty-red) var(--peach);
scrollbar-width: none; /* hid the scroll bar but you can scroll through filters */
} }
.sidebar-right ul { .sidebar-right ul {
@@ -185,6 +188,28 @@ body, html {
text-decoration: none; text-decoration: none;
} }
#filter-form h3 {
color: var(--dusty-red-hover);
font-size: 0.9em;
margin: 4px 0 8px;
}
#filter-form label {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.75em;
color: var(--dusty-red);
margin-bottom: 2px;
}
#filter-form input[type="checkbox"] {
accent-color: var(--dusty-red);
width: 16px;
height: 16px;
cursor: pointer;
}
/* ========================= /* =========================
Main Content Area Main Content Area
========================= */ ========================= */
@@ -233,7 +258,7 @@ input[type="search"] {
background: var(--dusty-red); background: var(--dusty-red);
} }
input[type="search"]::placeholder { input[type="text"]::placeholder {
color: var(--dark-yellow); color: var(--dark-yellow);
} }
src/main/resources/static/css/my-profile.css
View File
src/main/resources/templates/explore.html
+124 -85
View File
@@ -1,138 +1,174 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Explore Recipes</title> <title>Thyme Crunch Home</title>
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
</head> </head>
<body> <body>
<h1>Explore Recipes</h1>
<nav> <header class="top-header">
<a th:href="@{/}">Home</a> | <img th:src="@{images/header_left.png}" alt="Violin f-hole shape to the left of header." class="swirl">
<a th:href="@{/explore}">Explore</a> | <h1 class="site-name">Thyme Crunch</h1>
<a th:href="@{/my-profile}">Profile</a> <img th:src="@{images/header_right.png}" alt="Violin f-hole shape to the right of header." class="swirl">
</header>
<div class="body">
<!--Navigation Bar -->
<div class="body-left">
<nav class="sidebar-left">
<ul>
<li><a href="/">Home</a></li>
<li><a th:href="@{/explore}">Explore</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li>
<li>
<form th:action="@{/logout}" method="post">
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
</form>
</li>
</ul>
</nav> </nav>
<a th:href="@{/create}" target="_blank" class="create_icon">
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.">
</a>
</div>
<form id="search-form" th:action="@{/explore}" method="get">
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search recipes">
<button type="submit">Search</button>
<!-- Main Content -->
<main class="main-content">
<div class="search-bar">
<form action="/explore" method="get" id="search-form">
<label for="site-search">Search:</label>
<div class="search-btn">
<div id="tag-input-wrapper">
<!-- <div id="chips-container"></div> -->
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
</div>
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</form>
</div>
<div class="recipe-card">
<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>
</main>
<!--Filter -->
<div class="body-right">
<div class="sidebar-right">
<h1> FILTER </h1>
<form id="filter-form">
<h3>Prep Time</h3> <h3>Prep Time</h3>
<label>
<input type="checkbox" name="prepTime" value="15"> &lt;15 min
</label><br>
<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>
<label>
<input type="checkbox" name="prepTime" value="15"><15 min
</label><br>
<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> <h3>Cook Time</h3>
<label>
<input type="checkbox" name="cookTime" value="15"> &lt;15 min
</label><br>
<label>
<input type="checkbox" name="cookTime" value="30"> 15~30 min
</label><br>
<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>
<label>
<input type="checkbox" name="cookTime" value="15"><15 min
</label><br>
<label>
<input type="checkbox" name="cookTime" value="30">15~30 min
</label><br>
<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> <h3>Price</h3>
<label> <label>
<input type="checkbox" name="price" value="1"> $ <input type="checkbox" name="price" value="1"> $
</label><br> </label><br>
<label> <label>
<input type="checkbox" name="price" value="2"> $$ <input type="checkbox" name="price" value="2"> $$
</label><br> </label><br>
<label> <label>
<input type="checkbox" name="price" value="3"> $$$ <input type="checkbox" name="price" value="3"> $$$
</label><br> </label><br>
<label> <label>
<input type="checkbox" name="price" value="4"> $$$$ <input type="checkbox" name="price" value="4"> $$$$
</label> </label>
</form> </form>
<div th:if="${#lists.isEmpty(recipes)}">
<p>No recipes found.</p>
</div>
<div th:unless="${#lists.isEmpty(recipes)}">
<div th:each="recipe : ${recipes}" style="margin-bottom: 20px; border: 1px solid #ccc; padding: 10px;">
<h3>
<a th:href="@{/recipes/{id}(id=${recipe.id})}" th:text="${recipe.title}">Recipe Title</a>
</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></p>
</div> </div>
</div> </div>
</div>
<script> <script>
(function () { (function () {
const input = document.getElementById('site-search'); const input = document.getElementById('site-search');
const tags = []; const tags = [];
const params = new URLSearchParams(window.location.search);
// Restore price checkboxes from URL
const params = new URLSearchParams(window.location.search);
params.getAll('prices').forEach(p => { params.getAll('prices').forEach(p => {
const cb = document.querySelector(`input[name="price"][value="${p}"]`); const cb = document.querySelector(`input[name="price"][value="${p}"]`);
if (cb) cb.checked = true; if (cb) cb.checked = true;
}); });
// Restore cookTime checkboxes from URL
params.getAll('cookTime').forEach(p => { params.getAll('cookTime').forEach(p => {
const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`); const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
if (cb) cb.checked = true; if (cb) cb.checked = true;
}); });
// Restore prepTime checkboxes from URL
params.getAll('prepTime').forEach(p => { params.getAll('prepTime').forEach(p => {
const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`); const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
if (cb) cb.checked = true; if (cb) cb.checked = true;
}); });
// Restore tag chips from URL
params.getAll('tags').forEach(addChip); params.getAll('tags').forEach(addChip);
input.addEventListener('keydown', (e) => { input.addEventListener('keydown', (e) => {
if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) { if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
const val = input.value + ' '; const val = input.value + ' ';
const match = val.match(/(^|\s)(#\w+)(\s)/); const match = val.match(/(^|\s)(#\w+)(\s)/); // NASTY regex ):
if (match) { if (match) {
e.preventDefault(); e.preventDefault();
addChip(match[2].substring(1)); addChip(match[2].substring(1));
input.value = val.replace(match[0], ''); input.value = val.replace(match[0], '');
input.value += ' '; input.value += ' ';
} }
} }
}); });
@@ -151,33 +187,36 @@
document.getElementById('search-form').addEventListener('submit', (e) => { document.getElementById('search-form').addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
submitSearch(); submitSearch();
}); });
function addChip(tag) { function addChip(tag) {
if (tags.includes(tag)) return; if (tags.includes(tag)) return;
tags.push(tag); tags.push(tag);
const chip = document.createElement('span'); const chip = document.createElement('span');
chip.className = 'tag-chip'; chip.className = 'tag-chip';
chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`; chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
chip.querySelector('button').addEventListener('click', () => { chip.querySelector('button').addEventListener('click', () => {
chip.remove(); chip.remove();
tags.splice(tags.indexOf(tag), 1); tags.splice(tags.indexOf(tag), 1);
submitSearch();
}); });
const lastChip = input.parentElement.querySelector('.tag-chip:last-of-type');
if (lastChip) {
lastChip.insertAdjacentElement('afterend', chip);
} else {
input.insertAdjacentElement('afterend', chip); input.insertAdjacentElement('afterend', chip);
} }
}
function submitSearch() { function submitSearch() {
// Only use chips for tags, not strings!
const cleanedQuery = input.value.replace(/#\w+/g, '').trim(); const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
const out = new URLSearchParams();
const out = new URLSearchParams();
if (cleanedQuery) out.set('q', cleanedQuery); if (cleanedQuery) out.set('q', cleanedQuery);
tags.forEach(t => out.append('tags', t)); tags.forEach(t => out.append('tags', t));
document.querySelectorAll('input[name="price"]:checked') document.querySelectorAll('input[name="price"]:checked')
.forEach(cb => out.append('prices', cb.value)); .forEach(cb => out.append('prices', cb.value));
@@ -190,6 +229,6 @@
window.location.href = '/explore?' + out.toString(); window.location.href = '/explore?' + out.toString();
} }
})(); })();
</script> </script>
</body> </body>
</html> </html>
src/main/resources/templates/home.html
-1
View File
@@ -22,7 +22,6 @@
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a th:href="@{/explore}">Explore</a></li> <li><a th:href="@{/explore}">Explore</a></li>
<li><a th:href="@{/my-profile}">Profile</a></li> <li><a th:href="@{/my-profile}">Profile</a></li>
<li><a href="#">Saved</a></li>
<li> <li>
<form th:action="@{/logout}" method="post"> <form th:action="@{/logout}" method="post">
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/> <input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>