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

Compare commits

base: web_programming:32c0529a4e13e8c411518677caee533c3c480a0c
Branches Tags
web_programming:master
web_programming:develop
..
compare: web_programming:5b1d4e60da82fc1f8cd2d14302572e17dc2523c1
Branches Tags
web_programming:master
web_programming:develop

2 Commits
32c0529a4e ... 5b1d4e60da

Author SHA1 Message Date
steve_dekart
5b1d4e60da Merge pull request 'TIST-20: added recipes page, addded recipes page to header links, added display: grid to daily meals' (#9) from TIST-20 into develop 
Reviewed-on: #9
Reviewed-by: steve_dekart <stevedekart2020@gmail.com>
 2025-06-19 18:18:43 +02:00
David Katrinka
3ad1eada3d TIST-20: added recipes page, addded recipes page to header links, added display: grid to daily meals 2025-06-18 19:36:35 +02:00
3 changed files with 564 additions and 110 deletions
Show Stats 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(); ?>

173
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;
@ -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 {
@ -498,6 +505,7 @@ hr {
.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;
@ -515,6 +523,7 @@ hr {
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,21 +532,25 @@ 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;
@ -576,6 +589,7 @@ hr {
.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);
@ -624,8 +638,10 @@ hr {
.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;
} }
@ -675,6 +691,116 @@ label span {
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) {
@ -699,6 +825,7 @@ label span {
.nav-item a { .nav-item a {
margin-right: 0; margin-right: 0;
} }
.nav.nav-open { .nav.nav-open {
display: flex; display: flex;
} }
@ -715,6 +842,7 @@ label span {
.footer { .footer {
height: auto; height: auto;
} }
.footer-links { .footer-links {
flex-direction: column; flex-direction: column;
} }
@ -728,6 +856,7 @@ label span {
/* padding: 10px 0; */ /* padding: 10px 0; */
padding: 20px 0; padding: 20px 0;
} }
.footer-nav { .footer-nav {
margin-top: 0; margin-top: 0;
} }
@ -751,3 +880,41 @@ label span {
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>