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

TIST-20: added recipes page, addded recipes page to header links, added display: grid to daily meals #9

Merged
steve_dekart merged 1 commits from TIST-20 into develop 2025-06-19 18:18:44 +02:00
Conversation 1 Commits 1 Files Changed 3 +564 -110
3 changed files with 564 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
apps/Recipes/Templates/catalog.php
View File

@ -1 +1,288 @@
Catalog page <?php
the_header(
'Recipes',
'Explore our delicious recipes and find your next favorite dish.',
'recipes-page',
[
['keywords', 'recipes, cooking, food, cuisine'],
]
);
?>
<div class="container">
<div class="catalog">
<div class="catalog-items">
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
<a class="catalog-recipe hover-anim">
<div class="catalog-recipe__image">
<img src="media/recipe1.png" alt="Recipe 1">
</div>
<div class="catalog-recipe__info">
<div class="catalog-recipe__title">
<h3>Pizza</h3>
</div>
<div class="catalog-recipe__meta meta">
<div class="catalog-recipe__category">
Lunch
</div>
<div class="catalog-recipe__ingredients">
Tomatoes, Pepperoni
</div>
</div>
</div>
</a>
</div>
<div class="filters-container">
<div class="filters">
<div class="filters-inner">
<form class="filters-form" action="" method="get">
<div class="categories-filter">
<h3 class="filters__title">
Categories</h3>
<div class="filters__search">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" class="search-input" placeholder="Search categories...">
</div>
<!-- All labels and ids are the same for template design purposes (all labels point to same checkbox) -->
<div class="filters-checkboxes">
<ul>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
</ul>
</div>
</div>
<div class="ingredients-filter">
<h3 class="filters__title">
Ingredients</h3>
<div class="filters__search">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" class="search-input" placeholder="Search Ingredients...">
</div>
<div class="filters-checkboxes">
<ul>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
<li>
<input id="category" type="checkbox" name="category" id="category">
<label for="category">Category</label>
</li>
</ul>
</div>
</div>
<button class="btn btn-primary hover-anim" type="submit">
Apply
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<?php the_footer(); ?>

383
assets/css/style.css
View File

@ -24,9 +24,11 @@
.hover-anim:hover { .hover-anim:hover {
opacity: 0.7; opacity: 0.7;
} }
.page{
.page {
min-height: 100vh; min-height: 100vh;
} }
.container { .container {
width: 100%; width: 100%;
max-width: 1170px; max-width: 1170px;
@ -101,7 +103,7 @@ body {
border: #000 solid 1px; */ border: #000 solid 1px; */
} }
.search-input{ .search-input {
height: 36px; height: 36px;
background-color: #C7E2C9; background-color: #C7E2C9;
border: 1px solid #A8C9AA; border: 1px solid #A8C9AA;
@ -112,10 +114,10 @@ body {
color: var(--input-text-color); color: var(--input-text-color);
padding-left: 2rem; padding-left: 2rem;
margin-right: 16px; margin-right: 16px;
} }
.login-link{ .login-link {
background-color: #C7E2C9; background-color: #C7E2C9;
height: 36px; height: 36px;
width: 36px; width: 36px;
@ -126,7 +128,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid #A8C9AA; border: 1px solid #A8C9AA;
} }
@ -137,12 +139,12 @@ body {
} }
.search-icon { .search-icon {
position: absolute; position: absolute;
left: 0.6rem; left: 0.6rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: rgba(0, 113, 91, 0.45); color: rgba(0, 113, 91, 0.45);
pointer-events: none; pointer-events: none;
} }
.quote { .quote {
@ -153,7 +155,7 @@ body {
margin-top: 46px; margin-top: 46px;
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
} }
.black-qoute-word { .black-qoute-word {
@ -405,10 +407,15 @@ body {
} }
.ingredients-list { .ingredients-list {
columns: 2; /* columns: 2;
-webkit-columns: 2; -webkit-columns: 2;
-moz-columns: 2; -moz-columns: 2; */
margin-left: 15px; margin-left: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 3px;
column-gap: 8px;
padding: 0;
} }
.ingredients-list li { .ingredients-list li {
@ -495,26 +502,28 @@ hr {
margin-bottom: 20px; margin-bottom: 20px;
} }
.terms-of-use{ .terms-of-use {
margin-top: 46px; margin-top: 46px;
} }
.terms-of-use p:first-of-type{
.terms-of-use p:first-of-type {
text-align: center; text-align: center;
} }
/* contact.php */ /* contact.php */
.contact{ .contact {
margin-top: 46px; margin-top: 46px;
} }
.contact p{ .contact p {
font-family: var(--common-font); font-family: var(--common-font);
font-size: 14px; font-size: 14px;
color: var(--common-text); color: var(--common-text);
margin-bottom: 20px; margin-bottom: 20px;
text-align: center; text-align: center;
} }
.contact a { .contact a {
text-decoration: none; text-decoration: none;
color: var(--panel-text); color: var(--panel-text);
@ -523,39 +532,43 @@ hr {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.address{
.address {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.faq{
.faq {
margin-top: 46px; margin-top: 46px;
} }
.faq-question{
.faq-question {
font-family: var(--title-font); font-family: var(--title-font);
font-size: 24px; font-size: 24px;
color: var(--title-color); color: var(--title-color);
margin-bottom: 10px; margin-bottom: 10px;
} }
.faq-answer{
.faq-answer {
font-family: var(--common-font); font-family: var(--common-font);
font-size: 14px; font-size: 14px;
color: var(--common-text); color: var(--common-text);
margin-bottom: 20px; margin-bottom: 20px;
} }
.faq-answer a{ .faq-answer a {
text-decoration: none; text-decoration: none;
color: var(--panel-text); color: var(--panel-text);
font-size: 16px; font-size: 16px;
} }
.login__inner{ .login__inner {
margin-top: 46px; margin-top: 46px;
} }
.input input{ .input input {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
height: 40px; height: 40px;
@ -568,22 +581,23 @@ hr {
color: var(--input-text-color); color: var(--input-text-color);
} }
.form label{ .form label {
font-size: 16px; font-size: 16px;
} }
.input{ .input {
margin-bottom: 20px; margin-bottom: 20px;
} }
.login-choice a{
.login-choice a {
text-decoration: none; text-decoration: none;
color: var(--panel-text); color: var(--panel-text);
font-size: 16px; font-size: 16px;
} }
.btn{ .btn {
font-size: 14px; font-size: 14px;
font-family: var(--common-font); font-family: var(--common-font);
color: #fff; color: #fff;
@ -602,38 +616,40 @@ hr {
max-width: 225px; max-width: 225px;
} }
.login-text__notice p{ .login-text__notice p {
font-size: 16px; font-size: 16px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.login__inner .title{ .login__inner .title {
text-align: start; text-align: start;
} }
.terms-checkbox{ .terms-checkbox {
margin-bottom: 10px; margin-bottom: 10px;
} }
.terms-link{ .terms-link {
text-decoration: none; text-decoration: none;
color: var(--panel-text); color: var(--panel-text);
} }
.recovery-info{ .recovery-info {
margin-bottom: 10px; margin-bottom: 10px;
} }
label span { label span {
color: #015847; /* Example: make the asterisk red */ color: #015847;
/* Example: make the asterisk red */
font-weight: bold; font-weight: bold;
} }
.reset-info{ .reset-info {
margin-bottom: 10px; margin-bottom: 10px;
} }
.account-block .title{ .account-block .title {
text-align: start; text-align: start;
} }
@ -644,104 +660,217 @@ label span {
color: var(--common-text); color: var(--common-text);
} }
.account-block{ .account-block {
font-size: 16px; font-size: 16px;
} }
.account-block td{ .account-block td {
padding: 10px; padding: 10px;
margin-top: 20px; margin-top: 20px;
} }
.account-title{ .account-title {
margin-top: 46px; margin-top: 46px;
} }
.change-user-btns{ .change-user-btns {
margin-bottom: 20px; margin-bottom: 20px;
} }
.a-back{ .a-back {
text-decoration: none; text-decoration: none;
color: var(--panel-text); color: var(--panel-text);
} }
.menu-toggle { .menu-toggle {
display: none; display: none;
font-size: 1.5rem; font-size: 1.5rem;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: var(--panel-text); color: var(--panel-text);
}
.catalog {
margin-top: 46px;
display: flex;
}
.catalog-recipe {
display: block;
width: 200px;
}
.catalog-recipe__image {
width: 200px;
height: 150px;
overflow: hidden;
border-radius: 10px;
margin-bottom: 5px;
}
.catalog-recipe__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.catalog-recipe__title {
font-family: var(--title-font);
color: var(--title-color);
font-size: 14px;
text-align: center;
margin-bottom: 5px;
}
.catalog-recipe__info {
text-align: center;
}
.catalog-items {
width: 800px;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 25px;
row-gap: 40px;
margin-right: 80px;
}
.filters-container {
position: relative;
}
.filters {
position: fixed;
height: 454px;
width: 230px;
padding: 15px;
background-color: var(--panel-background);
border-radius: 10px;
}
.filters__title {
font-family: var(--title-font);
color: var(--common-text);
font-size: 14px;
margin-bottom: 12px;
}
.filters__search {
position: relative;
width: 100%;
}
.filters__search .search-input {
margin-right: 0;
width: 200px;
}
.filters-checkboxes ul{
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 3px;
column-gap: 8px;
padding: 0;
max-height: 100px;
overflow-y: auto;
margin-top: 10px;
margin-bottom: 15px;
}
.filters-checkboxes ul li{
font-family: var(--common-font);
font-size: 14px;
padding: 5px;
}
.filters-form .btn{
width: 200px;
}
@media (max-width: 768px){
.catalog-items{
width: 100%;
grid-template-columns: repeat(2, 1fr);
margin-right: 0;
}
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.menu-toggle { .menu-toggle {
display: block; display: block;
} }
.nav { .nav {
display: none; display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: var(--panel-background); background-color: var(--panel-background);
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1000; z-index: 1000;
border-top: 1px solid #0DBB99; border-top: 1px solid #0DBB99;
} }
.nav-item a{
margin-right: 0;
}
.nav.nav-open {
display: flex;
}
.nav-list { .nav-item a {
flex-direction: column; margin-right: 0;
padding: 1rem; }
}
.nav-item { .nav.nav-open {
margin: 0.5rem 0; display: flex;
} }
.footer{ .nav-list {
height: auto; flex-direction: column;
} padding: 1rem;
.footer-links{ }
flex-direction: column;
}
.footer-links li { .nav-item {
margin-right: 0; margin: 0.5rem 0;
margin-bottom: 10px; }
}
.footer-inner{ .footer {
/* padding: 10px 0; */ height: auto;
padding: 20px 0; }
}
.footer-nav{ .footer-links {
margin-top: 0; 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;
}
.daily-meals-grid {
grid-template-columns: repeat(1, 300px);
grid-template-rows: repeat(6, 100px);
}
.daily-meals-grid{
grid-template-columns: repeat(1, 300px);
grid-template-rows: repeat(6, 100px);
}
} }
@media (max-width: 1024px){ @media (max-width: 1024px) {
.reviews-grid { .reviews-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
column-gap: 0; column-gap: 0;
} }
@ -750,4 +879,42 @@ label span {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
} }
@media (max-width: 1200px) {
.catalog{
flex-direction: column-reverse;
align-items: center;
margin-bottom: 46px;
}
.filters{
position: static;
margin-bottom: 46px;
}
.catalog-items{
margin-right: 0;
justify-items: center;
align-items: center;
padding: 5px;
}
.catalog-recipe{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
}
}
@media (max-width: 465px){
.catalog-recipe{
width: 150px;
}
}
@media (max-width: 400px){
.catalog-items{
width: 100%;
grid-template-columns: 1fr;
margin-right: 0;
}
}

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

@ -54,7 +54,7 @@
<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 class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
</li> </li>
<li class="nav-item"><a href="#" class="nav-link">RECIPES</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="#" 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>