Added the news section in the homepage (static)
This commit is contained in:
Noah Lancien
parent
dfa5a52cbc
commit
161aabbee7
4 changed files with 169 additions and 9 deletions
|
|
@ -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'));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -289,5 +289,108 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{-- NEWS --}}
|
||||
@if (\collect($newsModels['first'])->isNotEmpty())
|
||||
<section class="py-4" id="news">
|
||||
<div class="container">
|
||||
<div class="row my-2">
|
||||
<div class="col-12 col-xl-7">
|
||||
<h2 class="text-xl-start px-xl-0 px-5 text-center">{{ __('Les actualités le gaulois') }}</h2>
|
||||
<p class="text-xl-start px-xl-0 px-4 text-center">
|
||||
{{ __('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 !') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row news-wrapper justify-content-center">
|
||||
{{-- First news card --}}
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="h-100 mx-2">
|
||||
@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',
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
@if (\collect($newsModels['three_following'])->isNotEmpty())
|
||||
{{-- 3 horizontal cards (only for devices with width > md size) --}}
|
||||
<div class="d-none d-md-flex flex-column justify-content-around col-md-6 col-xl-4">
|
||||
@foreach ($newsModels['three_following'] as $newsModel)
|
||||
<div class="news-small-card bottom-left-shadow border-0 bg-transparent">
|
||||
<a class="text-decoration-none" href="#CHANGEME: article.show"
|
||||
title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
|
||||
<div class="line-border-small bg-white p-3">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<img class="w-100" src="{{ Vite::asset('resources/assets/images/tmp/news.png') }}"
|
||||
title="Image title" alt="Image alt">
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
{{-- TAG --}}
|
||||
<div class="news-tag text-uppercase f-bourton-base fs-5 me-3 px-2 py-1"
|
||||
style="background-color: #1175b7; color: #fff">
|
||||
{{ __('Actu') }}
|
||||
</div>
|
||||
{{-- DATE --}}
|
||||
<p class="f-bakerie-rough mb-0">{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-uppercase f-bourton-base m-0">
|
||||
{{ $newsModel['title'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
{{-- Remaining news : 15 for devices < md size / 12 for devices > md size --}}
|
||||
<div @class([
|
||||
'col-12 order-md-4 order-lg-3 col-xl-4 mt-xl-0 mt-4',
|
||||
'd-none' => \collect($newsModels['three_following'])->isEmpty(),
|
||||
'd-md-none' => \collect($newsModels['latest'])->isEmpty(),
|
||||
])>
|
||||
<h3 class="mb-3">{{ __('Le fil d\'actualité') }}</h3>
|
||||
<ul class="basic-list mx-md-0 mx-2 overflow-y-scroll p-0 pe-4">
|
||||
<div class="d-md-none">
|
||||
@foreach ($newsModels['three_following'] as $newsModel)
|
||||
<li>
|
||||
<a class="text-decoration-none" href="#CHANGEME article.show"
|
||||
title="{{ __('Voir l\'article :name', ['name' => '#CHANGEME: news->title']) }}">
|
||||
<p class="f-bakerie-rough mb-0">{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}</p>
|
||||
<p>{{ $newsModel['title'] }}</p>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
@foreach ($newsModels['latest'] as $newsModel)
|
||||
<li>
|
||||
<a class="text-decoration-none" href="#CHANGEME article.show"
|
||||
title="{{ __('Voir l\'article :name', ['name' => '#CHANGEME: news->title']) }}">
|
||||
<p class="f-bakerie-rough mb-0">{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}</p>
|
||||
<p>{{ $newsModel['title'] }}</p>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
{{-- SEE MORE BUTTON --}}
|
||||
<div class="col-12 d-flex justify-content-center justify-content-md-end order-md-3 order-lg-4 my-4">
|
||||
<a class="btn btn-secondary" href="#CHANGEME: actu index" title="{{ __('Voir toute l\'actualité') }}">
|
||||
{{ __('Voir toute l\'actualité') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
</section>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
{{--
|
||||
VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT
|
||||
VARIABLE || COMMENT || TYPE || REQUIRED || DEFAULT
|
||||
|
||||
$picture || Elements of the img tag. || array<string, string> || 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<string, string> || REQUIRED ||
|
||||
$date || Carbon date. || \Carbon\Carbon || REQUIRED ||
|
||||
$text || Text displayed in the card. || string || REQUIRED ||
|
||||
$link || Link to redirect in the button. || string || REQUIRED ||
|
||||
--}}
|
||||
|
||||
<div class="news-card bottom-left-shadow card border-0 bg-transparent">
|
||||
<a class="text-decoration-none" href="{{ $link }}" title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
|
||||
<div class="line-border-medium bg-white">
|
||||
<div class="news-card bottom-left-shadow card h-100 border-0 bg-transparent">
|
||||
<a class="text-decoration-none h-100" href="{{ $link }}" title="{{ __('Accéder à l\'article : :name', ['name' => '#CHANGEME']) }}">
|
||||
<div class="line-border-small h-100 bg-white">
|
||||
<div class="card-img-top position-relative">
|
||||
<img class="w-100 line-border-medium" src="{{ Vite::asset($picture['src']) }}" title="{{ $picture['alt'] }}"
|
||||
alt="{{ $picture['title'] }}">
|
||||
|
|
@ -19,7 +20,7 @@
|
|||
<div class="card-body p-4">
|
||||
<p class="text-small f-bakerie-rough">{{ $date->format('d/m/Y') }}</p>
|
||||
<p class="text-uppercase fs-4 f-bourton-base">
|
||||
{{ __('Le gaulois s\'engage avec ses équipes pour sauver un enfant avec mécénat chirurgie cardiaque') }}</p>
|
||||
{{ $text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue