From 161aabbee79e8dff1a96be5c94984bfb219b00a5 Mon Sep 17 00:00:00 2001 From: Noah Lancien Date: Thu, 11 Apr 2024 13:16:16 +0200 Subject: [PATCH] Added the news section in the homepage (static) --- app/Http/Controllers/Fo/HomeController.php | 20 +++- resources/sass/fo/pages/home.scss | 38 +++++++ resources/views/fo/pages/home.blade.php | 103 ++++++++++++++++++ .../views/fo/partials/news-card.blade.php | 17 +-- 4 files changed, 169 insertions(+), 9 deletions(-) diff --git a/app/Http/Controllers/Fo/HomeController.php b/app/Http/Controllers/Fo/HomeController.php index 32892065..fecc5e33 100644 --- a/app/Http/Controllers/Fo/HomeController.php +++ b/app/Http/Controllers/Fo/HomeController.php @@ -25,7 +25,25 @@ class HomeController extends Controller $mainSlideModels = MainSlide::query()->where('published', true)->orderBy('order', 'ASC')->get(); $approachSlideModels = ApproachSlide::query()->where('published', true)->orderBy('order', 'ASC')->get(); $productViews = $this->getProductsViewsByRange(); - return view('fo.pages.home', compact('mainSlideModels', 'approachSlideModels', 'productViews')); + + // TODO: Remplacer cette boucle par un appel à la base quand le crud aura été fait. + $newsModelsCollection = []; + for ($i = 0; $i < 16; $i++) { + $newsModelsCollection[] = [ + 'title' => \fake()->text(100), + ]; + } + $newsModelsCollection = \collect($newsModelsCollection); + // END TODO + + // Split news in 3 parts. + $newsModels = [ + 'first' => $newsModelsCollection->shift(), + 'three_following' => $newsModelsCollection->shift(3), + 'latest' => $newsModelsCollection, + ]; + + return view('fo.pages.home', compact('mainSlideModels', 'approachSlideModels', 'productViews', 'newsModels')); } /** diff --git a/resources/sass/fo/pages/home.scss b/resources/sass/fo/pages/home.scss index 478f0d7e..9c842720 100644 --- a/resources/sass/fo/pages/home.scss +++ b/resources/sass/fo/pages/home.scss @@ -201,4 +201,42 @@ } } } + + #news { + .news-wrapper { + @include media-breakpoint-up(xl) { + height: 34rem; + } + } + + .basic-list { + max-height: 18rem; + list-style: none; + scrollbar-color: $color-secondary $color-tertiary; + + @include media-breakpoint-up(xl) { + max-height: 25rem; + margin: 0; + } + + // Improved compatibility with browsers which doesn't support scrollbar-color. + &::-webkit-scrollbar-thumb { + width: 1rem; + border: 0.4rem solid transparent; + background-clip: content-box; + background-color: $color-secondary; + } + + &::-webkit-scrollbar { + background-color: transparent; + } + + &::-webkit-scrollbar-track-piece { + width: 1rem; + border: 0.4rem solid transparent; + background-clip: content-box; + background-color: $color-tertiary; + } + } + } } diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php index 05da56b7..6bec98ee 100644 --- a/resources/views/fo/pages/home.blade.php +++ b/resources/views/fo/pages/home.blade.php @@ -289,5 +289,108 @@ + {{-- NEWS --}} + @if (\collect($newsModels['first'])->isNotEmpty()) +
+
+
+
+

{{ __('Les actualités le gaulois') }}

+

+ {{ __('Pour ne rien manquer des actus Le Gaulois, découvrez la vie de notre marque à travers nos évènements, nos récompenses, nos conseils ... et bien d\'autres !') }} +

+
+
+
+ {{-- First news card --}} +
+
+ @include('fo.partials.news-card', [ + 'picture' => [ + 'src' => 'resources/assets/images/tmp/news.png', + 'alt' => 'Image alt', + 'title' => 'Image title', + ], + 'date' => now(), + 'text' => $newsModels['first']['title'], + 'link' => '#CHANGEME', + ]) +
+
+ @if (\collect($newsModels['three_following'])->isNotEmpty()) + {{-- 3 horizontal cards (only for devices with width > md size) --}} +
+ @foreach ($newsModels['three_following'] as $newsModel) +
+ +
+
+
+ Image alt +
+
+
+ {{-- TAG --}} +
+ {{ __('Actu') }} +
+ {{-- DATE --}} +

{{ now()->subDays(rand(1, 31))->format('d/m/Y') }} +

+
+

+ {{ $newsModel['title'] }} +

+
+
+
+ +
+ @endforeach +
+ @endif + {{-- Remaining news : 15 for devices < md size / 12 for devices > md size --}} +
\collect($newsModels['three_following'])->isEmpty(), + 'd-md-none' => \collect($newsModels['latest'])->isEmpty(), + ])> +

{{ __('Le fil d\'actualité') }}

+ +
+ {{-- SEE MORE BUTTON --}} +
+ + {{ __('Voir toute l\'actualité') }} + +
+
+
+
+ @endif @endsection diff --git a/resources/views/fo/partials/news-card.blade.php b/resources/views/fo/partials/news-card.blade.php index 299fad25..563cd997 100644 --- a/resources/views/fo/partials/news-card.blade.php +++ b/resources/views/fo/partials/news-card.blade.php @@ -1,14 +1,15 @@ {{-- - VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT + 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 || Elements of the img tag. || array || REQUIRED || + $date || Carbon date. || \Carbon\Carbon || REQUIRED || + $text || Text displayed in the card. || string || REQUIRED || + $link || Link to redirect in the button. || string || REQUIRED || --}} -
- -
+
+ +
{{ $picture['title'] }} @@ -19,7 +20,7 @@

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

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

+ {{ $text }}