From d8798fbfad4dfaec74ef8fbd0915b26e2c869190 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Sun, 2 May 2021 14:34:39 +0200
Subject: [PATCH] OCB breeder add missing parts + responsive

---
 app/Http/Controllers/OCBController.php        |   3 +-
 .../fo/BreederSiteSliderComponent.vue         | 102 +++++++++++-------
 resources/sass/front/pages/ocb/_breeder.scss  |  11 +-
 resources/views/front/ocb/breeder.blade.php   |  34 +++---
 resources/views/front/ocb/egg.blade.php       |   3 +-
 .../views/front/ocb/googlemaps.blade.php      |  20 ++++
 resources/views/front/ocb/poultry.blade.php   |  21 +---
 7 files changed, 110 insertions(+), 84 deletions(-)
 create mode 100644 resources/views/front/ocb/googlemaps.blade.php

diff --git a/app/Http/Controllers/OCBController.php b/app/Http/Controllers/OCBController.php
index cf44b6da..9897f7ea 100644
--- a/app/Http/Controllers/OCBController.php
+++ b/app/Http/Controllers/OCBController.php
@@ -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()
diff --git a/resources/js/components/fo/BreederSiteSliderComponent.vue b/resources/js/components/fo/BreederSiteSliderComponent.vue
index 4c26c816..7ae2c2ea 100644
--- a/resources/js/components/fo/BreederSiteSliderComponent.vue
+++ b/resources/js/components/fo/BreederSiteSliderComponent.vue
@@ -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>
diff --git a/resources/sass/front/pages/ocb/_breeder.scss b/resources/sass/front/pages/ocb/_breeder.scss
index 43dfc7a8..b3cbf372 100644
--- a/resources/sass/front/pages/ocb/_breeder.scss
+++ b/resources/sass/front/pages/ocb/_breeder.scss
@@ -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;
     }
 }
 
diff --git a/resources/views/front/ocb/breeder.blade.php b/resources/views/front/ocb/breeder.blade.php
index 74c3323f..8e55942e 100644
--- a/resources/views/front/ocb/breeder.blade.php
+++ b/resources/views/front/ocb/breeder.blade.php
@@ -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
diff --git a/resources/views/front/ocb/egg.blade.php b/resources/views/front/ocb/egg.blade.php
index 93b82fed..43b78d1e 100644
--- a/resources/views/front/ocb/egg.blade.php
+++ b/resources/views/front/ocb/egg.blade.php
@@ -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
diff --git a/resources/views/front/ocb/googlemaps.blade.php b/resources/views/front/ocb/googlemaps.blade.php
new file mode 100644
index 00000000..ddb21a6b
--- /dev/null
+++ b/resources/views/front/ocb/googlemaps.blade.php
@@ -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
diff --git a/resources/views/front/ocb/poultry.blade.php b/resources/views/front/ocb/poultry.blade.php
index e1f88521..1e8297a1 100644
--- a/resources/views/front/ocb/poultry.blade.php
+++ b/resources/views/front/ocb/poultry.blade.php
@@ -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