diff --git a/README.md b/README.md index bdf814ff..02672b7e 100644 --- a/README.md +++ b/README.md @@ -11,3 +11,6 @@ convert -colors 256 -depth 8 +dither bg-footer-ori.png bg-footer-test.png ### Autre apt install trimage + +### TODO +FIXME: supprimer le dossier resources/assets/images/tmp diff --git a/resources/assets/images/common/empty-heart.svg b/resources/assets/images/common/empty-heart.svg new file mode 100644 index 00000000..ffd023ce --- /dev/null +++ b/resources/assets/images/common/empty-heart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/assets/images/common/red-heart.svg b/resources/assets/images/common/red-heart.svg new file mode 100644 index 00000000..d5e91cfe --- /dev/null +++ b/resources/assets/images/common/red-heart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/assets/images/recipes/clock.svg b/resources/assets/images/recipes/clock.svg new file mode 100644 index 00000000..e0b0bec3 --- /dev/null +++ b/resources/assets/images/recipes/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/assets/images/recipes/cooking-pot.svg b/resources/assets/images/recipes/cooking-pot.svg new file mode 100644 index 00000000..03b03965 --- /dev/null +++ b/resources/assets/images/recipes/cooking-pot.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/assets/images/recipes/toque.svg b/resources/assets/images/recipes/toque.svg new file mode 100644 index 00000000..eef8cfe3 --- /dev/null +++ b/resources/assets/images/recipes/toque.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/resources/assets/images/tmp/breeder.png b/resources/assets/images/tmp/breeder.png new file mode 100644 index 00000000..b6b53c0d Binary files /dev/null and b/resources/assets/images/tmp/breeder.png differ diff --git a/resources/assets/images/tmp/job.jpg b/resources/assets/images/tmp/job.jpg new file mode 100644 index 00000000..889b30ac Binary files /dev/null and b/resources/assets/images/tmp/job.jpg differ diff --git a/resources/assets/images/tmp/news.png b/resources/assets/images/tmp/news.png new file mode 100644 index 00000000..27fb74fc Binary files /dev/null and b/resources/assets/images/tmp/news.png differ diff --git a/resources/assets/images/tmp/nuggets.png b/resources/assets/images/tmp/nuggets.png new file mode 100644 index 00000000..8aa2cb7f Binary files /dev/null and b/resources/assets/images/tmp/nuggets.png differ diff --git a/resources/assets/images/tmp/nutriscore-b.png b/resources/assets/images/tmp/nutriscore-b.png new file mode 100644 index 00000000..603816df Binary files /dev/null and b/resources/assets/images/tmp/nutriscore-b.png differ diff --git a/resources/assets/images/tmp/packaging.png b/resources/assets/images/tmp/packaging.png new file mode 100644 index 00000000..2fe6e52c Binary files /dev/null and b/resources/assets/images/tmp/packaging.png differ diff --git a/resources/assets/images/tmp/product-picture.png b/resources/assets/images/tmp/product-picture.png new file mode 100644 index 00000000..7cbabba9 Binary files /dev/null and b/resources/assets/images/tmp/product-picture.png differ diff --git a/resources/assets/images/tmp/product-tag.png b/resources/assets/images/tmp/product-tag.png new file mode 100644 index 00000000..84a2a530 Binary files /dev/null and b/resources/assets/images/tmp/product-tag.png differ diff --git a/resources/assets/images/tmp/tag-new.svg b/resources/assets/images/tmp/tag-new.svg new file mode 100644 index 00000000..c8656d63 --- /dev/null +++ b/resources/assets/images/tmp/tag-new.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/resources/sass/fo/base/_common.scss b/resources/sass/fo/base/_common.scss index 9f93acbe..c1cce140 100644 --- a/resources/sass/fo/base/_common.scss +++ b/resources/sass/fo/base/_common.scss @@ -13,3 +13,22 @@ .mirror-v { transform: scaleY(-1); } + +// * Clip-path for the irregular shape. +// Use the large one for sections and the small one for cards. +.line-border-large { + clip-path: polygon(67% 1vw, 100% 0, 100% 100%, 50% calc(100% - 1vw), 0 100%, 0 1vw, 31% 0); +} + +.line-border-small { + clip-path: polygon(60% 1vw, 100% 0, 100% calc(100% - 1vw), 70% calc(100% - 1.5vw), 40% 100%, 0 calc(100% - 1vw), 0 1vw, 30% 0); + + @include media-breakpoint-up(sm) { + clip-path: polygon(60% 0.5vw, 100% 0, 100% calc(100% - 0.5vw), 70% calc(100% - 0.75vw), 40% 100%, 0 calc(100% - 0.5vw), 0 0.5vw, 30% 0); + } +} + +.bottom-left-shadow { + filter: drop-shadow(-2px 2px 4px rgb(78 50 56 / 12%)); +} + diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss index 1c809ce4..d642fda3 100644 --- a/resources/sass/fo/fo.scss +++ b/resources/sass/fo/fo.scss @@ -12,3 +12,6 @@ @import "./base/fonts"; @import "./base/common"; @import "./base/layout"; + +// * PARTIALS +@import "./partials/partials"; diff --git a/resources/sass/fo/partials/_breeding-card.scss b/resources/sass/fo/partials/_breeding-card.scss new file mode 100644 index 00000000..b48b3b0e --- /dev/null +++ b/resources/sass/fo/partials/_breeding-card.scss @@ -0,0 +1,49 @@ +.breeding-card { + margin-bottom: 0.7rem; + + .card-img-top { + img { + height: 20rem; + object-fit: cover; + } + } + + .img-wrapper::after { + position: absolute; + top: 0; + left: 0; + display: block; + width: calc(100% - 1rem); + height: 100%; + margin: 0.5rem; + background: linear-gradient(0deg,rgb(0 0 0 / 100%) 0%,rgb(255 255 255 / 0%) 100%); + content: " "; + } + + .card-body { + bottom: -0.1rem; + } + + .text-zone { + /* stylelint-disable-next-line declaration-property-value-no-unknown */ + background-image: linear-gradient($color-quint, $color-quint); + background-position: bottom; + background-repeat: no-repeat; + background-size: 100% 0; + transition: .4s, background-position 0s; + + .btn { + margin-bottom: -0.7rem; + } + } + + &:hover { + .text-zone { + background-size: 100% 100%; + } + } + + .breeding-card-btn { + bottom: -1rem; + } +} diff --git a/resources/sass/fo/partials/_job-card.scss b/resources/sass/fo/partials/_job-card.scss new file mode 100644 index 00000000..ef2acf0c --- /dev/null +++ b/resources/sass/fo/partials/_job-card.scss @@ -0,0 +1,13 @@ +.job-card { + .card-body { + margin-top: -2rem; + + ul { + list-style: none; + } + } + + .job-card-view-more { + bottom: -1rem; + } +} diff --git a/resources/sass/fo/partials/_news-card.scss b/resources/sass/fo/partials/_news-card.scss new file mode 100644 index 00000000..388c7981 --- /dev/null +++ b/resources/sass/fo/partials/_news-card.scss @@ -0,0 +1,13 @@ +.news-card { + .card-img-top { + img { + height: 15rem; + object-fit: cover; + } + + .tag { + bottom: -1.5rem; + left: 1.5rem; + } + } +} diff --git a/resources/sass/fo/partials/_partials.scss b/resources/sass/fo/partials/_partials.scss new file mode 100644 index 00000000..46286021 --- /dev/null +++ b/resources/sass/fo/partials/_partials.scss @@ -0,0 +1,6 @@ +@import "breeding-card"; +@import "job-card"; +@import "news-card"; +@import "product-card-tiny"; +@import "product-card"; +@import "recipe-card"; diff --git a/resources/sass/fo/partials/_product-card-tiny.scss b/resources/sass/fo/partials/_product-card-tiny.scss new file mode 100644 index 00000000..bad5e981 --- /dev/null +++ b/resources/sass/fo/partials/_product-card-tiny.scss @@ -0,0 +1,7 @@ +.product-card-tiny { + .nutriscore { + bottom: -1rem; + left: -1rem; + box-shadow: -2px 2px 4px 0 #4e32381f; + } +} diff --git a/resources/sass/fo/partials/_product-card.scss b/resources/sass/fo/partials/_product-card.scss new file mode 100644 index 00000000..f361a344 --- /dev/null +++ b/resources/sass/fo/partials/_product-card.scss @@ -0,0 +1,43 @@ + +.product-card { + .product-card-tag { + top: -5%; + left: -1rem; + width: 30%; + } + + .product-card-packaging { + margin-top: -2rem; + } + + .product-card-product { + bottom: 1rem; + left: 0; + } + + .product-card-favorite-filled { + right: 1rem; + width: 2rem; + height: 2rem; + background-image: url('@/images/common/red-heart.svg'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + .product-card-favorite-empty { + right: 1rem; + width: 2rem; + height: 2rem; + background-image: url('@/images/common/empty-heart.svg'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + .product-card-bottom-part { + top: -1rem; + + .product-card-view-more { + margin-bottom: -1rem; + } + } +} diff --git a/resources/sass/fo/partials/_recipe-card.scss b/resources/sass/fo/partials/_recipe-card.scss new file mode 100644 index 00000000..dc56b17b --- /dev/null +++ b/resources/sass/fo/partials/_recipe-card.scss @@ -0,0 +1,33 @@ + +.recipe-card { + .recipe-card-product { + left: 1rem; + filter: drop-shadow(0 1px 9px rgb(0 0 0 / 25%)); + } + + .recipe-card-favorite-filled { + right: 1rem; + width: 2rem; + height: 2rem; + background-image: url('@/images/common/red-heart.svg'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + .recipe-card-favorite-empty { + right: 1rem; + width: 2rem; + height: 2rem; + background-image: url('@/images/common/empty-heart.svg'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + .recipe-card-bottom-part { + top: -1rem; + + .recipe-tag { + border-radius: 5px; + } + } +} diff --git a/resources/sass/fo/utilities/_bootstrap-custom.scss b/resources/sass/fo/utilities/_bootstrap-custom.scss index 751624cd..07fcfbbd 100644 --- a/resources/sass/fo/utilities/_bootstrap-custom.scss +++ b/resources/sass/fo/utilities/_bootstrap-custom.scss @@ -33,6 +33,9 @@ .w#{$infix}-100 { width: 100% !important; } + .w#{$infix}-fit { + width: fit-content !important; + } @each $prop, $unit in (width: vw, height: vh) { @each $size in [25, 50, 75, 100] { diff --git a/resources/sass/fo/utilities/_mixins.scss b/resources/sass/fo/utilities/_mixins.scss index 3bd9ed6b..a6c53f49 100644 --- a/resources/sass/fo/utilities/_mixins.scss +++ b/resources/sass/fo/utilities/_mixins.scss @@ -68,7 +68,6 @@ @return $string; } - @mixin text-inset-shadow($color) { background-clip: text; background-color: rgb(0 0 0 / 75%); diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts index 696ea689..242bd7ba 100644 --- a/resources/ts/fo/base/common.ts +++ b/resources/ts/fo/base/common.ts @@ -41,4 +41,29 @@ document.addEventListener("DOMContentLoaded", function () { }); }, 300); } + + // * BREEDING CARDS + const breedingCards = document.getElementsByClassName("breeding-card"); + for (const breedingCard of breedingCards) { + const breedingCardBtns = breedingCard.getElementsByClassName("btn"); + const breedingCardTexts = breedingCard.getElementsByTagName("p"); + breedingCard.addEventListener("mouseenter", () => { + for (const breedingCardBtn of breedingCardBtns) { + breedingCardBtn.classList.remove("btn-quint"); + breedingCardBtn.classList.add("btn-secondary"); + } + for (const breedingCardText of breedingCardTexts) { + breedingCardText.classList.remove("text-white"); + } + }); + breedingCard.addEventListener("mouseleave", () => { + for (const breedingCardBtn of breedingCardBtns) { + breedingCardBtn.classList.remove("btn-secondary"); + breedingCardBtn.classList.add("btn-quint"); + } + for (const breedingCardText of breedingCardTexts) { + breedingCardText.classList.add("text-white"); + } + }); + } }); diff --git a/resources/views/fo/pages/partials-demo.blade.php b/resources/views/fo/pages/partials-demo.blade.php new file mode 100644 index 00000000..f09deb5e --- /dev/null +++ b/resources/views/fo/pages/partials-demo.blade.php @@ -0,0 +1,251 @@ +@extends('fo.layout') + +@section('title', __('Accueil')) +@section('description', __('Description site')) +@section('breadcrumb', request()->route()->getName()) + +@section('content') +
+
+
+

{{ __('Partials elements') }}

+

{{ __('Breeding cards') }}

+
+
+
+ {{-- BREEDING CARDS --}} +
+
+ @include('fo.partials.breeding-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/breeder.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'text' => __('L\'élevage des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ @include('fo.partials.breeding-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/breeder.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'text' => __('Le métier d\'éleveur de volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ @include('fo.partials.breeding-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/breeder.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'text' => __('L\'alimentation des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ @include('fo.partials.breeding-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/breeder.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'text' => __('La santé des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ {{-- NEWS CARDS --}} +
+
+

{{ __('News cards') }}

+
+
+
+
+
+ @include('fo.partials.news-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/news.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'date' => now()->subDays(rand(0, 31)), + 'text' => __('L\'élevage des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ @include('fo.partials.news-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/news.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'date' => now()->subDays(rand(0, 31)), + 'text' => __('L\'élevage des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ @include('fo.partials.news-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/news.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'date' => now()->subDays(rand(0, 31)), + 'text' => __('L\'élevage des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ @include('fo.partials.news-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/news.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'date' => now()->subDays(rand(0, 31)), + 'text' => __('L\'élevage des volailles'), + 'link' => '#CHANGEME', + ]) +
+
+ {{-- PRODUCT CARDS TINY VERSION --}} +
+
+

{{ __('Product cards - Tiny version') }}

+
+
+
+
+
+ @include('fo.partials.product-card-tiny') +
+
+ @include('fo.partials.product-card-tiny') +
+
+ @include('fo.partials.product-card-tiny') +
+
+ @include('fo.partials.product-card-tiny') +
+
+ {{-- PRODUCT CARDS --}} +
+
+

{{ __('Product cards') }}

+
+
+
+
+
+ @include('fo.partials.product-card', [ + 'productPicture' => Vite::asset('resources/assets/images/tmp/nuggets.png'), + 'isNew' => true, + 'name' => __('Sauté de dinde sans os sans peau'), + ]) +
+
+ @include('fo.partials.product-card', [ + 'name' => __('Sauté de dinde sans os sans peau'), + 'tag' => [ + 'src' => Vite::asset('resources/assets/images/tmp/product-tag.png'), + 'alt' => 'Alt tag', + 'title' => 'Title tag', + ], + ]) +
+
+ @include('fo.partials.product-card', [ + 'isNew' => true, + 'name' => __('Sauté de dinde sans os sans peau'), + 'tag' => [ + 'src' => Vite::asset('resources/assets/images/tmp/product-tag.png'), + 'alt' => 'Alt tag', + 'title' => 'Title tag', + ], + ]) +
+
+ @include('fo.partials.product-card', [ + 'productPicture' => Vite::asset('resources/assets/images/tmp/nuggets.png'), + 'name' => __('Sauté de dinde sans os sans peau'), + ]) +
+
+ {{-- RECIPE CARDS --}} +
+
+

{{ __('Recipe cards') }}

+
+
+
+
+
+ @include('fo.partials.recipe-card') +
+
+ @include('fo.partials.recipe-card') +
+
+ @include('fo.partials.recipe-card') +
+
+ @include('fo.partials.recipe-card') +
+
+ {{-- JOB CARDS --}} +
+
+

{{ __('Job cards') }}

+
+
+
+
+
+ @include('fo.partials.job-card', [ + 'picture' => [ + 'src' => Vite::asset('resources/assets/images/tmp/job.jpg'), + 'alt' => 'Alt image', + 'title' => 'Title image', + ], + ]) +
+
+ @include('fo.partials.job-card', [ + 'picture' => [ + 'src' => Vite::asset('resources/assets/images/tmp/job.jpg'), + 'alt' => 'Alt image', + 'title' => 'Title image', + ], + ]) +
+
+ @include('fo.partials.job-card', [ + 'picture' => [ + 'src' => Vite::asset('resources/assets/images/tmp/job.jpg'), + 'alt' => 'Alt image', + 'title' => 'Title image', + ], + ]) +
+
+ @include('fo.partials.job-card', [ + 'picture' => [ + 'src' => Vite::asset('resources/assets/images/tmp/job.jpg'), + 'alt' => 'Alt image', + 'title' => 'Title image', + ], + ]) +
+
+
+@endsection diff --git a/resources/views/fo/partials/breeding-card.blade.php b/resources/views/fo/partials/breeding-card.blade.php new file mode 100644 index 00000000..723cd9af --- /dev/null +++ b/resources/views/fo/partials/breeding-card.blade.php @@ -0,0 +1,27 @@ +{{-- + VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT + + $picture || Elements of the img tag. || array || REQUIRED || + $text || Text displayed in the card. || string || REQUIRED || + $link || Link to redirect in the button. || string || REQUIRED || + $linkNewTab || Should the link be opened in a new tab ? || boolean || OPTIONNAL || false +--}} + +
+
+ {{ $picture['title'] }} +
+
+
+
+

{{ $text }}

+
+
+ {{ __('En savoir plus') }} +
+
+
+ +
diff --git a/resources/views/fo/partials/job-card.blade.php b/resources/views/fo/partials/job-card.blade.php new file mode 100644 index 00000000..b6c72860 --- /dev/null +++ b/resources/views/fo/partials/job-card.blade.php @@ -0,0 +1,24 @@ +
+
+
+ {{ $picture['title'] }} +
+
+
+

{{ __('Qualité - Sécurité - Environnement') }}

+
    +
  • {{ __('Directeur régional') }}
    • +
  • {{ __('Chef de secteur') }}
    • +
  • {{ __('Compte-clé') }}
    • +
  • {{ __('Assistant commercial') }}
    • +
  • {{ __('Télévendeur') }}
    • +
+
+
+
+
+ + {{ __('Voir les offres') }} + +
+
diff --git a/resources/views/fo/partials/news-card.blade.php b/resources/views/fo/partials/news-card.blade.php new file mode 100644 index 00000000..b080bb65 --- /dev/null +++ b/resources/views/fo/partials/news-card.blade.php @@ -0,0 +1,26 @@ +{{-- + VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT + + $picture || Elements of the img tag. || array || REQUIRED || + $text || Text displayed in the card. || string || REQUIRED || + $link || Link to redirect in the button. || string || REQUIRED || +--}} + +
+ +
+
+ {{ $picture['title'] }} +
+

{{ __('Actu') }}

+
+
+
+

{{ $date->format('d/m/Y') }}

+

+ {{ __('Le gaulois s\'engage avec ses équipes pour sauver un enfant avec mécénat chirurgie cardiaque') }}

+
+
+ +
diff --git a/resources/views/fo/partials/product-card-tiny.blade.php b/resources/views/fo/partials/product-card-tiny.blade.php new file mode 100644 index 00000000..7fe73098 --- /dev/null +++ b/resources/views/fo/partials/product-card-tiny.blade.php @@ -0,0 +1,23 @@ +
+
+
+
+
+ #CHANGEME + #CHANGEME +
+
+
+
+

{{ __('Sauté de dinde sans os sans peau') }}

+ + {{ __('Voir le produit') }} + +
+
+
+
+
diff --git a/resources/views/fo/partials/product-card.blade.php b/resources/views/fo/partials/product-card.blade.php new file mode 100644 index 00000000..553ac29d --- /dev/null +++ b/resources/views/fo/partials/product-card.blade.php @@ -0,0 +1,39 @@ +
+ {{-- FIXME: Le haut de la partie tertiary doit être découpée, mais je n'arrive pas à le faire sans dégommer les images et en gardant une bonne hauteur ... --}} +
+ #CHANGEME !empty($productPicture), + ]) /> + + @if (!empty($isNew)) + {{ __('Tag pour un nouveau produit') }} + @elseif (!empty($tag)) + {{ $tag['alt'] }} + @endif + @if (!empty($productPicture)) + #CHANGEME + @endif + {{-- FIXME: Ajouter condition si produit déjà aux favoris => Coeur rouge --}} + @if (rand(0, 1)) + + @else + + @endif +
+ {{-- BOTTOM PART --}} +
+
+

{{ $name }}

+
+
+ + {{ __('Voir le produit') }} + +
+
+
diff --git a/resources/views/fo/partials/recipe-card.blade.php b/resources/views/fo/partials/recipe-card.blade.php new file mode 100644 index 00000000..0c7cbcb6 --- /dev/null +++ b/resources/views/fo/partials/recipe-card.blade.php @@ -0,0 +1,44 @@ +
+
+ + #CHANGEME + + #CHANGEME + + {{-- FIXME: Ajouter condition si recette déjà aux favoris => Coeur rouge --}} + @if (rand(0, 1)) + + @else + + @endif +
+
+

+ {{ __('Poulet à la moutarde, aux olives noires et herbes de provence') }} +

+ {{-- PICTOS --}} +
+

+ #CHANGEME + {{ __('1h32') }} +

+

+ #CHANGEME + {{ __('40min') }} +

+

+ #CHANGEME + {{ __('facile') }} +

+
+ {{-- TAGS --}} +
+

{{ __('tag') }} +

+

{{ __('tag') }} +

+
+
+
diff --git a/routes/web-fo.php b/routes/web-fo.php index db53eb11..08f6c4b4 100644 --- a/routes/web-fo.php +++ b/routes/web-fo.php @@ -10,6 +10,7 @@ Route::middleware(['throttle:credentials']) // * Dev route only if (app()->environment() === 'local') { Route::view('/bs-demo', 'fo.pages.bs-demo')->name('bs-demo'); + Route::view('/partials-demo', 'fo.pages.partials-demo')->name('partials-demo'); } Route::get('/', [HomeController::class, 'index'])->name('homepage');