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

TIST 6: adaptive for header and footer #2

Merged
steve_dekart merged 1 commits from TIST-6 into develop 2025-06-14 20:16:24 +02:00
Conversation 0 Commits 1 Files Changed 3 +117 -26
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); 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) { @media (max-width: 900px) {
.reviews-grid { .reviews-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -628,4 +637,58 @@ label span {
width: 100%; width: 100%;
max-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} onSuccess
* @param {Function} onError * @param {Function} onError
*/ */
function sendAjax(action, function sendAjax(action,
args = [ ], args = [],
onLoad = () => { }, onLoad = () => { },
onSuccess = (data) => { }, onSuccess = (data) => { },
onError = (error) => { }) { onError = (error) => { }) {
onLoad(); onLoad();
fetch('/ajax', { fetch('/ajax', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -25,17 +25,17 @@ function sendAjax(action,
'args': args 'args': args
}) })
}) })
.then(response => response.json().then(data => ({ data, response }))) .then(response => response.json().then(data => ({ data, response })))
.then(({ data, response }) => { .then(({ data, response }) => {
if (!response.ok) { if (!response.ok) {
throw new Error(data.error || `HTTP error! Status: ${response.status}`); throw new Error(data.error || `HTTP error! Status: ${response.status}`);
} }
onSuccess(data); onSuccess(data);
}) })
.catch(error => { .catch(error => {
onError(error); onError(error);
}); });
} }
function showToastify(message, type = "info") { function showToastify(message, type = "info") {
Toastify({ Toastify({
@ -43,6 +43,24 @@ function showToastify(message, type = "info") {
gravity: "bottom", gravity: "bottom",
position: "left", position: "left",
className: type, className: type,
duration: 3000 }) duration: 3000
.showToast(); })
.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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -11,14 +12,16 @@
<!-- Meta tags --> <!-- Meta tags -->
<meta name="robots" content="nofollow, noindex"> <meta name="robots" content="nofollow, noindex">
<?php foreach($meta_tags as $tag): ?> <?php foreach ($meta_tags as $tag): ?>
<meta name="<?php echo $tag[0] ?>" content="<?php echo $tag[1] ?>"> <meta name="<?php echo $tag[0] ?>" content="<?php echo $tag[1] ?>">
<?php endforeach; ?> <?php endforeach; ?>
<!-- Google fonts --> <!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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/ --> <!-- Google fonts/ -->
<!-- Font Awesome --> <!-- 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/reset.css' ?>">
<link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/style.css' ?>"> <link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/style.css' ?>">
</head> </head>
<body class="<?php echo $body_class ?>"> <body class="<?php echo $body_class ?>">
<header class="header"> <header class="header">
<div class="container"> <div class="container">
<div class="header-inner"> <div class="header-inner">
<div class="logo"> <div class="logo">
<a href="<?php the_permalink("index:home")?>"> <a href="<?php the_permalink("index:home") ?>">
<img src="<?php echo ASSETS_PATH . '/images/fridgeLogo.png'?>" alt="fridgeBitesLogo" class="logo-img"> <img src="<?php echo ASSETS_PATH . '/images/fridgeLogo.png' ?>" alt="fridgeBitesLogo"
class="logo-img">
</a> </a>
</div> </div>
<nav class="nav"> <nav class="nav">
<ul class="nav-list"> <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">RECIPES</a></li>
<li class="nav-item"><a href="#" class="nav-link">FAVORITES</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">MEAL A DAY</a></li>
<li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li> <li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
</ul> </ul>
</nav> </nav>
<div class="search-and-login"> <div class="search-and-login">
placeholder placeholder
</div> </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>
</div> </div>
</header> </header>
<div class="page"> <div class="page">