Compare commits
No commits in common. "420d0bfc6c463e52ea1d5822313c131da06dad12" and "703a327f39fbdc3ff68685b8118d8412e57691a4" have entirely different histories.
420d0bfc6c
...
703a327f39
@ -2,9 +2,7 @@
|
|||||||
|
|
||||||
namespace Lycoreco\Apps\Recipes\Controllers;
|
namespace Lycoreco\Apps\Recipes\Controllers;
|
||||||
|
|
||||||
use Lycoreco\Apps\Recipes\Models\IngredientInRecipeModel;
|
|
||||||
use Lycoreco\Apps\Recipes\Models\RecipeModel;
|
use Lycoreco\Apps\Recipes\Models\RecipeModel;
|
||||||
use Lycoreco\Apps\Users\Models\UserModel;
|
|
||||||
use Lycoreco\Includes\BaseController;
|
use Lycoreco\Includes\BaseController;
|
||||||
use Lycoreco\Includes\Routing\HttpExceptions;
|
use Lycoreco\Includes\Routing\HttpExceptions;
|
||||||
|
|
||||||
@ -35,26 +33,8 @@ class SingleRecipeController extends BaseController
|
|||||||
public function get_context_data()
|
public function get_context_data()
|
||||||
{
|
{
|
||||||
$context = parent::get_context_data();
|
$context = parent::get_context_data();
|
||||||
$recipe = $this->get_model();
|
|
||||||
|
|
||||||
|
$context['recipe'] = $this->get_model();
|
||||||
$context['recipe'] = $recipe;
|
|
||||||
|
|
||||||
$context['author'] = UserModel::get(array(
|
|
||||||
[
|
|
||||||
'name' => 'obj.id',
|
|
||||||
'type' => '=',
|
|
||||||
'value' => $recipe->field_author_id
|
|
||||||
]
|
|
||||||
));
|
|
||||||
|
|
||||||
$context['ingredients'] = IngredientInRecipeModel::filter(array(
|
|
||||||
[
|
|
||||||
'name' => 'obj.recipe_id',
|
|
||||||
'type' => '=',
|
|
||||||
'value' => $recipe->get_id()
|
|
||||||
]
|
|
||||||
));
|
|
||||||
|
|
||||||
return $context;
|
return $context;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -47,9 +47,4 @@ class IngredientInRecipeModel extends BaseModel
|
|||||||
{
|
{
|
||||||
return $this->field_amount . ' ' . $this->ingredient_unit;
|
return $this->field_amount . ' ' . $this->ingredient_unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function __toString()
|
|
||||||
{
|
|
||||||
return $this->ingredient_name;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -76,20 +76,10 @@ class RecipeModel extends BaseModel
|
|||||||
{
|
{
|
||||||
return ucfirst($this->field_status);
|
return ucfirst($this->field_status);
|
||||||
}
|
}
|
||||||
public function get_image_url()
|
public function get_image_url() {
|
||||||
{
|
|
||||||
if($this->field_image_url)
|
if($this->field_image_url)
|
||||||
return MEDIA_URL . $this->field_image_url;
|
return MEDIA_URL . $this->field_image_url;
|
||||||
|
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
public function get_html_instruction(): string
|
|
||||||
{
|
|
||||||
return nl2br(trim($this->field_instruction));
|
|
||||||
}
|
|
||||||
|
|
||||||
public function get_time(){
|
|
||||||
return $this->field_estimated_time . " minutes";
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -31,7 +31,7 @@ the_header(
|
|||||||
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
||||||
<input type="text" class="search-input" placeholder="Search categories...">
|
<input type="text" class="search-input" placeholder="Search categories...">
|
||||||
</div>
|
</div>
|
||||||
|
<!-- All labels and ids are the same for template design purposes (all labels point to same checkbox) -->
|
||||||
<div class="filters-checkboxes">
|
<div class="filters-checkboxes">
|
||||||
<ul>
|
<ul>
|
||||||
<?php foreach ($context['categories'] as $cat):
|
<?php foreach ($context['categories'] as $cat):
|
||||||
|
|||||||
@ -1,133 +1,3 @@
|
|||||||
<?php
|
<pre>
|
||||||
require_once(INCLUDES_PATH . '/Const/recipes.php');
|
<?php var_dump($context['recipe']); ?>
|
||||||
the_header(
|
</pre>
|
||||||
$context['recipe']->field_title,
|
|
||||||
'This is a single recipe page where you can view the details of the recipe, including ingredients, instructions, and more.',
|
|
||||||
'recipe',
|
|
||||||
[
|
|
||||||
|
|
||||||
['keywords', 'terms, use, conditions']
|
|
||||||
]
|
|
||||||
);
|
|
||||||
?>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
<div class="single-recipe">
|
|
||||||
<div class="single-recipe-info">
|
|
||||||
<div class="single-recipe-info__image">
|
|
||||||
<img src="<?= $context['recipe']->get_image_url(); ?>"
|
|
||||||
alt="<?php echo $context['recipe']->field_title; ?>">
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-info__details">
|
|
||||||
<div class="single-recipe-title">
|
|
||||||
<h1 class="title"><?php echo $context['recipe']->field_title; ?></h1>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-data">
|
|
||||||
<div class="single-recipe-data__item">
|
|
||||||
<span class="data-name">Category: </span>
|
|
||||||
<span class="data"><?= $context['recipe']->category_name ?></span>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-data__item">
|
|
||||||
<span class="data-name">Author: </span>
|
|
||||||
<span class="data"><?= $context['author']->field_username ?></span>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-data__item">
|
|
||||||
<span class="data-name">Estimated Price: </span>
|
|
||||||
<span class="data"><?php echo $context['recipe']->get_price(); ?></span>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-data__item">
|
|
||||||
<span class="data-name">Time To Make: </span>
|
|
||||||
<span class="data"><?php echo $context['recipe']->get_time(); ?></span>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-data__item">
|
|
||||||
<span class="data-name">Ingredients: </span>
|
|
||||||
<span class="data"><?= join(", ", $context['ingredients']) ?></span>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-data__item">
|
|
||||||
<span class="data-name">Date Created: </span>
|
|
||||||
<span class="data"><?php echo $context['recipe']->field_created_at; ?></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="button-ctrl">
|
|
||||||
<select class="hidden" name="daily-meal-select" id="daily-meal-day">
|
|
||||||
<?php foreach (DAYS_OF_WEEK as $day): ?>
|
|
||||||
<option value="<?= $day ?>"><?= ucfirst($day) ?></option>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<option value="remove">Remove From List</option>
|
|
||||||
</select>
|
|
||||||
<div class="day-select-wrapper">
|
|
||||||
<div class="hover-anim">
|
|
||||||
<button type="button" href="#" id="day-select" class="btn btn-primary day-select">Add to
|
|
||||||
list</button>
|
|
||||||
<i class="fa-solid fa-list select-icon"></i>
|
|
||||||
</div>
|
|
||||||
<div id="custom-select-dropdown" class="custom-select-dropdown hidden">
|
|
||||||
<?php foreach (DAYS_OF_WEEK as $day): ?>
|
|
||||||
<div class="dropdown-item hover-anim" data-value="<?= $day?>">
|
|
||||||
<?= ucfirst($day) ?>
|
|
||||||
</div>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<div class="dropdown-item hover-anim" data-value="remove">Remove From List</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="small-btns">
|
|
||||||
<button class="btn btn-secondary btn-small hover-anim" title="Add To Favorites">
|
|
||||||
<i class="fa-regular fa-heart"></i>
|
|
||||||
</button>
|
|
||||||
<a class="btn btn-secondary btn-small hover-anim"
|
|
||||||
href="<?php the_permalink('recipes:export-pdf', [$context['recipe']->get_id()]); ?>"
|
|
||||||
target="_blank" title="Export As PDF">
|
|
||||||
<i class="fa-solid fa-download"></i>
|
|
||||||
</a>
|
|
||||||
<button class="btn btn-secondary btn-small hover-anim" id="qr-btn" title="Get QR Code">
|
|
||||||
<i class="fa-solid fa-qrcode"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div id="overlay" class="hidden"></div>
|
|
||||||
<div class="qr-popup hidden">
|
|
||||||
<div id="qrcode"></div>
|
|
||||||
<a id="downloadLink" class="btn btn-primary hover-anim" href="#" download="recipe-qr.png">
|
|
||||||
Download QR Code
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="single-recipe-content">
|
|
||||||
<div class="single-instructions">
|
|
||||||
<h2 class="title">Instructions</h2>
|
|
||||||
|
|
||||||
<?= $context['recipe']->get_html_instruction(); ?>
|
|
||||||
</div>
|
|
||||||
<div class="single-ingredients">
|
|
||||||
<h2 class="title">Ingredients</h2>
|
|
||||||
<table class="ingredients-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Count</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<?php
|
|
||||||
foreach ($context['ingredients'] as $ing) {
|
|
||||||
?>
|
|
||||||
<tr>
|
|
||||||
<td><?= $ing; ?></td>
|
|
||||||
<td><?= $ing->get_count(); ?></td>
|
|
||||||
</tr>
|
|
||||||
<?php } ?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php the_footer(array(
|
|
||||||
ASSETS_PATH . '/js/single.js',
|
|
||||||
)); ?>
|
|
||||||
@ -662,6 +662,7 @@ hr {
|
|||||||
|
|
||||||
label span {
|
label span {
|
||||||
color: #015847;
|
color: #015847;
|
||||||
|
/* Example: make the asterisk red */
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -675,7 +676,7 @@ label span {
|
|||||||
|
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
background-color: var(--button-secondary);
|
background-color: var(--button-secondary);
|
||||||
cursor: pointer;
|
height: 35px;
|
||||||
max-width: 225px;
|
max-width: 225px;
|
||||||
color: var(--common-text);
|
color: var(--common-text);
|
||||||
}
|
}
|
||||||
@ -800,6 +801,7 @@ label span {
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters-checkboxes ul li{
|
.filters-checkboxes ul li{
|
||||||
@ -811,215 +813,6 @@ label span {
|
|||||||
.filters-form .btn{
|
.filters-form .btn{
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.single-recipe {
|
|
||||||
margin-top: 46px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-title .title {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-info {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-info__image {
|
|
||||||
width: 350px;
|
|
||||||
height: 260px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin-right: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-info__image img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-data {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-data__item {
|
|
||||||
display: flex;
|
|
||||||
align-items: baseline;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-data__item .data-name {
|
|
||||||
color: var(--meta-color);
|
|
||||||
margin-right: 10px;
|
|
||||||
flex: 0 0 120px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-data__item .data {
|
|
||||||
max-width: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.day-select {
|
|
||||||
position: relative;
|
|
||||||
width: 230px;
|
|
||||||
border: 1px solid #00775F;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-select-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-ctrl {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-icon {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: #008C71;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px;
|
|
||||||
border-top-right-radius: 10px;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-small {
|
|
||||||
width: 35px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
border: 2px solid var(--input-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-ctrl {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.custom-select-dropdown {
|
|
||||||
position: absolute;
|
|
||||||
top: 110%;
|
|
||||||
left: 0;
|
|
||||||
z-index: 10;
|
|
||||||
background: white;
|
|
||||||
border: 1px solid var(--input-border);
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 100%;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.custom-select-dropdown .dropdown-item:last-child {
|
|
||||||
border-top: 1px solid var(--input-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-selected {
|
|
||||||
background-color: #00775F;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-popup {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: #fff;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
z-index: 9999;
|
|
||||||
}
|
|
||||||
|
|
||||||
#qrcode img {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 9998;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-small,
|
|
||||||
.btn-small i {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-content h2 {
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-content {
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-top: 30px;
|
|
||||||
gap: 40px;
|
|
||||||
/* flex-wrap: wrap; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-instructions{
|
|
||||||
width: 50%;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-ingredients{
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredients-table{
|
|
||||||
width: 400px;
|
|
||||||
border-radius: 10px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid #b3b3b3;
|
|
||||||
border-collapse: separate;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredients-table th{
|
|
||||||
background-color: #008B70;
|
|
||||||
color: #fff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
text-align: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredients-table td{
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-top: 2px solid #b3b3b3;
|
|
||||||
}
|
|
||||||
@media (max-width: 768px){
|
@media (max-width: 768px){
|
||||||
|
|
||||||
.catalog-items{
|
.catalog-items{
|
||||||
@ -1031,104 +824,7 @@ label span {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.single-recipe-content {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.single-instructions,
|
|
||||||
.single-ingredients {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredients-table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.single-recipe-info {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-info__image {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 350px;
|
|
||||||
height: auto;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-info__image img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-info__details {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-title .title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-data__item {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.single-recipe-data__item .data-name {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
flex: none;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-ctrl {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-btns{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.day-select-wrapper,
|
|
||||||
.btn-small,
|
|
||||||
.btn-small i {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-small{
|
|
||||||
width: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-select-dropdown {
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
max-width: 230px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-popup {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
|
|
||||||
|
|
||||||
@ -1208,26 +904,22 @@ label span {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
@media (max-width: 1200px) {
|
||||||
.catalog{
|
.catalog{
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters{
|
.filters{
|
||||||
position: static;
|
position: static;
|
||||||
margin-bottom: 46px;
|
margin-bottom: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.catalog-items{
|
.catalog-items{
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.catalog-recipe{
|
.catalog-recipe{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -1235,16 +927,15 @@ label span {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
#food-3d {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 465px){
|
@media (max-width: 465px){
|
||||||
.catalog-recipe{
|
.catalog-recipe{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
#food-3d {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 400px){
|
@media (max-width: 400px){
|
||||||
|
|||||||
@ -1,71 +0,0 @@
|
|||||||
const toggleBtn = document.getElementById('day-select');
|
|
||||||
const dropdown = document.getElementById('custom-select-dropdown');
|
|
||||||
|
|
||||||
toggleBtn.addEventListener('click', () => {
|
|
||||||
dropdown.classList.toggle('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) => {
|
|
||||||
if (!dropdown.contains(e.target) && !toggleBtn.contains(e.target)) {
|
|
||||||
dropdown.classList.add('hidden');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const options = document.querySelectorAll('.dropdown-item');
|
|
||||||
|
|
||||||
options.forEach(option => {
|
|
||||||
option.addEventListener('click', () => {
|
|
||||||
const selectedValue = option.getAttribute('data-value');
|
|
||||||
|
|
||||||
options.forEach(opt => opt.classList.remove('dropdown-selected'));
|
|
||||||
|
|
||||||
if (selectedValue === 'remove') {
|
|
||||||
toggleBtn.textContent = 'Add to list';
|
|
||||||
} else {
|
|
||||||
toggleBtn.textContent = option.textContent;
|
|
||||||
option.classList.add('dropdown-selected');
|
|
||||||
}
|
|
||||||
|
|
||||||
dropdown.classList.add('hidden');
|
|
||||||
|
|
||||||
alert(`You selected: ${selectedValue}`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const qrContainer = document.getElementById("qrcode");
|
|
||||||
const downloadLink = document.getElementById("downloadLink");
|
|
||||||
const qrBtn = document.getElementById("qr-btn");
|
|
||||||
const qrPopup = document.querySelector(".qr-popup");
|
|
||||||
const overlay = document.getElementById('overlay');
|
|
||||||
|
|
||||||
qrBtn.addEventListener("click", () => {
|
|
||||||
|
|
||||||
qrPopup.classList.toggle("hidden")
|
|
||||||
overlay.classList.toggle("hidden")
|
|
||||||
|
|
||||||
qrContainer.innerHTML = "";
|
|
||||||
|
|
||||||
|
|
||||||
new QRCode(qrContainer, {
|
|
||||||
text: window.location.href,
|
|
||||||
width: 200,
|
|
||||||
height: 200
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
const qrImg = qrContainer.querySelector("img");
|
|
||||||
if (qrImg) {
|
|
||||||
downloadLink.href = qrImg.src;
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('click', (e) =>{
|
|
||||||
if(!qrPopup.contains(e.target) && !qrBtn.contains(e.target)){
|
|
||||||
qrPopup.classList.add("hidden");
|
|
||||||
overlay.classList.add("hidden");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
1
assets/qrcode/qrcode.min.js
vendored
1
assets/qrcode/qrcode.min.js
vendored
File diff suppressed because one or more lines are too long
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<script src="<?php echo ASSETS_PATH . '/js/main.js' ?>"></script>
|
<script src="<?php echo ASSETS_PATH . '/js/main.js' ?>"></script>
|
||||||
<script src="<?php echo ASSETS_PATH . '/toastify/toastify-js.js' ?>"></script>
|
<script src="<?php echo ASSETS_PATH . '/toastify/toastify-js.js' ?>"></script>
|
||||||
<script src="<?php echo ASSETS_PATH . '/qrcode/qrcode.min.js' ?>"></script>
|
|
||||||
<?php foreach($scripts as $script): ?>
|
<?php foreach($scripts as $script): ?>
|
||||||
<script src="<?php echo $script ?>"></script>
|
<script src="<?php echo $script ?>"></script>
|
||||||
<?php endforeach; ?>
|
<?php endforeach; ?>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user