web_programming/fridge_bites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: web_programming:07c4c49cf0b36e039cd4bafb133b6b5ff77d8306
Branches Tags
web_programming:master
web_programming:develop
..
compare: web_programming:34df6394466681d75c08472ff5a2e4859f63bd4b
Branches Tags
web_programming:master
web_programming:develop

No commits in common. "07c4c49cf0b36e039cd4bafb133b6b5ff77d8306" and "34df6394466681d75c08472ff5a2e4859f63bd4b" have entirely different histories.
07c4c49cf0 ... 34df639446

3 changed files with 12 additions and 106 deletions
Show Stats Expand all files Collapse all files

32
assets/css/style.css
View File

@ -102,11 +102,14 @@ body {
background: #00660f;
}
/*placeholder for search and login section*/
.search-and-login {
display: flex;
align-items: center;
position: relative;
/* width: 277px;
height: 49px;
border: #000 solid 1px; */
}
.search-input {
@ -123,33 +126,6 @@ body {
}
.search-results {
position: absolute;
top: 110%;
left: 0;
background-color: var(--panel-background);
border: 1px solid #A8C9AA;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 220px;
z-index: 1000;
overflow: hidden;
}
.search-result-item {
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
color: var(--common-text);
font-family: var(--common-font);
}
.search-result-item a{
text-decoration: none;
color: var(--title-color);
}
.login-link {
background-color: #C7E2C9;
height: 36px;

63
assets/js/main.js
View File

@ -64,66 +64,3 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
});
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
let searchTimeout;
searchInput.addEventListener('input', function () {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(async () => {
let searchValue = this.value.trim();
if (searchValue.length < 3) {
searchResults.innerHTML = '';
searchResults.hidden = true;
return;
}
const formData = new FormData();
formData.append('action', 'search');
formData.append('query', searchValue);
const response = await fetch('/ajax', {
method: 'POST',
body: formData
});
const json = await response.json();
if (!response.ok) {
const message = json.error || 'Something went wrong.';
showToastify(message, 'error');
return;
}
const results = json.result;
searchResults.innerHTML = '';
if (results.length > 0) {
results.forEach(result => {
searchResults.innerHTML += `
<div class="search-result-item hover-anim">
<a href="${result.url}" class="search-result-link">
${result.field_title}
</a>
</div>
`;
});
searchResults.hidden = false;
} else {
searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
searchResults.hidden = false;
}
}, 300);
});
document.addEventListener('click', function (event) {
if (!searchResults.contains(event.target) && event.target !== searchInput) {
searchResults.hidden = true;
}
});

17
components/templates/layout/header.php
View File

@ -54,24 +54,17 @@
<ul class="nav-list">
<li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
</li>
<li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>"
class="nav-link">RECIPES</a></li>
<li class="nav-item"><a href="<?php the_permalink("recipes:favorites") ?>"
class="nav-link">FAVORITES</a></li>
<li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>"
class="nav-link">MEAL A DAY</a></li>
<li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>" class="nav-link">RECIPES</a></li>
<li class="nav-item"><a href="<?php the_permalink("recipes:favorites")?>" class="nav-link">FAVORITES</a></li>
<li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>" class="nav-link">MEAL A DAY</a></li>
<li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
</ul>
</nav>
<div class="search-and-login">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
<div class="search-results" id="search-results" hidden>
</div>
<a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>"
class="login-link hover-anim">
<input type="text" class="search-input" placeholder="Search recipes...">
<a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>" class="login-link hover-anim">
<i class="fa-regular fa-user"></i>
</a>
</div>