forge-joniko/ldc-legaulois
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: #134 - Updated static page subtitle field helper + added video in testimonies part

Browse source
This commit is contained in:
Noah Lancien 2024-09-19 12:45:57 +02:00
parent 1966e8ed02
commit 272cfc712f
6 changed files with 115 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/sass/fo/partials/_testimonial-card.scss
View file

@ -1,7 +1,6 @@
.testimonial-card {
.testimonial-img {
clip-path: polygon(60% .2vw,100% 0,100% calc(100% - .2vw),70% calc(100% - .35vw),40% 100%,0 calc(100% - .2vw),0 .2vw,30% 0);
clip-path: polygon(60% .2vw, 100% 0, 100% calc(100% - .2vw), 70% calc(100% - .35vw), 40% 100%, 0 calc(100% - .2vw), 0 .2vw, 30% 0);
&-wrapper {
@include media-breakpoint-up(lg) {
@ -36,4 +35,13 @@
min-height: 5rem;
}
}
.fa-play {
width: 2rem;
height: 2rem;
}
.video-link {
cursor: pointer;
}
}

24
resources/sass/fo/utilities/_bootstrap-custom.scss
View file

@ -24,19 +24,43 @@
.w#{$infix}-25 {
width: 25% !important;
}
.w#{$infix}-50 {
width: 50% !important;
}
.w#{$infix}-75 {
width: 75% !important;
}
.w#{$infix}-100 {
width: 100% !important;
}
.w#{$infix}-fit {
width: fit-content !important;
}
.h#{$infix}-25 {
height: 25% !important;
}
.h#{$infix}-50 {
height: 50% !important;
}
.h#{$infix}-75 {
height: 75% !important;
}
.h#{$infix}-100 {
height: 100% !important;
}
.h#{$infix}-fit {
height: fit-content !important;
}
@each $prop, $unit in (width: vw, height: vh) {
@each $size in [25, 50, 75, 100] {
.#{$unit}#{$infix}-#{$size} {

26
resources/ts/fo/base/common.ts
View file

@ -546,6 +546,32 @@ document.addEventListener("DOMContentLoaded", function () {
document.querySelector("#swiper-videos .swiper-slide-next")?.setAttribute("inert", "true");
});
}
if (swiper.el.id === "swiper-testimonials") {
swiper.on("slideChange", function() {
updateTestimonialVideoModal(swiper.slides[swiper.activeIndex]);
});
}
}
function updateTestimonialVideoModal(currentSlide: any) {
const videoLinkElement = currentSlide.querySelector(".video-link") as HTMLAnchorElement;
if (!videoLinkElement) {
return;
}
const videoModal = document.querySelector("#testimonial-video-modal") as HTMLDivElement;
if (!videoModal) {
return;
}
const modalLink = document.querySelector(".video-inlaid") as HTMLAnchorElement;
if (!modalLink) {
return;
}
modalLink.setAttribute("href", String(videoLinkElement.dataset.videoLink));
const iframe = modalLink.querySelector("iframe");
if (!iframe) {
return;
}
iframe.setAttribute("src", String(videoLinkElement.dataset.videoLink));
}
function eventBtnPlayPause(swiper: Swiper, btnPlayPause: HTMLElement | null) {

53
resources/views/bo/pages/static_pages/form.blade.php
View file

@ -1,7 +1,6 @@
@use('\App\Enums\StaticPageType', 'StaticPageType')
<div class="row">
@if (!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product))
@if (!$staticPageModel->type->equals(StaticPageType::recipe) && !$staticPageModel->type->equals(StaticPageType::product))
{{-- SEO_TITLE --}}
<div class="col-12 col-md-6 mb-3">
<fieldset class="h-100 border p-3">
@ -80,9 +79,10 @@
</fieldset>
</div>
@endif
@if (!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::home))
@if (
!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::home))
{{-- TITLE --}}
<div class="col-12 col-md-6 mb-3">
<fieldset class="h-100 border p-3">
@ -112,12 +112,13 @@
</fieldset>
</div>
@endif
@if (!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::legals) &&
!$staticPageModel->type->equals(StaticPageType::confidentiality) &&
!$staticPageModel->type->equals(StaticPageType::accessibility) &&
!$staticPageModel->type->equals(StaticPageType::selling))
@if (
!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::legals) &&
!$staticPageModel->type->equals(StaticPageType::confidentiality) &&
!$staticPageModel->type->equals(StaticPageType::accessibility) &&
!$staticPageModel->type->equals(StaticPageType::selling))
{{-- SUBTITLE --}}
<div class="col-12 col-md-6 mb-3">
<fieldset class="h-100 border p-3">
@ -142,7 +143,7 @@
'model' => trans_choice('models.classes.static_page', 1),
]),
'min' => 3,
'max' => 255,
'max' => 500,
]),
'placeholder' => __(':field :inter:model', [
'field' => str(__('validation.custom.subtitle'))->ucfirst(),
@ -155,10 +156,11 @@
</fieldset>
</div>
@endif
@if (!$staticPageModel->type->equals(StaticPageType::recruitment) &&
!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::home))
@if (
!$staticPageModel->type->equals(StaticPageType::recruitment) &&
!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::home))
{{-- CONTENT --}}
<div class="col-12 mb-3">
<fieldset class="border p-3">
@ -189,15 +191,16 @@
</fieldset>
</div>
@endif
@if (!$staticPageModel->type->equals(StaticPageType::recipes) &&
!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::products) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::home) &&
!$staticPageModel->type->equals(StaticPageType::legals) &&
!$staticPageModel->type->equals(StaticPageType::confidentiality) &&
!$staticPageModel->type->equals(StaticPageType::accessibility) &&
!$staticPageModel->type->equals(StaticPageType::selling))
@if (
!$staticPageModel->type->equals(StaticPageType::recipes) &&
!$staticPageModel->type->equals(StaticPageType::recipe) &&
!$staticPageModel->type->equals(StaticPageType::products) &&
!$staticPageModel->type->equals(StaticPageType::product) &&
!$staticPageModel->type->equals(StaticPageType::home) &&
!$staticPageModel->type->equals(StaticPageType::legals) &&
!$staticPageModel->type->equals(StaticPageType::confidentiality) &&
!$staticPageModel->type->equals(StaticPageType::accessibility) &&
!$staticPageModel->type->equals(StaticPageType::selling))
{{-- PICTURE SECTION --}}
<div class="col-12 pb-3">
<fieldset class="h-100 border p-3">

18
resources/views/fo/pages/recruitment.blade.php
View file

@ -129,6 +129,24 @@
</div>
</div>
</section>
{{-- Video Modal --}}
<div class="modal fade translate-middle top-50 start-50" id="testimonial-video-modal" aria-labelledby="testimonialVideoModalLabel"
aria-hidden="true" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="video-inlaid ratio ratio-16x9" type="youtube"
href="https://www.youtube.com/embed/{{ $testimonialModels->first()->video_id }}"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" type="button">{{ __('Fermer') }}</button>
</div>
</div>
</div>
</div>
@endif
{{-- ADVANTAGES --}}
<section class="joinus mb-3" id="recruitment-advantages">

10
resources/views/fo/partials/testimonial-card.blade.php
View file

@ -1,12 +1,20 @@
<div class="testimonial-card bottom-left-shadow h-100 w-lg-75 ms-lg-auto">
<div class="position-relative d-flex justify-content-center testimonial-img-wrapper">
<div class="line-border-small w-fit bg-white p-2">
@if (!empty($model->video_id))
<a class="video-link" data-bs-toggle="modal" data-bs-target="#testimonial-video-modal"
data-video-link="https://www.youtube.com/embed/{{ $model->video_id }}">
<i class="fa-solid fa-xl fa-play position-absolute z-1 rounded-circle translate-middle top-50 start-50 bg-white p-3"></i>
@endif
<img class="w-100 line-border-medium testimonial-img" src="{{ asset($model->picture) }}" title="{{ $model->picture_title }}"
alt="{{ $model->picture_alt }}" />
@if (!empty($model->video_id))
</a>
@endif
</div>
</div>
<div
class="line-border-medium position-relative d-flex flex-column testimonial-card-bottom-part px-lg-5 px-lg-4 pb-lg-4 bg-light px-3 pt-4">
class="line-border-medium position-relative d-flex flex-column testimonial-card-bottom-part px-lg-5 px-lg-4 pb-lg-4 bg-light h-lg-100 px-3 pt-4">
<p class="text-uppercase fs-3 f-bourton-base mb-1">
{{ $model->identity }}
</p>