page nutrition menu equilibré
This commit is contained in:
Jérémy Munsch
parent
6cbd357348
commit
0805ae080c
20 changed files with 759 additions and 109 deletions
|
|
@ -11,4 +11,14 @@ namespace App\Enums;
|
|||
*/
|
||||
final class BalancedMenuType extends BaseEnum
|
||||
{
|
||||
protected static function values(): array
|
||||
{
|
||||
return [
|
||||
'kid' => 1,
|
||||
'teenager' => 2,
|
||||
'woman' => 3,
|
||||
'man' => 4,
|
||||
'senior' => 5
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\BalancedMenus;
|
||||
use App\Models\ConsumptionTimes;
|
||||
use App\Models\ProductSliderPictures;
|
||||
use App\Models\MeatTypes;
|
||||
|
|
@ -9,6 +10,7 @@ use App\Models\Moments;
|
|||
use App\Models\Products;
|
||||
use App\Models\Ranges;
|
||||
use App\Models\Recipes;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
|
|
@ -116,4 +118,12 @@ class ProductsController extends Controller
|
|||
$product->customers()->dettach(Auth::guard('customer')->user()->id);
|
||||
return "OK";
|
||||
}
|
||||
|
||||
public function indexMenusAjax(Request $request)
|
||||
{
|
||||
if (!$request->ajax()) {
|
||||
abort(400);
|
||||
}
|
||||
return response()->json(BalancedMenus::productsAjax());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,17 @@
|
|||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Enums\BalancedMenuType;
|
||||
use App\Enums\RecipeType;
|
||||
use App\Http\Requests\RecipeIndexRequest;
|
||||
use App\Http\Requests\RecipeRateRequest;
|
||||
use App\Models\BalancedMenus;
|
||||
use App\Models\ConsumptionTimes;
|
||||
use App\Models\Products;
|
||||
use App\Models\Ranges;
|
||||
use App\Models\Recipes;
|
||||
use Illuminate\Database\Eloquent\ModelNotFoundException;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class RecipesController extends Controller
|
||||
{
|
||||
|
|
@ -147,4 +151,14 @@ class RecipesController extends Controller
|
|||
}
|
||||
return view('front.kitchenside', compact('featuredRecipes', 'videoRecipes'));
|
||||
}
|
||||
|
||||
public function showForBalancedMenu(BalancedMenuType $type, Products $product, Request $request)
|
||||
{
|
||||
if (!$request->ajax()) {
|
||||
abort(400);
|
||||
}
|
||||
// NE vérifie pas balancedmenu status car il faut afficher la recette du produit si il est publié
|
||||
return response()->json(BalancedMenus::where('product_id', $product->id)
|
||||
->where('type', $type)->firstOrFail());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,4 +20,9 @@ class BalancedMenus extends Model
|
|||
{
|
||||
return $this->belongsTo(Products::class);
|
||||
}
|
||||
|
||||
public static function productsAjax()
|
||||
{
|
||||
return Products::whereHas('balanced_menu')->get(['id', 'picture', 'name']);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ class Products extends Model
|
|||
//TODO: PSR1 is not in camel caps format
|
||||
public function balanced_menu()
|
||||
{
|
||||
return $this->hasOne(BalancedMenus::class);
|
||||
return $this->hasOne(BalancedMenus::class, 'product_id');
|
||||
}
|
||||
|
||||
public function recipes()
|
||||
|
|
|
|||
4
resources/js/main.js
vendored
4
resources/js/main.js
vendored
|
|
@ -5,6 +5,8 @@ window.rater = require('rater-js');
|
|||
window.ScrollReveal = require('scrollreveal');
|
||||
require('smoothscroll-polyfill').polyfill();
|
||||
require('fslightbox');
|
||||
import { tns } from "tiny-slider/src/tiny-slider.js";
|
||||
window.tns = tns;
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
/**
|
||||
|
|
@ -96,3 +98,5 @@ window.scrollToContent = function (idContent, headerOffset) {
|
|||
behavior: "smooth"
|
||||
});
|
||||
}
|
||||
|
||||
require('./pages/balanced-menu.js');
|
||||
|
|
|
|||
151
resources/js/pages/balanced-menu.js
vendored
Normal file
151
resources/js/pages/balanced-menu.js
vendored
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
if (document.querySelector('.content.menu')) {
|
||||
function hide(el) {
|
||||
el.style.height = "0px";
|
||||
};
|
||||
function slideUp(el) {
|
||||
el.style.transition = "all 2s ease-in-out";
|
||||
el.style.height = "0px";
|
||||
};
|
||||
function slideDown(el) {
|
||||
el.style.transition = "all 2s ease-in-out";
|
||||
el.style.height = 'inherit';
|
||||
};
|
||||
var menuData = {
|
||||
tnsDefault: {
|
||||
container: '',
|
||||
items: 3.6,
|
||||
controls: true,
|
||||
nav: false,
|
||||
mouseDrag: true,
|
||||
prevButton: null,
|
||||
nextButton: null,
|
||||
responsive: {
|
||||
350: {
|
||||
items: 3,
|
||||
edgePadding: 30
|
||||
},
|
||||
500: {
|
||||
items: 3.6,
|
||||
controls: true
|
||||
}
|
||||
}
|
||||
},
|
||||
addTns: function (selector) {
|
||||
menuData.tnsDefault.container = selector;
|
||||
tns(menuData.tnsDefault);
|
||||
},
|
||||
genre: null,
|
||||
productID: null,
|
||||
productItem: null,
|
||||
menuIsShown: false,
|
||||
getProducts: function (callback) {
|
||||
axios.get(window.product_from_menu)
|
||||
.then(function (response) {
|
||||
callback(response.data);
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
getMenu: function (callback) {
|
||||
axios.get(window.balanced_menu_url.replace('#genre#', menuData.genre).replace('#productID#', menuData.productID))
|
||||
.then(function (response) {
|
||||
callback(response.data);
|
||||
}).catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
setActivableItem: function (items, callback) {
|
||||
for (let item of document.querySelectorAll(items)) {
|
||||
item.onclick = function (e) {
|
||||
for (let item of document.querySelectorAll(items)) {
|
||||
item.classList.remove('active');
|
||||
}
|
||||
item.classList.add('active');
|
||||
callback(item);
|
||||
};
|
||||
}
|
||||
},
|
||||
setMenuInfo: function (item) {
|
||||
let menu = document.getElementById('menuSection'),
|
||||
svg = menu.querySelector('svg'),
|
||||
figure = menu.querySelector('figure'),
|
||||
img = figure.querySelector('img'),
|
||||
details = menu.querySelector('.details'),
|
||||
entree = menu.querySelector('.entree'),
|
||||
plat = menu.querySelector('.plat'),
|
||||
dessert = menu.querySelector('.dessert');
|
||||
|
||||
menu.classList.add('show'); // For loading svg
|
||||
img.setAttribute('src', '');
|
||||
svg.classList.remove('fadeOut');
|
||||
svg.classList.add('animated');
|
||||
svg.classList.add('fadeIn');
|
||||
figure.classList.remove('fadeInLeft');
|
||||
figure.classList.add('fadeOut');
|
||||
details.classList.remove('fadeInUp');
|
||||
details.classList.add('fadeOut');
|
||||
|
||||
menuData.productID = item.dataset.id;
|
||||
menuData.getMenu(function (balancedmenu) {
|
||||
img.setAttribute('src', balancedmenu.picture);
|
||||
entree.innerHTML = balancedmenu.entree;
|
||||
plat.innerHTML = balancedmenu.meal;
|
||||
dessert.innerHTML = balancedmenu.dessert;
|
||||
svg.classList.remove('fadeIn');
|
||||
svg.classList.add('fadeOut');
|
||||
figure.classList.remove('fadeOut')
|
||||
figure.classList.add('fadeInLeft');
|
||||
details.classList.remove('fadeOut')
|
||||
details.classList.add('fadeInUp');
|
||||
menuData.menuIsShown = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Hide products and menu
|
||||
document.getElementById('productSection')
|
||||
document.getElementById('menuSection')
|
||||
|
||||
// Set profiles carousel
|
||||
menuData.tnsDefault.prevButton = document.querySelector('#profiles .control.left');
|
||||
menuData.tnsDefault.nextButton = document.querySelector('#profiles .control.right');
|
||||
menuData.addTns('#profiles div');
|
||||
|
||||
// Click on genres
|
||||
menuData.setActivableItem('.genreBtn', function (item) {
|
||||
menuData.genre = item.dataset.genre;
|
||||
item.classList.add('active');
|
||||
document.getElementById('productSection').classList.add('show')
|
||||
if (menuData.menuIsShown) {
|
||||
menuData.setMenuInfo(menuData.productItem);
|
||||
}
|
||||
});
|
||||
|
||||
// Set Time out to let JS parse inline vars in push scripts page
|
||||
setTimeout(function () {
|
||||
// Get all products on page load
|
||||
// Set product carousel
|
||||
// Set product click events
|
||||
menuData.getProducts(function (data) {
|
||||
let template = document.querySelector('#templates .produitBtn');
|
||||
let container = document.querySelector('#products .produits');
|
||||
document.querySelector('#products svg').remove();
|
||||
for (let product of data) {
|
||||
let newProd = template.cloneNode(true);
|
||||
let img = newProd.querySelector('img');
|
||||
let p = newProd.querySelector('p');
|
||||
newProd.dataset.id = product.id;
|
||||
img.setAttribute('src', product.picture);
|
||||
p.textContent = product.name;
|
||||
container.appendChild(newProd);
|
||||
}
|
||||
menuData.tnsDefault.prevButton = document.querySelector('#products .control.left');
|
||||
menuData.tnsDefault.nextButton = document.querySelector('#products .control.right');
|
||||
menuData.addTns(container);
|
||||
menuData.setActivableItem('.produitBtn', function (item) {
|
||||
menuData.productItem = item;
|
||||
menuData.setMenuInfo(item);
|
||||
});
|
||||
});
|
||||
}, 600);
|
||||
}
|
||||
6
resources/sass/_variables.scss
vendored
6
resources/sass/_variables.scss
vendored
|
|
@ -16,6 +16,12 @@ $minTablet : only screen and (min-width: $tablet);
|
|||
$minMobile : only screen and (min-width: $mobile);
|
||||
$minxMobile : only screen and (min-width: $xmobile);
|
||||
|
||||
@mixin min-width($width) {
|
||||
@media screen and (max-width: $width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$max499 : only screen and (max-width: 499px);
|
||||
$max767 : only screen and (max-width: 767px);
|
||||
$max1023 : only screen and (max-width: 1023px);
|
||||
|
|
|
|||
362
resources/sass/front/pages/health-nutrition/_balanced-menu.scss
vendored
Normal file
362
resources/sass/front/pages/health-nutrition/_balanced-menu.scss
vendored
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
.content.menu {
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
|
||||
h5 {
|
||||
font-size: 3.2em;
|
||||
font-family: 'CreamyScriptRegular';
|
||||
color: #4e3238;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Veneer";
|
||||
padding-bottom: 47px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
&.title-desktop {
|
||||
display: none;
|
||||
}
|
||||
&.title-mobile {
|
||||
display: block;
|
||||
}
|
||||
@include min-width($desktop) {
|
||||
&.title-desktop {
|
||||
display: block;
|
||||
}
|
||||
&.title-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TNS Left and right control
|
||||
.control {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border-radius: 1em;
|
||||
background-color: $color6;
|
||||
display: block;
|
||||
font-size: 2.5em;
|
||||
cursor: pointer;
|
||||
&.left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -2.5em;
|
||||
}
|
||||
&.right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -2.5em;
|
||||
}
|
||||
& > svg {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Cursor on tns Items
|
||||
.tns-item {
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
img:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
// Overload icomoon to fit BalancedMenuType
|
||||
// teenager
|
||||
.icon-menu-1:before {
|
||||
content: "\e922";
|
||||
}
|
||||
// kid
|
||||
.icon-menu-2:before {
|
||||
content: "\e923";
|
||||
}
|
||||
// woman
|
||||
.icon-menu-3:before {
|
||||
content: "\e924";
|
||||
}
|
||||
// man
|
||||
.icon-menu-4:before {
|
||||
content: "\e925";
|
||||
}
|
||||
// senior
|
||||
.icon-menu-5:before {
|
||||
content: "\e926";
|
||||
}
|
||||
|
||||
// Min height for svg loader
|
||||
#productSection, #menuSection {
|
||||
position: relative;
|
||||
min-height: 15em;
|
||||
}
|
||||
|
||||
#profiles, #products, #menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#menuHeader {
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
h5 {
|
||||
width: 70%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#templates {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#genderSection {
|
||||
user-select: none;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 50px;
|
||||
header {
|
||||
font-family: "Veneer";
|
||||
font-size: 3em;
|
||||
color: $color5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div {
|
||||
opacity: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid $color5;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.profils {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.genreBtn {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 5px solid transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
margin-right: 8em;
|
||||
width: 25em;
|
||||
i {
|
||||
color: #ab9d8e;
|
||||
font-size: 11em;
|
||||
margin-bottom: 10px;
|
||||
transition: color 500ms ease;
|
||||
&.kid {
|
||||
font-size: 8em;
|
||||
height: 103px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-family: "Veneer";
|
||||
font-size: 3.5em;
|
||||
text-transform: uppercase;
|
||||
color: #ab9d8e;
|
||||
transition: color 500ms ease;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
p,
|
||||
i {
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
border-bottom: 5px solid #abccb7;
|
||||
background-color: #fff;
|
||||
p,
|
||||
i {
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $big_screen) {
|
||||
width: 190px;
|
||||
}
|
||||
@media screen and (max-width: $desktop) {
|
||||
width: 140px;
|
||||
height: 165px;
|
||||
i {
|
||||
font-size: 10em;
|
||||
&.kid {
|
||||
font-size: 7em;
|
||||
height: 94px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#productSection {
|
||||
user-select: none;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: none;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
header {
|
||||
font-family: "Veneer";
|
||||
font-size: 3em;
|
||||
color: $color5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
div {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid $color5;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.produits {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
.produitBtn {
|
||||
border-bottom: 5px solid transparent;
|
||||
figure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-family: "CreamyScriptRegular";
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
&.active {
|
||||
border-bottom: 5px solid #abccb7;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
#products > svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(50%) translateY(50%);
|
||||
}
|
||||
}
|
||||
#menuSection {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 50px;
|
||||
height: 500px;
|
||||
background-color: #abccb7;
|
||||
display: none;
|
||||
position: relative;
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
@media screen and (max-width: $tablet) {
|
||||
flex-direction: column;
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
left: 50%;
|
||||
top: -20px;
|
||||
padding: 5px 30px;
|
||||
background-color: #ffffff;
|
||||
transform: translateX(-50%) rotate(-5deg);
|
||||
@media screen and (max-width: $tablet) {
|
||||
top: 270px;
|
||||
}
|
||||
}
|
||||
figure {
|
||||
width: 50%;
|
||||
background-color: #666666;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
-ms-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
padding: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
opacity: 0;
|
||||
@media screen and (max-width: $tablet) {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: 70px 30px;
|
||||
}
|
||||
h5 {
|
||||
margin: 5px 0;
|
||||
color: #fff;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
div {
|
||||
color: #fff;
|
||||
font-size: 1.7em;
|
||||
text-align: left;
|
||||
p {
|
||||
font-size: 1.1em;
|
||||
color: #fff;
|
||||
}
|
||||
@media screen and (max-width: $tablet) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
& > svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(50%) translateY(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -63,61 +63,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nutrition-nav {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -100px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&>ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
z-index: 20;
|
||||
list-style: none;
|
||||
margin-left: 0.5%;
|
||||
|
||||
&>li {
|
||||
background-color: white;
|
||||
z-index: 21;
|
||||
width: 33%;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 1px solid #e5d5c7;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-family: 'Catamaran-Bold';
|
||||
color: #4e3238;
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 5px solid #abccb7;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .active {
|
||||
border-bottom: 5px solid #abccb7 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
57
resources/sass/front/pages/health-nutrition/nutrition-nav.scss
vendored
Normal file
57
resources/sass/front/pages/health-nutrition/nutrition-nav.scss
vendored
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.nutrition-nav {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -100px;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&>ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
z-index: 20;
|
||||
list-style: none;
|
||||
margin-left: 0.5%;
|
||||
|
||||
&>li {
|
||||
background-color: white;
|
||||
z-index: 21;
|
||||
width: 33%;
|
||||
height: 70px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 1px solid #e5d5c7;
|
||||
|
||||
&>a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
font-family: 'Catamaran-Bold';
|
||||
color: #4e3238;
|
||||
font-size: 1.4em;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 5px solid #abccb7;
|
||||
}
|
||||
|
||||
&:nth-last-child(1) {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .active {
|
||||
border-bottom: 5px solid #abccb7 !important;
|
||||
}
|
||||
}
|
||||
3
resources/sass/main.scss
vendored
3
resources/sass/main.scss
vendored
|
|
@ -1,6 +1,7 @@
|
|||
@import "~normalize.css/normalize.css";
|
||||
@import "~@fortawesome/fontawesome-free/css/all.min.css";
|
||||
@import "~animate.css/animate.css";
|
||||
@import "~tiny-slider/dist/tiny-slider.css";
|
||||
@import "variables";
|
||||
@import "front/reset";
|
||||
@import "front/fonts";
|
||||
|
|
@ -36,10 +37,12 @@
|
|||
@import "front/pages/ocb/content";
|
||||
@import "front/pages/ocb/testimonials";
|
||||
|
||||
@import "front/pages/health-nutrition/nutrition-nav";
|
||||
@import "front/pages/health-nutrition/health_nutrition";
|
||||
@import "front/pages/health-nutrition/nutrition";
|
||||
@import "front/pages/health-nutrition/pleasure_balance";
|
||||
@import "front/pages/health-nutrition/nutritional_values";
|
||||
@import "front/pages/health-nutrition/balanced-menu";
|
||||
|
||||
@import "front/pages/login";
|
||||
@import "front/pages/register";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,93 @@
|
|||
@extends('layouts.app')
|
||||
@section('title', 'La viande de volaille : plaisir et équilibre réunis')
|
||||
@section('description', "Découvez tous les bienfaits de la volaille pour allier plaisir et santé. Nos nutritionnistes vous conseillent et vous informent.")
|
||||
|
||||
@section('sub_header')
|
||||
<div class="sub_header entete-white">
|
||||
<div class="content">
|
||||
<p class="title-health-nutrition">
|
||||
Santé et Nutrition
|
||||
</p>
|
||||
<!-- TODO : GESTION IMG SI MOBILE -->
|
||||
<img src="{{ asset('assets/images/sante-nutrition/nutrition_bg.jpg') }}" alt="Santé et Nutrition - Le Gaulois" class="img-health-nutrition">
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="content menu">
|
||||
@include('front.health-nutrition.nav', ['balanced' => true])
|
||||
<div class="fragments">
|
||||
<header id="menuHeader">
|
||||
<h2>{{ __('L\'important c\'est de varier') }}</h2>
|
||||
<h5>{{ __('En panne d’idée pour créer un repas équilibré autour de votre produit Le Gaulois ? Nos nutritionnistes vous concoctent des menus équilibrés sur-mesure !') }}</h5>
|
||||
</header>
|
||||
<section id="genderSection">
|
||||
<header><div class="animated fadeInUp"><span>1</span></div> {{ __('vous êtes') }} :</header>
|
||||
<div id="profiles">
|
||||
<div class="profils">
|
||||
@foreach(BalancedMenuType::toArray() as $value => $label)
|
||||
<div class="genreBtn" data-genre="{{ $value }}">
|
||||
<i class="icon-menu-{{ strtolower($value) }}"></i>
|
||||
<p>{{ __(sprintf('enums.balanced_menu_type.withPrefix.%s', $label)) }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<i class="control left">
|
||||
@include('front.icons.chevron-left')
|
||||
</i>
|
||||
<i class="control right">
|
||||
@include('front.icons.chevron-right')
|
||||
</i>
|
||||
</div>
|
||||
</section>
|
||||
<section id="productSection">
|
||||
<header><div class=""><span>2</span></div> vous avez envie de manger :</header>
|
||||
<div id="products">
|
||||
<div class="produits"></div>
|
||||
@include('front.icons.loader')
|
||||
<i class="control left">
|
||||
@include('front.icons.chevron-left')
|
||||
</i>
|
||||
<i class="control right">
|
||||
@include('front.icons.chevron-right')
|
||||
</i>
|
||||
</div>
|
||||
</section>
|
||||
<section id="menuSection">
|
||||
<header>
|
||||
<h3>{{ __('Le Menu') }}</h3>
|
||||
</header>
|
||||
<figure class="animated fadeInLeft">
|
||||
<img src="" alt="" />
|
||||
</figure>
|
||||
<div class="details animated fadeInUp">
|
||||
<h5>{{ __('Entrée') }}</h5>
|
||||
<div class="entree"></div>
|
||||
<h5>{{ __('Plat') }}</h5>
|
||||
<div class="plat"></div>
|
||||
<h5>{{ __('Dessert') }}</h5>
|
||||
<div class="dessert"></div>
|
||||
</div>
|
||||
@include('front.icons.loader')
|
||||
</section>
|
||||
</div>
|
||||
<div id="templates">
|
||||
<div class="produitBtn" data-id="id">
|
||||
<figure><img src="" alt="name" /></figure>
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
window.balanced_menu_url = "{{
|
||||
route('kitchen-side.health-nutrition.balanced-menu.menu',[
|
||||
'type' => '#genre#', 'product' => '#productID#'
|
||||
])
|
||||
}}";
|
||||
window.product_from_menu = "{{ route('product.from-menus') }}";
|
||||
</script>
|
||||
@endpush
|
||||
8
resources/views/front/health-nutrition/nav.blade.php
Normal file
8
resources/views/front/health-nutrition/nav.blade.php
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<div class="nutrition-nav">
|
||||
<ul>
|
||||
<li @if(isset($nutrition))class="active"@endif><a href="{{ route('kitchen-side.health-nutrition.nutrition') }}">Le Gaulois s'engage<br>en nutrition</a></li>
|
||||
<li @if(isset($pleasure))class="active"@endif><a href="{{ route('kitchen-side.health-nutrition.pleasure-balance') }}">Le Gaulois :<br>plaisir et équilibre</a></li>
|
||||
<li @if(isset($nutritional))class="active"@endif><a href="{{ route('kitchen-side.health-nutrition.nutritional-values') }}">Déchiffrez les valeurs nutritionnelles</a></li>
|
||||
<li @if(isset($balanced))class="active"@endif><a href="{{ route('kitchen-side.health-nutrition.balanced-menu') }}">Le Gaulois :<br>mon menu équilibré</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -17,14 +17,7 @@
|
|||
@section('content')
|
||||
|
||||
<div class="nutrition">
|
||||
<div class="nutrition-nav">
|
||||
<ul>
|
||||
<li class="active"><a href="{{ route('kitchen-side.health-nutrition.nutrition') }}">Le Gaulois s'engage<br>en nutrition</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.pleasure-balance') }}">Le Gaulois :<br>plaisir et équilibre</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.nutritional-values') }}">Déchiffrez les valeurs nutritionnelles</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.balanced-menu') }}">Le Gaulois :<br>mon menu équilibré</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@include('front.health-nutrition.nav', ['nutrition' => true])
|
||||
<section class="content-nutrition">
|
||||
<h1>Le Gaulois vous aide à bien manger au quotidien</h1>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,7 @@
|
|||
|
||||
@section('content')
|
||||
<section class="nutrional-values-head">
|
||||
<div class="nutrition-nav">
|
||||
<ul>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.nutrition') }}">Le Gaulois s'engage<br>en nutrition</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.pleasure-balance') }}">Le Gaulois :<br>plaisir et équilibre</a></li>
|
||||
<li class="active"><a href="{{ route('kitchen-side.health-nutrition.nutritional-values') }}">Déchiffrez les valeurs nutritionnelles</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.balanced-menu') }}">Le Gaulois :<br>mon menu équilibré</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@include('front.health-nutrition.nav', ['nutritional' => true])
|
||||
<div class="content">
|
||||
<h1>Le Gaulois vous guide dans votre choix</h1>
|
||||
<div class="item">
|
||||
|
|
|
|||
|
|
@ -16,14 +16,7 @@
|
|||
|
||||
@section('content')
|
||||
<section class="pleasure-balance">
|
||||
<div class="nutrition-nav">
|
||||
<ul>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.nutrition') }}">Le Gaulois s'engage<br>en nutrition</a></li>
|
||||
<li class="active"><a href="{{ route('kitchen-side.health-nutrition.pleasure-balance') }}">Le Gaulois :<br>plaisir et équilibre</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.nutritional-values') }}">Déchiffrez les valeurs nutritionnelles</a></li>
|
||||
<li><a href="{{ route('kitchen-side.health-nutrition.balanced-menu') }}">Le Gaulois :<br>mon menu équilibré</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@include('front.health-nutrition.nav', ['pleasure' => true])
|
||||
<div class="content">
|
||||
<h1>La viande de Volaille, plaisir et équilibre réunis</h1>
|
||||
<h2>Par leur qualités nutritionnelles et leurs saveurs, les produits Le Gaulois vous<br>apportent plaisir & équilibre à chaque repas !</h2>
|
||||
|
|
|
|||
1
resources/views/front/icons/chevron-left.blade.php
Normal file
1
resources/views/front/icons/chevron-left.blade.php
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
|
||||
|
After Width: | Height: | Size: 483 B |
17
resources/views/front/icons/loader.blade.php
Normal file
17
resources/views/front/icons/loader.blade.php
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
|
||||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="red">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(1 1)" stroke-width="2">
|
||||
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
||||
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 18 18"
|
||||
to="360 18 18"
|
||||
dur="1s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 694 B |
|
|
@ -125,38 +125,26 @@ Route::prefix('/produits')
|
|||
|
||||
Route::prefix('/produit')
|
||||
->name('product.')
|
||||
->group(function() {
|
||||
->group(function () {
|
||||
Route::get('/from-menus', 'ProductsController@indexMenusAjax')->name('from-menus');
|
||||
Route::get('/{slug}', 'ProductsController@show')->name('show');
|
||||
Route::get('/ajouter-liste/{slug}', 'ProductsController@addToCart')->name('add-cart');
|
||||
Route::get('/retirer-liste/{slug}', 'ProductsController@removeFromCart')->name('remove-cart');
|
||||
});
|
||||
|
||||
Route::prefix('/cote-cuisine')
|
||||
->name('kitchen-side.')
|
||||
->group(function () {
|
||||
Route::get('/', 'RecipesController@kitchenside')->name('index');
|
||||
|
||||
Route::prefix('/sante-et-nutrition')
|
||||
->name('health-nutrition.')
|
||||
->group(function() {
|
||||
Route::get('/', function (){
|
||||
return view('front.health-nutrition.health-nutrition');
|
||||
})->name('health-nutrition');
|
||||
Route::get('/engagement-nutrition', function() {
|
||||
return view('front.health-nutrition.nutrition');
|
||||
})->name('nutrition');
|
||||
Route::get('/plaisir-et-equilibre', function() {
|
||||
return view('front.health-nutrition.pleasure-balance');
|
||||
})->name('pleasure-balance');
|
||||
Route::get('/dechiffrez-valeurs-nutritionnelles', function() {
|
||||
return view('front.health-nutrition.nutritional-values');
|
||||
})->name('nutritional-values');
|
||||
Route::get('/menu-equilibre', function() {
|
||||
die("Mon menu équilibré");
|
||||
})->name('balanced-menu');
|
||||
});
|
||||
|
||||
Route::prefix('/cote-cuisine')->name('kitchen-side.')->group(function () {
|
||||
Route::get('/', 'RecipesController@kitchenside')->name('index');
|
||||
Route::prefix('/sante-et-nutrition')->name('health-nutrition.')->group(function () {
|
||||
Route::view('/', 'front.health-nutrition.health-nutrition')->name('health-nutrition');
|
||||
Route::view('/engagement-nutrition', 'front.health-nutrition.nutrition')->name('nutrition');
|
||||
Route::view('/plaisir-et-equilibre', 'front.health-nutrition.pleasure-balance')->name('pleasure-balance');
|
||||
Route::view('/dechiffrez-valeurs-nutritionnelles', 'front.health-nutrition.nutritional-values')
|
||||
->name('nutritional-values');
|
||||
Route::view('/menu-equilibre', 'front.health-nutrition.balanced-menu')->name('balanced-menu');
|
||||
Route::get('/menu-equilibre/{type}/{product}/menu', 'RecipesController@showForBalancedMenu')
|
||||
->name('balanced-menu.menu');
|
||||
});
|
||||
});
|
||||
|
||||
Route::get('/recettes', 'RecipesController@index')->name('recipes.index');
|
||||
Route::get('/recettes/{recipe:slug}', 'RecipesController@show')->name('recipes.show');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue