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

Merge pull request 'TIST 6: adaptive for header and footer' (#2) from TIST-6 into develop

Browse Source 
Reviewed-on: #2
This commit is contained in:
steve_dekart 2025-06-14 20:16:24 +02:00
commit ed9cbb1d36
3 changed files with 117 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
assets/css/style.css
View File

@ -618,6 +618,15 @@ label span {
color: var(--panel-text);
}
.menu-toggle {
display: none;
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: var(--panel-text);
}
@media (max-width: 900px) {
.reviews-grid {
grid-template-columns: 1fr;
@ -628,4 +637,58 @@ label span {
width: 100%;
max-width: 100%;
}
.menu-toggle {
display: block;
}
.nav {
display: none;
flex-direction: column;
align-items: center;
text-align: center;
background-color: var(--panel-background);
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
border-top: 1px solid #0DBB99;
}
.nav-item a{
margin-right: 0;
}
.nav.nav-open {
display: flex;
}
.nav-list {
flex-direction: column;
padding: 1rem;
}
.nav-item {
margin: 0.5rem 0;
}
.footer{
height: auto;
}
.footer-links{
flex-direction: column;
}
.footer-links li {
margin-right: 0;
margin-bottom: 10px;
}
.footer-inner{
/* padding: 10px 0; */
padding: 20px 0;
}
.footer-nav{
margin-top: 0;
}
}

56
assets/js/main.js
View File

@ -7,14 +7,14 @@
* @param {Function} onSuccess
* @param {Function} onError
*/
function sendAjax(action,
args = [ ],
onLoad = () => { },
onSuccess = (data) => { },
function sendAjax(action,
args = [],
onLoad = () => { },
onSuccess = (data) => { },
onError = (error) => { }) {
onLoad();
fetch('/ajax', {
method: 'POST',
headers: {
@ -25,17 +25,17 @@ function sendAjax(action,
'args': args
})
})
.then(response => response.json().then(data => ({ data, response })))
.then(({ data, response }) => {
if (!response.ok) {
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
}
onSuccess(data);
})
.catch(error => {
onError(error);
});
.then(response => response.json().then(data => ({ data, response })))
.then(({ data, response }) => {
if (!response.ok) {
throw new Error(data.error || `HTTP error! Status: ${response.status}`);
}
onSuccess(data);
})
.catch(error => {
onError(error);
});
}
function showToastify(message, type = "info") {
Toastify({
@ -43,6 +43,24 @@ function showToastify(message, type = "info") {
gravity: "bottom",
position: "left",
className: type,
duration: 3000 })
.showToast();
duration: 3000
})
.showToast();
}
document.addEventListener('DOMContentLoaded', function () {
const toggle = document.getElementById('menu-toggle');
const nav = document.querySelector('.nav');
const icon = document.getElementById('menu-icon');
toggle.addEventListener('click', function () {
nav.classList.toggle('nav-open');
if (nav.classList.contains('nav-open')) {
icon.classList.remove('fa-bars');
icon.classList.add('fa-xmark');
} else {
icon.classList.remove('fa-xmark');
icon.classList.add('fa-bars');
}
});
});

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

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -11,14 +12,16 @@
<!-- Meta tags -->
<meta name="robots" content="nofollow, noindex">
<?php foreach($meta_tags as $tag): ?>
<meta name="<?php echo $tag[0] ?>" content="<?php echo $tag[1] ?>">
<?php foreach ($meta_tags as $tag): ?>
<meta name="<?php echo $tag[0] ?>" content="<?php echo $tag[1] ?>">
<?php endforeach; ?>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap"
rel="stylesheet">
<!-- Google fonts/ -->
<!-- Font Awesome -->
@ -36,28 +39,35 @@
<link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/reset.css' ?>">
<link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/style.css' ?>">
</head>
<body class="<?php echo $body_class ?>">
<header class="header">
<div class="container">
<div class="header-inner">
<div class="logo">
<a href="<?php the_permalink("index:home")?>">
<img src="<?php echo ASSETS_PATH . '/images/fridgeLogo.png'?>" alt="fridgeBitesLogo" class="logo-img">
<a href="<?php the_permalink("index:home") ?>">
<img src="<?php echo ASSETS_PATH . '/images/fridgeLogo.png' ?>" alt="fridgeBitesLogo"
class="logo-img">
</a>
</div>
<nav class="nav">
<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("index:home") ?>" class="nav-link">HOME</a>
</li>
<li class="nav-item"><a href="#" class="nav-link">RECIPES</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAVORITES</a></li>
<li class="nav-item"><a href="#" 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">
placeholder
</div>
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation">
<i id="menu-icon" class="fa-solid fa-bars"></i>
</button>
</div>
</div>
</header>
<div class="page">
<div class="page">