mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
explore visual tweaks
This commit is contained in:
kaipher7
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,195 +1,234 @@
|
|||||||
<!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">
|
||||||
</nav>
|
</header>
|
||||||
|
|
||||||
<form id="search-form" th:action="@{/explore}" method="get">
|
<div class="body">
|
||||||
<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search recipes">
|
<!--Navigation Bar -->
|
||||||
<button type="submit">Search</button>
|
<div class="body-left">
|
||||||
|
<nav class="sidebar-left">
|
||||||
<h3>Prep Time</h3>
|
<ul>
|
||||||
<label>
|
<li><a href="/">Home</a></li>
|
||||||
<input type="checkbox" name="prepTime" value="15"> <15 min
|
<li><a th:href="@{/explore}">Explore</a></li>
|
||||||
</label><br>
|
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||||
<label>
|
<li>
|
||||||
<input type="checkbox" name="prepTime" value="30"> 15~30 min
|
<form th:action="@{/logout}" method="post">
|
||||||
</label><br>
|
<input type="image" th:src="@{images/logout_icon.png}" alt="Logout button" class="nav_icon"/>
|
||||||
<label>
|
</form>
|
||||||
<input type="checkbox" name="prepTime" value="60"> 30~60 min
|
</li>
|
||||||
</label><br>
|
</ul>
|
||||||
<label>
|
</nav>
|
||||||
<input type="checkbox" name="prepTime" value="240"> 1~4 hours
|
<a th:href="@{/create}" target="_blank" class="create_icon">
|
||||||
</label><br>
|
<img th:src="@{images/create_icon.png}" alt="Create New Recipe Icon (Red mixing bowl with a spoon and yellow addition symbol.">
|
||||||
<label>
|
</a>
|
||||||
<input type="checkbox" name="prepTime" value="241"> 4+ hours
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<h3>Cook Time</h3>
|
|
||||||
<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>
|
|
||||||
<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)}">
|
|
||||||
<p>No recipes found.</p>
|
|
||||||
</div>
|
</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>
|
<!-- Main Content -->
|
||||||
<strong>Author:</strong>
|
<main class="main-content">
|
||||||
<a th:href="@{/users/{id}(id=${recipe.userDto.id})}"
|
<div class="search-bar">
|
||||||
th:text="${recipe.userDto.displayName != null and !#strings.isEmpty(recipe.userDto.displayName) ? recipe.userDto.displayName : recipe.userDto.username}">
|
<form action="/explore" method="get" id="search-form">
|
||||||
Author Name
|
<label for="site-search">Search:</label>
|
||||||
</a>
|
<div class="search-btn">
|
||||||
</p>
|
<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">
|
||||||
|
|
||||||
<p th:text="${recipe.description}">Recipe 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>
|
||||||
|
</main>
|
||||||
|
|
||||||
<p>
|
<!--Filter -->
|
||||||
<strong>Prep:</strong> <span th:text="${recipe.prepTimeMinutes}">0</span> min |
|
<div class="body-right">
|
||||||
<strong>Cook:</strong> <span th:text="${recipe.cookTimeMinutes}">0</span> min |
|
<div class="sidebar-right">
|
||||||
<strong>Servings:</strong> <span th:text="${recipe.servings}">0</span> |
|
<h1> FILTER </h1>
|
||||||
<strong>Cost:</strong> <span th:text="${recipe.cost}">0</span>
|
<form id="filter-form">
|
||||||
</p>
|
<h3>Prep Time</h3>
|
||||||
|
|
||||||
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
<label>
|
||||||
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image" style="max-width: 200px;">
|
<input type="checkbox" name="prepTime" value="15"><15 min
|
||||||
</div>
|
</label><br>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" name="prepTime" value="30">15~30 min
|
||||||
|
</label><br>
|
||||||
|
|
||||||
<p><a th:href="@{/recipes/{id}(id=${recipe.id})}">View Recipe</a></p>
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
const input = document.getElementById('site-search');
|
||||||
|
const tags = [];
|
||||||
|
|
||||||
<script>
|
// Restore price checkboxes from URL
|
||||||
(function () {
|
const params = new URLSearchParams(window.location.search);
|
||||||
const input = document.getElementById('site-search');
|
params.getAll('prices').forEach(p => {
|
||||||
const tags = [];
|
const cb = document.querySelector(`input[name="price"][value="${p}"]`);
|
||||||
const params = new URLSearchParams(window.location.search);
|
if (cb) cb.checked = true;
|
||||||
|
});
|
||||||
|
|
||||||
params.getAll('prices').forEach(p => {
|
// Restore cookTime checkboxes from URL
|
||||||
const cb = document.querySelector(`input[name="price"][value="${p}"]`);
|
params.getAll('cookTime').forEach(p => {
|
||||||
if (cb) cb.checked = true;
|
const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
|
||||||
});
|
if (cb) cb.checked = true;
|
||||||
|
});
|
||||||
|
|
||||||
params.getAll('cookTime').forEach(p => {
|
// Restore prepTime checkboxes from URL
|
||||||
const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
|
params.getAll('prepTime').forEach(p => {
|
||||||
if (cb) cb.checked = true;
|
const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
|
||||||
});
|
if (cb) cb.checked = true;
|
||||||
|
});
|
||||||
|
|
||||||
params.getAll('prepTime').forEach(p => {
|
// Restore tag chips from URL
|
||||||
const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
|
params.getAll('tags').forEach(addChip);
|
||||||
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)/); // NASTY regex ):
|
||||||
|
if (match) {
|
||||||
|
e.preventDefault();
|
||||||
|
addChip(match[2].substring(1));
|
||||||
|
input.value = val.replace(match[0], '');
|
||||||
|
input.value += ' ';
|
||||||
|
|
||||||
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 => {
|
document.querySelectorAll('input[name="price"]').forEach(cb => {
|
||||||
cb.addEventListener('change', submitSearch);
|
cb.addEventListener('change', submitSearch);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
|
document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
|
||||||
cb.addEventListener('change', submitSearch);
|
cb.addEventListener('change', submitSearch);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
|
document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
|
||||||
cb.addEventListener('change', submitSearch);
|
cb.addEventListener('change', submitSearch);
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('search-form').addEventListener('submit', (e) => {
|
document.getElementById('search-form').addEventListener('submit', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
submitSearch();
|
|
||||||
});
|
|
||||||
|
|
||||||
function addChip(tag) {
|
submitSearch();
|
||||||
if (tags.includes(tag)) return;
|
});
|
||||||
tags.push(tag);
|
|
||||||
|
|
||||||
const chip = document.createElement('span');
|
function addChip(tag) {
|
||||||
chip.className = 'tag-chip';
|
if (tags.includes(tag)) return;
|
||||||
chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
|
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);
|
||||||
|
});
|
||||||
|
const lastChip = input.parentElement.querySelector('.tag-chip:last-of-type');
|
||||||
|
if (lastChip) {
|
||||||
|
lastChip.insertAdjacentElement('afterend', chip);
|
||||||
|
} else {
|
||||||
|
input.insertAdjacentElement('afterend', chip);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
chip.querySelector('button').addEventListener('click', () => {
|
function submitSearch() {
|
||||||
chip.remove();
|
// Only use chips for tags, not strings!
|
||||||
tags.splice(tags.indexOf(tag), 1);
|
const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
|
||||||
submitSearch();
|
|
||||||
});
|
|
||||||
|
|
||||||
input.insertAdjacentElement('afterend', chip);
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitSearch() {
|
const out = new URLSearchParams();
|
||||||
const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
|
if (cleanedQuery) out.set('q', cleanedQuery);
|
||||||
const out = new URLSearchParams();
|
tags.forEach(t => out.append('tags', t));
|
||||||
|
document.querySelectorAll('input[name="price"]:checked')
|
||||||
|
.forEach(cb => out.append('prices', cb.value));
|
||||||
|
|
||||||
if (cleanedQuery) out.set('q', cleanedQuery);
|
document.querySelectorAll('input[name="cookTime"]:checked')
|
||||||
tags.forEach(t => out.append('tags', t));
|
.forEach(cb => out.append('cookTime', cb.value));
|
||||||
|
|
||||||
document.querySelectorAll('input[name="price"]:checked')
|
document.querySelectorAll('input[name="prepTime"]:checked')
|
||||||
.forEach(cb => out.append('prices', cb.value));
|
.forEach(cb => out.append('prepTime', cb.value));
|
||||||
|
|
||||||
document.querySelectorAll('input[name="cookTime"]:checked')
|
window.location.href = '/explore?' + out.toString();
|
||||||
.forEach(cb => out.append('cookTime', cb.value));
|
}
|
||||||
|
})();
|
||||||
document.querySelectorAll('input[name="prepTime"]:checked')
|
</script>
|
||||||
.forEach(cb => out.append('prepTime', cb.value));
|
|
||||||
|
|
||||||
window.location.href = '/explore?' + out.toString();
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -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"/>
|
||||||
|
|||||||
Reference in New Issue
Block a user