OCB breeder add missing parts + responsive
This commit is contained in:
Jérémy Munsch
parent
37973e732e
commit
d8798fbfad
7 changed files with 110 additions and 84 deletions
|
|
@ -59,8 +59,7 @@ class OCBController extends Controller
|
|||
->get();
|
||||
$breeder = OCBBreeder::ocbValidated()->where('status', true)
|
||||
->inRandomOrder()->first();
|
||||
$ocbType = OCBType::poultry();
|
||||
return view('front.ocb.poultry', compact('breeder', 'ocbType', 'ocbContents'));
|
||||
return view('front.ocb.poultry', compact('breeder', 'ocbContents'));
|
||||
}
|
||||
|
||||
public function egg()
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="slider">
|
||||
<hooper ref="carousel" style="width: 950px; height: 633px;" @slide="updateCarousel" :initialSlide="1" :infiniteScroll="true" :mouseDrag="false" :touchDrag="false" :wheelControl="false" :autoPlay="true" :playSpeed="3500" :transition="900">
|
||||
<hooper ref="carousel" class="breeder-carousel" @slide="updateCarousel" :centerMode="true" :itemsToShow="1" :initialSlide="1" :infiniteScroll="true" :mouseDrag="true" :touchDrag="true" :wheelControl="false" :autoPlay="true" :playSpeed="3500" :transition="900">
|
||||
<slide v-for="slide in oSlides" :key="slide.id">
|
||||
<img :src="slide">
|
||||
</slide>
|
||||
|
|
@ -34,7 +34,11 @@
|
|||
data(){
|
||||
return {
|
||||
'oSlides': [],
|
||||
'indexSlide': 1
|
||||
'indexSlide': 1,
|
||||
'hooperSettings': {
|
||||
'itemsToShow': 1,
|
||||
'centerMode': true
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -62,53 +66,71 @@
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.hooper-breeder-prev {
|
||||
left: -8%;
|
||||
@import '../../../sass/_variables.scss';
|
||||
.breeder-carousel {
|
||||
height: auto;
|
||||
width: 80vw;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
.hooper-slide {
|
||||
position: relative;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hooper-breeder-next {
|
||||
right: -8%;
|
||||
.hooper-breeder-prev {
|
||||
left: -8%;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.hooper-breeder-next, .hooper-breeder-prev {
|
||||
user-select: none;
|
||||
color: #003b22 !important;
|
||||
font-size: 50px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
||||
line-height: 0.65em !important;
|
||||
background-color: #afcb03;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.hooper-breeder-next {
|
||||
right: -8%;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.hooper-breeder-next, .hooper-breeder-prev {
|
||||
user-select: none;
|
||||
color: #003b22 !important;
|
||||
font-size: 50px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
|
||||
line-height: 0.65em !important;
|
||||
background-color: #afcb03;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
transition: opacity .5s ;
|
||||
}
|
||||
|
||||
.hooper-breeder-previews {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
|
||||
&>img {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
transition: opacity .5s ;
|
||||
}
|
||||
|
||||
.hooper-breeder-previews {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
|
||||
&>img {
|
||||
width: 150px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
@include max-width($mobile + 100px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
11
resources/sass/front/pages/ocb/_breeder.scss
vendored
11
resources/sass/front/pages/ocb/_breeder.scss
vendored
|
|
@ -127,7 +127,7 @@
|
|||
background-size: cover;
|
||||
background-position: center center;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
margin: 0;
|
||||
color: #003b22;
|
||||
|
||||
& .title {
|
||||
|
|
@ -264,10 +264,10 @@
|
|||
|
||||
&>h4 {
|
||||
font-size: 4.7em;
|
||||
margin: 50px 0;
|
||||
margin: 1rem 5rem;
|
||||
position: relative;
|
||||
font-family: 'CreamyScriptRegular';
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
|
|
@ -284,8 +284,9 @@
|
|||
}
|
||||
|
||||
&>img {
|
||||
width: 950px;
|
||||
height: 633px;
|
||||
width: 80vw;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -91,24 +91,28 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
@if ($breeder->site !== null)
|
||||
@if ($breeder->picture1 or $breeder->picture2 or $breeder->picture3)
|
||||
<section class="exploitation">
|
||||
<h4>Les images de son exploitation</h4>
|
||||
@if ($breeder->site->presentation_type === 1)
|
||||
{{-- Vidéo --}}
|
||||
<iframe width="100%" height="400px" src="{{ $breeder->site->video_link }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
@elseif ($breeder->site->presentation_type === 2)
|
||||
{{-- Images slider --}}
|
||||
@if(count($pictures) > 1)
|
||||
<!-- Slider -->
|
||||
<breeder-site-slider slides='@json($pictures)'></breeder-site-slider>
|
||||
@else
|
||||
<img src="{{ asset($pictures[0]) }}" alt="{{__('Exploitation - Le Gaulois') }}">
|
||||
@endif
|
||||
@php
|
||||
$pictures = [];
|
||||
if($breeder->picture1) {
|
||||
$pictures[] = $breeder->picture1;
|
||||
}
|
||||
if($breeder->picture2) {
|
||||
$pictures[] = $breeder->picture2;
|
||||
}
|
||||
if($breeder->picture3) {
|
||||
$pictures[] = $breeder->picture3;
|
||||
}
|
||||
@endphp
|
||||
@if(count($pictures) > 1)
|
||||
<!-- Slider -->
|
||||
<breeder-site-slider slides='@json($pictures)'></breeder-site-slider>
|
||||
@else
|
||||
<img src="{{ asset($pictures[0]) }}" alt="{{__('Exploitation - Le Gaulois') }}">
|
||||
@endif
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<!-- TODO : Maps -->
|
||||
|
||||
@include('front.ocb.googlemaps', ['ocbType' => $breeder->ocbType])
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@
|
|||
<p class="button-text">{{ __('Découvrer la volaille Oui C\'est Bon!') }}</p>
|
||||
</a>
|
||||
</section>
|
||||
{{-- TODO : Ajout de maps --}}
|
||||
</div>
|
||||
|
||||
<!-- TODO : Maps -->
|
||||
@endsection
|
||||
|
|
|
|||
20
resources/views/front/ocb/googlemaps.blade.php
Normal file
20
resources/views/front/ocb/googlemaps.blade.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<google-map-markers
|
||||
data-ocb-type='@json($ocbType)'>
|
||||
</google-map-markers>
|
||||
|
||||
@push('scriptsConstants')
|
||||
<script>
|
||||
window._locale = '{{ app()->getLocale() }}';
|
||||
window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
|
||||
window._asset = '{{ asset('') }}';
|
||||
window._routes = {
|
||||
"map.breeders": "{{ route('map.breeders') }}",
|
||||
"ocb.breeders": "{{ route('ocb.breeders', ['breeder' => '/']) }}"
|
||||
};
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('google.apiKey') }}&callback=initMap"></script>
|
||||
<script src="{{ asset('js/oms-min.js') }}"></script>
|
||||
@endpush
|
||||
|
|
@ -37,25 +37,6 @@
|
|||
<a href="{{ route('ocb.testimonials') }}">{{ __('En savoir +') }}</a>
|
||||
</div>
|
||||
</section>
|
||||
<google-map-markers
|
||||
data-ocb-type='@json($ocbType)'>
|
||||
</google-map-markers>
|
||||
@include('front.ocb.googlemaps', ['ocbType' => OCBType::poultry()])
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scriptsConstants')
|
||||
<script>
|
||||
window._locale = '{{ app()->getLocale() }}';
|
||||
window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
|
||||
window._asset = '{{ asset('') }}';
|
||||
window._routes = {
|
||||
"map.breeders": "{{ route('map.breeders') }}",
|
||||
"ocb.breeders": "{{ route('ocb.breeders', ['breeder' => '/']) }}"
|
||||
};
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('google.apiKey') }}&callback=initMap"></script>
|
||||
<script src="{{ asset('js/oms-min.js') }}"></script>
|
||||
@endpush
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue