spotlight news + add news cover bg images

diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 00c1726e541cf36b79fdfaf5820c976c42f52c81..fee95d8d22896bb44cea5242eaf5be124fb0f6fe 100644 (file)
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -15,7 +15,7 @@ class HomeController extends Controller
      */
     public function index()
     {
-        \View::share('last_pdf', PdfFile::query()->orderByDesc('id')->take(4)->get());
+        \View::share('last_pdf', PdfFile::query()->orderByDesc('id')->take(7)->get());
         return view('home.index');
     }
 

diff --git a/app/View/Components/Cover.php b/app/View/Components/Cover.php
new file mode 100644 (file)
index 0000000..8970795
--- /dev/null
+++ b/app/View/Components/Cover.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\View\Components;
+
+use App\PdfFile;
+use Illuminate\View\Component;
+
+class Cover extends Component
+{
+    public PdfFile $pdf;
+    public string $type;
+    public string $class;
+    public string $file;
+
+    /**
+     * Create a new component instance.
+     *
+     * @param $pdf
+     * @param $type
+     */
+    public function __construct($pdf, $type)
+    {
+        //
+        $this->pdf = $pdf;
+        $this->type = $type;
+        $this->class = "cover-pile-$type";
+        $this->file = asset("img/cover-bg/pile-mag-$type.png");
+
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\View\View|string
+     */
+    public function render()
+    {
+        return view('components.cover');
+    }
+}

diff --git a/public/css/app.css b/public/css/app.css
index d9690bea27aec913ca37f94c515cfd6d1c9c9592..3d2479a87715a2de0db57332163c15e5902399ab 100644 (file)
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -11109,15 +11109,44 @@ mark.mark {
   margin: 1em auto;
 }
 
+.highlight-purple {
+  color: white;
+  background-color: #AD5ED3;
+}
+
+.purple {
+  color: #AD5ED3;
+}
+
+.highlight-red,
+h1 {
+  color: white;
+  background-color: #d04d4a;
+}
+
+.red {
+  color: #d04d4a;
+}
+
 h1 {
   text-transform: uppercase;
-  margin: auto;
+  margin: auto auto 2rem;
   text-align: center;
   display: table;
   font-size: x-large;
-  padding: 2px 4px;
-  color: white;
-  background-color: #d04d4a;
+  padding: 6px 8px 4px;
+}
+
+h2 {
+  font-weight: 500;
+  font-size: medium;
+  text-transform: uppercase;
+  color: #074e9c;
+}
+
+h2.bold {
+  font-weight: bold;
+  font-size: large;
 }
 
 ul.leaders {
@@ -11155,11 +11184,20 @@ div.cover img.cover-bg {
   width: 100%;
 }
 
+div.cover.cover-pile-2 img.cover-over {
+  width: 71%;
+  left: 15%;
+  top: 3%;
+}
+
+div.cover.cover-pile-3 img.cover-over {
+  width: 60%;
+  left: 20%;
+  top: 5%;
+}
+
 div.cover img.cover-over {
   position: absolute;
-  width: 56%;
-  left: 22%;
-  top: 3%;
 }
 
 div.cover p {
@@ -11196,8 +11234,6 @@ div.pill-box div {
 
 div.pill-box div h2 {
   padding: 0 30px;
-  font-weight: bold;
-  font-size: large;
   color: #d04d4a;
   text-align: center;
 }
@@ -11217,3 +11253,13 @@ div.pill-box div > a {
   display: block;
 }
 
+.spotlight-news {
+  background-color: rgba(7, 78, 156, 0.25);
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.spotlight-news > div {
+  font-size: small;
+}
+

diff --git a/public/img/cover-bg/pile-mag-2.png b/public/img/cover-bg/pile-mag-2.png
new file mode 100644 (file)
index 0000000..2cfa6a2
Binary files /dev/null and b/public/img/cover-bg/pile-mag-2.png differ

diff --git a/public/img/cover-bg/pile-mag-3.png b/public/img/cover-bg/pile-mag-3.png
new file mode 100644 (file)
index 0000000..c76f59c
Binary files /dev/null and b/public/img/cover-bg/pile-mag-3.png differ

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index c6ee5dbcb05bda08dbfb985da2c4f255be813364..c3c708b3829bc0081d2f28c10c85688e952d3ac5 100644 (file)
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -21,22 +21,53 @@
 }
 
 
+//COLORS
+.highlight-purple {
+    color: white;
+    background-color: $psq_purple;
+}
+
+.purple {
+    color: $psq_purple;
+}
+
+.highlight-red {
+    color: white;
+    background-color: $psq_red;
+}
+
+.red {
+    color: $psq_red;
+}
 
 //HEADERS
 
 h1 {
+    @extend .highlight-red;
     text-transform: uppercase;
-    margin: auto;
+    margin: auto auto 2rem;
     text-align: center;
     display: table;
     font-size: x-large;
-    padding: 2px 4px;
+    padding: 6px 8px 4px;
 
-    color: white;
-    background-color: $psq_red;
 }
 
+h2 {
+    font-weight: 500;
+    font-size: medium;
+    text-transform: uppercase;
+    color: $psq_blue;
+}
 
+h2.bold {
+    font-weight: bold;
+    font-size: large;
+}
+
+h3 {
+
+}
 
 //TITLE DOTS
 
@@ -90,11 +121,26 @@ div.cover {
         width: 100%;
     }
 
+
+
+    &.cover-pile-2 {
+        img.cover-over {
+            width: 71%;
+            left: 15%;
+            top: 3%;
+        }
+    }
+
+    &.cover-pile-3 {
+        img.cover-over {
+            width: 60%;
+            left: 20%;
+            top: 5%;
+        }
+    }
+
     img.cover-over {
         position: absolute;
-        width: 56%;
-        left: 22%;
-        top: 3%;
     }
 
     p {
@@ -134,8 +180,6 @@ div.pill-box {
 
         h2 {
             padding: 0 30px;
-            font-weight: bold;
-            font-size: large;
             color: $psq_red;
             text-align: center;
         }
@@ -159,3 +203,18 @@ div.pill-box {
     }
 
 }
+
+
+//Spotlight news
+
+.spotlight-news {
+
+    background-color: rgba($psq_blue, 0.25);
+    padding: 0.5rem;
+    margin-bottom: 1rem;
+
+
+    > div {
+        font-size: small;
+    }
+}

diff --git a/resources/views/ad_campaigns.blade.php b/resources/views/ad_campaigns.blade.php
index e0862b16c4cc2023400792b9f271fa0bad66a264..8a5806a62f6f15d9824d781e3898734eee0c8749 100644 (file)
--- a/resources/views/ad_campaigns.blade.php
+++ b/resources/views/ad_campaigns.blade.php
@@ -2,6 +2,12 @@
 
 @section('content')
 <div class="container">
+    <h1 class="highlight-purple">CAMPAGNES & COMMUNICATION DES ACTEURS DE LA SANTÉ</h1>
+
+    <ul class="leaders">
+        <li><span>MARKETING & COM : LES CAMPAGNES DE LA SEMAINE</span></li>
+    </ul>
+
     <campaign-instant-search></campaign-instant-search>
 </div>
 @endsection

diff --git a/resources/views/components/cover.blade.php b/resources/views/components/cover.blade.php
index c854276365cebb18a3e865295aa9ee8c384a13e4..adacbed33d9ca98ef42a84cc69b6d984a428588e 100644 (file)
--- a/resources/views/components/cover.blade.php
+++ b/resources/views/components/cover.blade.php
@@ -1,5 +1,5 @@
-<div class="cover">
-    <img class="cover-bg" src="{{asset('img/cover-bg-center.png')}}" alt="">
+<div class="cover {{$class}}">
+    <img class="cover-bg" src="{{$file}}" alt="">
     <img class="cover-over" src="{{$pdf->coverUrl}}" alt="">
     <p>{{$pdf->title}} - {{$pdf->created_at->format('d/m/Y')}}</p>
 </div>

diff --git a/resources/views/components/pill-box.blade.php b/resources/views/components/pill-box.blade.php
index d5493d9d66d5cfd1f0f8fcaa92694958bcec2d62..46cb6e0f2823133379688935ebf2b98b7d16c9d6 100644 (file)
--- a/resources/views/components/pill-box.blade.php
+++ b/resources/views/components/pill-box.blade.php
@@ -1,7 +1,7 @@
 <div class="pill-box">
     <img src="{{asset('img/pill-icon.svg')}}" alt="Pill Icon" class="pill-icon">
     <div>
-        <h2>{{$title}}</h2>
+        <h2 class="bold">{{$title}}</h2>
         <p>{{$slot}}</p>
         <a href="{{$link}}">Cliquez-ici</a>
     </div>

diff --git a/resources/views/components/spotlight-news.blade.php b/resources/views/components/spotlight-news.blade.php
new file mode 100644 (file)
index 0000000..b469070
--- /dev/null
+++ b/resources/views/components/spotlight-news.blade.php
@@ -0,0 +1,6 @@
+<div class="spotlight-news">
+    <h2>{{$title}}</h2>
+    <div>
+        {{$slot}}
+    </div>
+</div>

diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
index 4765dda441bdf4caef4792ac4b225f7837aaed6a..af058c603b2118ad7a76b185cf8596e3c4ca6c7d 100644 (file)
--- a/resources/views/home/index.blade.php
+++ b/resources/views/home/index.blade.php
@@ -4,13 +4,13 @@
 <div class="container">
 
     <h1>L'actualité à la une de notre quotidien</h1>
-    <div class="row justify-content-center pt-5">
+    <div class="row justify-content-center pt-3">
         <div class="col-sm-4">
             <ul class="leaders">
                 <li><span>à la une aujourd'hui</span></li>
             </ul>
 
-            <x-cover :pdf="$last_pdf->first()">
+            <x-cover :pdf="$last_pdf->first()" type="3">
             </x-cover>
         </div>
 
@@ -23,7 +23,7 @@
             <div class="row">
                 @foreach($last_pdf->slice(1, 3) as $pdf)
                     <div class="col-sm-4">
-                        <x-cover :pdf="$pdf">
+                        <x-cover :pdf="$pdf" type="2">
                         </x-cover>
 
                     </div>
@@ -35,6 +35,12 @@
     </div>
     <div class="row justify-content-center pt-5">
         <div class="col-sm-4">
+            <x-spotlight-news title="À SEULEMENT J+1 DAVID LOEW NOUVEAU">
+                <ul>
+                    <li>Nouveau Boss d’IPSEN face à la presse</li>
+                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
+                </ul>
+            </x-spotlight-news>
 
         </div>
         <div class="col-sm-8">
@@ -43,6 +49,16 @@
 et du médicament
 
             </x-pill-box>
+
+            <div class="row mt-3">
+                @foreach($last_pdf->slice(4, 3) as $pdf)
+                    <div class="col-sm-4">
+                        <x-cover :pdf="$pdf" type="2">
+                        </x-cover>
+
+                    </div>
+                @endforeach
+            </div>
         </div>
 
     </div>