diff --git a/app/Enums/RecipeType.php b/app/Enums/RecipeType.php index 1d885d5a..a48ded85 100644 --- a/app/Enums/RecipeType.php +++ b/app/Enums/RecipeType.php @@ -3,24 +3,24 @@ namespace App\Enums; /** - * @method static self video() * @method static self classic() + * @method static self video() */ final class RecipeType extends BaseEnum { protected static function values(): array { return [ - 'video' => 0, - 'classic' => 1 + 'classic' => 0, + 'video' => 1 ]; } protected static function labels(): array { return [ - 'video' => __('Video'), 'classic' => __('Classic'), + 'video' => __('Video') ]; } } diff --git a/app/Facades/RecipeType.php b/app/Facades/RecipeType.php new file mode 100644 index 00000000..e27c520c --- /dev/null +++ b/app/Facades/RecipeType.php @@ -0,0 +1,14 @@ +get('type'); + $value = $request->get('value'); + $search = $request->get('search'); + $video_recipe = $request->get('video_recipe'); + + // @phpcs:disable PSR2.ControlStructures.ControlStructureSpacing.SpacingAfterOpenBrace + if ( + !session()->has('recipes.rand') || + (intval(session()->get('recipes.time', time())) - intval(time())) > (60 * 60 * 60) // 1 hour + ) { + session()->put('recipes.time', time()); + session()->put('recipes.rand', Recipes::all('id')->shuffle()->map(function ($obj) { + return $obj->id; + })->toArray()); + session()->save(); + } + + $recipes = Recipes::select('title', 'slug', 'picture', 'catch_phrase') + ->where('status', true) + ->orderByRaw(\sprintf('FIELD(id, %s)', implode(", ", session()->get('recipes.rand')))); + + if ($search) { + $recipes = $recipes->where('title', 'like', '%' . implode('%', explode(' ', trim($search))) . '%'); + } + if ($video_recipe) { + $recipes = $recipes->where('type', '=', RecipeType::video()->value); + } + + $ranges = Ranges::select('name', 'slug') + ->where('status', true) + ->orderBy('order') + ->get(); + + $consumptionTimes = ConsumptionTimes::select('name', 'slug') + ->where('status', true) + ->get(); + + try { + switch ($type) { + case 'range': + $recipes = $recipes->whereHas('products.range', function ($q) use ($value) { + $q->where('ranges.slug', $value); + }); + break; + case 'consumption': + $recipes = $recipes->whereHas('consumptionTimes', function ($q) use ($value) { + $q->where('consumption_times.slug', $value); + }); + break; + case 'preparation': + switch ($value) { + case 'less15': + $recipes = $recipes->where('preparation_time', '<=', 15); + break; + case '15and30': + $recipes = $recipes + ->where('preparation_time', '>=', 15) + ->where('preparation_time', '<=', 30); + break; + default: + case 'more30': + $recipes = $recipes + ->where('preparation_time', '>', 30); + break; + } + break; + case 'cooking': + switch ($value) { + case 'less15': + $recipes = $recipes->where('cooking_time', '<=', 15); + break; + case '15and30': + $recipes = $recipes + ->where('cooking_time', '>=', 15) + ->where('cooking_time', '<=', 30); + break; + default: + case 'more30': + $recipes = $recipes + ->where('cooking_time', '>', 30); + break; + } + break; + } + } catch (ModelNotFoundException $e) { + } + + + $recipes = $recipes->paginate(); + + return view('front.recipes.index', compact( + 'recipes', + 'ranges', + 'consumptionTimes', + 'type', + 'value' + )); + } +} diff --git a/app/Models/Products.php b/app/Models/Products.php index 50a65455..0ebaf745 100644 --- a/app/Models/Products.php +++ b/app/Models/Products.php @@ -72,7 +72,7 @@ class Products extends Model public function recipes() { - return $this->belongsToMany(Recipes::class); + return $this->belongsToMany(Recipes::class, 'recipes_products', 'recipe_id', 'product_id'); } //TODO: PSR1 is not in camel caps format diff --git a/app/Models/Ranges.php b/app/Models/Ranges.php index b75069a2..6f64623e 100644 --- a/app/Models/Ranges.php +++ b/app/Models/Ranges.php @@ -17,7 +17,7 @@ class Ranges extends Model public function products() { - return $this->hasMany(Products::class); + return $this->hasMany(Products::class, 'range_id'); } public function reductions() diff --git a/app/Models/Recipes.php b/app/Models/Recipes.php index 404ff37c..44e1f7fb 100644 --- a/app/Models/Recipes.php +++ b/app/Models/Recipes.php @@ -27,7 +27,7 @@ class Recipes extends Model public function products() { - return $this->hasMany(Products::class); + return $this->belongsToMany(Products::class, 'recipes_products', 'product_id', 'recipe_id'); } public function product1() @@ -44,4 +44,9 @@ class Recipes extends Model { return $this->belongsToMany(Customers::class); } + + public function consumptionTimes() + { + return $this->belongsTo(ConsumptionTimes::class); + } } diff --git a/config/app.php b/config/app.php index c4991e06..cb298338 100644 --- a/config/app.php +++ b/config/app.php @@ -236,6 +236,7 @@ return [ 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, + 'RecipeType' => \App\Facades\RecipeType::class ], ]; diff --git a/resources/images/recette/recette_background.jpg b/resources/images/recette/recette_background.jpg new file mode 100644 index 00000000..076121bc Binary files /dev/null and b/resources/images/recette/recette_background.jpg differ diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index fc7a2f45..e5b98a54 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -1,6 +1,27 @@ // Body $body-bg: #f8fafc; +// Breaking Points +$large_screen : 1366px; +$big_screen : 1200px; +$desktop : 1024px; +$tablet : 768px; +$mobile : 500px; +$xmobile : 320px; + +$minLscreen : only screen and (min-width: $large_screen); +$minBscreen : only screen and (min-width: $big_screen); +$minDesktop : only screen and (min-width: $desktop); +$minTablet : only screen and (min-width: $tablet); +$minMobile : only screen and (min-width: $mobile); +$minxMobile : only screen and (min-width: $xmobile); + +$max499 : only screen and (max-width: 499px); +$max767 : only screen and (max-width: 767px); +$max1023 : only screen and (max-width: 1023px); +$max1199 : only screen and (max-width: 1199px); +$max1365 : only screen and (max-width: 1365px); + // Typography $font-family-sans-serif: 'Nunito', sans-serif; $font-size-base: 0.9rem; @@ -23,3 +44,16 @@ $theme-colors: ( "primary": #3176C4, "secondary": #E7374B ); + +$color10: #999595; +$color11: #ab9d8e; +$color9: #c6bcb3; +$color1: #f3ebe4; +$color2: #07386a; +$color3: #0f437e; +$color4: #1e5ba1; +$color5: #4e3238; +$color6: #f79e15; +$color8: #ffb504; +$color7: #e02125; +$orange: #ffb400; diff --git a/resources/sass/front/_pagination.scss b/resources/sass/front/_pagination.scss new file mode 100644 index 00000000..88e22386 --- /dev/null +++ b/resources/sass/front/_pagination.scss @@ -0,0 +1,26 @@ +.pagination { + display: block; + text-align: center; + margin: 2em 0; + + li { + display: inline-block; + + &.active span { + color: $color6; + text-decoration: underline; + } + + a,span { + display: block; + font-size: 1.5em; + padding: 0.5em; + margin: 0.5em; + background-color: $color3; + color: $color1; + font-weight: bold; + border-radius: 1px; + border-color: $color8; + } + } +} diff --git a/resources/sass/front/_sub_header.scss b/resources/sass/front/_sub_header.scss index c77cc0cc..48b8391e 100644 --- a/resources/sass/front/_sub_header.scss +++ b/resources/sass/front/_sub_header.scss @@ -378,6 +378,215 @@ } } +.sub_header_recipes { + background-image: url(../images/recette/recette_background.jpg); + width: 100%; + height: 38em; + margin-top: 6em; + overflow: hidden; + background-size: cover; + background-position: center center; + + & .title { + position: absolute; + left: 50%; + top: 0; + transform: translateX(-50%); + margin: 20em 0 0; + width: 100%; + z-index: 1; + + & h1 { + color: white; + text-align: center; + font-size: 7em; + font-family: 'Veneer'; + } + } + + .search-field { + position: absolute; + left: 50%; + top: 0; + transform: translateX(-50%); + margin: 31em 0 0; + width: 70em; + z-index: 1; + + .search{ + width:80%; + svg { + position: absolute; + left: 0.4em; + top: 0.6em; + font-size: 2.6em; + color: #999595; + } + } + + input { + border: none; + float: left; + } + input[type="text"] { + color: #999595; + width: 18em; + height: 2em; + font-family: "CreamyScriptRegular"; + font-size: 2.8em; + border-radius: 0.1em; + padding: 0 0.1em 0 2em; + } + input[type="submit"] { + background: $color5; + color: #fff; + cursor: pointer; + font-size: 1.5em; + font-family: 'Catamaran-Black'; + margin-left: 1.4em; + width: 11em; + height: 3.6em; + border-radius: 0.2em; + text-transform: uppercase; + } + + .checkbox-wrap { + float: right; + margin: 1em 21em 0 0; + display: flex; + align-items: center; + position: relative; + + & > label { + font-family: "CreamyScriptRegular"; + font-size: 3em; + color: #fff; + cursor: pointer; + &.label_video { + display: inline-block; + } + } + + input[type="checkbox"]:not(:checked), + input[type="checkbox"]:checked { + /* Cache la checkbox sans + la rendre invisible aux + lecteurs d'écran */ + position: absolute; + left: 0; + opacity: 0.01; + } + + + input[type="checkbox"] + label { + position: relative; /* permet de positionner la checkbox */ + padding-left: 2.3em; /* place pour la box */ + font-size: 1.05em; + line-height: 1.7; + cursor: pointer; + display: block; + font-family: "CreamyScriptRegular"; + color: #fff; + top: -1em; + right: -1em; + + + &:before { + content: ''; + display: inline-block; + position: absolute; + left: 0; + top: 0; + height: 2em; + width: 2em; + background-color: #fff; + border-color: #e5dace; + border-radius: 0.2em; + border-style: solid; + border-width: 0.2em; + } + + &:after { + position: absolute; + border-left: 0; + border-top: 0; + -webkit-box-sizing: border-box; + box-sizing: border-box; + color: #e5dace; + content: "\e902"; + font-family: 'icomoon'; + font-size: 0.8em; + left: 0.5em; + top: 0.5em; + display:none; + } + } + input[type="checkbox"]:checked + label { + &:before { + border: #4e3238; + background: #4e3238; + } + &:after { + display:block; + } + } + } + } + + .wrap-btn-right { + position: absolute; + right: 10%; + top: 235px; + display:block; + + .btn_cplm { + background-color: rgba(255,255,255,0.5); + color: $color5; + display: block; + width: 7em; + height: 2.2em; + font-family: "CreamyScriptRegular"; + font-size: 3em; + line-height: 0.8em; + margin-bottom: 0.5em; + border-radius: 0.2em; + padding: 0.2em 0 0 2.2em; + position: relative; + span { + font-family: 'Veneer'; + font-size: 1em; + display: block; + } + &.propose_recipe { + &:before { + content: "\e932"; + color: $color5; + font-family: 'icomoon' !important; + font-size: 1.3em; + position: absolute; + left: 0.35em; + top: 50%; + margin-top: -0.4em; + } + } + &.favorite_recipe { + &:before { + content: "\e909"; + color: $color5; + font-family: 'icomoon' !important; + font-size: 1em; + position: absolute; + left: 0.5em; + top: 50%; + margin-top: -0.4em; + } + } + } + } +} + + +} .sub_header_ocb { width: 100%; height: 370px; diff --git a/resources/sass/front/pages/_recipes.scss b/resources/sass/front/pages/_recipes.scss new file mode 100644 index 00000000..3456f720 --- /dev/null +++ b/resources/sass/front/pages/_recipes.scss @@ -0,0 +1,216 @@ +.content.recipes { + max-width:100%; + margin: 0 auto; + + & .recipeList{ + max-width: $big_screen; + margin-top: 50px; + margin-left: auto; + margin-right: auto; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + .recipeWrapper { + text-align: center; + max-width:371px; + margin-top:25px; + margin-bottom:25px; + figure { + height: 236px; + margin: 8px 8px 27px; + border: 8px solid white; + padding: 0; + position: relative; + display:flex; + align-items: center; + justify-content: center; + overflow: hidden; + .hoverFigure{ + position:absolute; + top:0; + left: 0; + height: 100%; + width: 100%; + background-color: rgba(247, 158, 21, 0.7); + z-index:5; + opacity: 0; + display: flex; + justify-content: center; + align-items: center; + transition: opacity 500ms ease 0s; + &:hover{ + opacity: 1; + } + h5{ + color:#FFFFFF; + font-size:4em; + position: relative; + &:before { + background-image: url(../images/recette/hoverRecette.png); + display: inline-block; + content: ""; + width: 100px; + height: 35px; + position: absolute; + top: -40px; + left: 50%; + transform: translateX(-50%); + } + &:after { + background-image: url(../images/recette/hoverRecette.png); + display: inline-block; + content: ""; + width: 100px; + height: 35px; + transform: rotate(180deg) translateX(54%); + position: absolute; + top: 45px; + left: 50%; + } + } + } + img { + background: $color5; + min-height:100%; + min-width: 100%; + width:100%; + height:auto; + } + } + p { + font-family: 'Catamaran-Bold'; + font-size: 18px; + padding: 0 40px; + text-transform: uppercase; + &:last-child { + color: $color6; + font-family: "CreamyScriptRegular"; + font-size: 26px; + text-transform: none; + text-shadow: 1px 0 0 #4e3238, -1px 0 0 #4e3238, 0 1px 0 #4e3238, 0 -1px 0 #4e3238, 1px 1px #4e3238, -1px -1px 0 #4e3238, 1px -1px 0 #4e3238, -1px 1px 0 #4e3238; + } + } + } + + h3 { + text-align: center; + margin-bottom: 2em; + } + } + + & .recipes-filter { + + span { + cursor: pointer; + } + + ul.recipeFilterMenu { + background-color: $color6; + position: relative; + z-index: 15; + margin: 0 auto; + display: block !important; + + & > li { + float: left; + width: 25%; + margin: 0 auto; + text-align: center; + border-right: 1px solid #fed67f; + + &:hover { + .ssmenu { + display: block; + } + a,i { + color: $color5; + } + } + + &.active { + & > a, & > span { + color: white; + } + } + + & > a, & > span { + text-align: center; + } + + .ssmenu { + display: none; + position: absolute; + width: 25%; + padding: 18px 0 21px 44px; + display: none; + z-index: 999; + background-color: #ffffff; + box-shadow: 0px 5px 5px 0px #444444; + + a { + display: block; + text-align: left; + padding: 0; + color: $color5; + + &:hover { + color: $color6; + } + } + li.active { + a { + color: $color6; + } + } + } + } + + a, label, span { + font-family: 'CreamyScriptRegular'; + color: #ffffff; + &:hover { + color: $color5; + } + } + + a, span { + text-align: left; + display: block; + font-size: 3em; + height:100%; + display: flex; + justify-content: center; + align-items: center; + padding: 30px 0; + text-align: left; + + & > h5 { + color:#FFFFFF; + font-size:1em; + } + + &:hover { + color: $color5; + h5{ + color: $color5; + } + i { + color: $color5; + } + } + & > svg { + display: inline-block; + padding-left: 10px; + } + } + & > label { + display: inline-block; + max-width: 100%; + margin-right: 21px; + font-family: 'CreamyScriptRegular'; + color: #ffffff; + font-size: 3em; + } + } + } +} diff --git a/resources/sass/main.scss b/resources/sass/main.scss index 7657eb93..abda8db1 100644 --- a/resources/sass/main.scss +++ b/resources/sass/main.scss @@ -1,11 +1,14 @@ @import "~normalize.css/normalize.css"; @import "~@fortawesome/fontawesome-free/css/all.min.css"; + +@import "variables"; @import "front/reset"; @import "front/fonts"; @import "front/body"; @import "front/header"; @import "front/sub_header"; @import "front/footer"; +@import "front/pagination"; .pattern { background-repeat: repeat; @@ -63,11 +66,7 @@ @import "front/pages/home"; -@import "front/pages/products"; -@import "front/pages/product"; -@import "front/pages/legals"; -@import "front/pages/traceability"; -@import "front/pages/quality"; +@import "front/pages/recipes"; @import "front/pages/ocb/index"; @import "front/pages/ocb/breeder"; diff --git a/resources/views/front/icons/chevron-down.blade.php b/resources/views/front/icons/chevron-down.blade.php new file mode 100644 index 00000000..23e4e0a6 --- /dev/null +++ b/resources/views/front/icons/chevron-down.blade.php @@ -0,0 +1,3 @@ + diff --git a/resources/views/front/icons/search.blade.php b/resources/views/front/icons/search.blade.php new file mode 100644 index 00000000..495d2d4e --- /dev/null +++ b/resources/views/front/icons/search.blade.php @@ -0,0 +1,3 @@ + diff --git a/resources/views/front/recipes/index.blade.php b/resources/views/front/recipes/index.blade.php new file mode 100644 index 00000000..cb943109 --- /dev/null +++ b/resources/views/front/recipes/index.blade.php @@ -0,0 +1,66 @@ +@extends('layouts.app') +@section('title', __('Toutes les recettes')) +@section('description', __('Envie de préparer des plats gourmands avec de la volaille 100% française ? Le Gaulois a la +solution avec ses recettes faciles et originales')) + +@section('sub_header') +
+
+

{{ __('Les Recettes') }}

+
+
+
+
+ + @include('front.icons.search') +
+ +
+ +
+ query('video_recipe'))checked @endif> + +
+
+
+
+
+ {{ __('Proposer') }} {{ __('Une recette') }} + {{-- TODO: mettre condition ici si user connected --}} + {{-- IF CUSTOMER CONNECTED --}} + {{ __('Recettes') }} {{ __('Favorites') }} + {{-- ELSE --}} + {{ __('Recettes') }} {{ __('Favorites') }} + {{-- ENDIF --}} +
+
+@endsection + +@section('content') +
+ @include('front.recipes.recipes-filter') + {{ $recipes->withQueryString()->links() }} +
+ @if(count($recipes)) + @foreach($recipes as $recipe) +
+ +
+
+
{{ __('Voir la recette !') }}
+
+ {{ $recipe->title }} +
+

{{ $recipe->title }}

+

{{ $recipe->catch_phrase }}

+ +
+ @endforeach + @else +

{{ __('Aucun résultat') }}

+ @endif +
+ {{ $recipes->withQueryString()->links() }} +
+@endsection + diff --git a/resources/views/front/recipes/recipes-filter.blade.php b/resources/views/front/recipes/recipes-filter.blade.php new file mode 100644 index 00000000..3f51b265 --- /dev/null +++ b/resources/views/front/recipes/recipes-filter.blade.php @@ -0,0 +1,102 @@ + + diff --git a/resources/views/layouts/app-header.blade.php b/resources/views/layouts/app-header.blade.php index 89ee43bc..f11722f8 100644 --- a/resources/views/layouts/app-header.blade.php +++ b/resources/views/layouts/app-header.blade.php @@ -21,7 +21,7 @@