From b8a24136e848b7dab2198f034c77b07c37c74b36 Mon Sep 17 00:00:00 2001
From: Nicolas Demangeat <nicolas.demangeat@ldc.fr>
Date: Wed, 24 Apr 2024 14:20:50 +0200
Subject: [PATCH] update hotnews front display in homepage

---
 resources/sass/fo/pages/home.scss             |  4 ++
 resources/views/fo/pages/home.blade.php       |  4 +-
 .../views/fo/partials/hot-news.blade.php      | 38 ++++++++++---------
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/resources/sass/fo/pages/home.scss b/resources/sass/fo/pages/home.scss
index 8bdfa69c..c40147f6 100644
--- a/resources/sass/fo/pages/home.scss
+++ b/resources/sass/fo/pages/home.scss
@@ -1,4 +1,8 @@
 #home {
+    .hot-news-content{
+        width: 250px;
+    }
+
     #hot-news-desktop{
         .wood-background{
             height: 22rem;
diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php
index 22fd023d..6beb6e4d 100644
--- a/resources/views/fo/pages/home.blade.php
+++ b/resources/views/fo/pages/home.blade.php
@@ -8,7 +8,7 @@
     <section id="home">
         {{-- HOT NEWS --}}
         <div @class([
-            'top-50 end-0 translate-middle-y position-fixed z-3 bg-white d-none d-xl-block',
+            'top-50 end-0 translate-middle-y position-fixed z-3 bg-white d-none d-xl-block line-border-medium py-3',
             'd-none' => cache()->get('hotNewsIsDisplayed')
         ]) id="hot-news">
             <div id="hot-news-loader" class="bg-primary bg-opacity-50 position-absolute w-100 h-100 top-0 start-0 z-2">
@@ -18,7 +18,7 @@
                     </div>
                 </div>
             </div>
-            <button id="close-hot-news" class="btn-close position-absolute start-0 top-0" aria-label="Close"></button>
+            <button id="close-hot-news" class="btn-close position-absolute start-0 top-0 pt-3" aria-label="Close"></button>
             @include('fo.partials.hot-news')
         </div>
         {{-- MAIN SLIDES --}}
diff --git a/resources/views/fo/partials/hot-news.blade.php b/resources/views/fo/partials/hot-news.blade.php
index 92703e43..4d1f3967 100644
--- a/resources/views/fo/partials/hot-news.blade.php
+++ b/resources/views/fo/partials/hot-news.blade.php
@@ -1,30 +1,32 @@
-<div class="container-fluid">
-    <div class="row p-4">
-        <div class="col-6">
+<div class="container-fluid hot-news-content">
+    <div class="row pt-2">
+        <div class="col-4 d-flex align-items-center justify-content-center">
             {{-- FIXME: changer l'image pour l'image du model news ainsi que le texte --}}
-            <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/tmp/nuggets.png') }}" alt="">
+            <img class="img-fluid w-100" src="{{ Vite::asset('resources/assets/images/tmp/nuggets.png') }}" alt="">
         </div>
-        <div class="col-6 text-center">
-            LOREM IPSUM
-        </div>
-    </div>
-    <hr>
-    <div class="row p-4">
-        <div class="col-6">
-            {{-- FIXME: changer l'image pour l'image du model news ainsi que le texte --}}
-            <img class="img-fluid" src="{{ Vite::asset('resources/assets/images/tmp/nuggets.png') }}" alt="">
-        </div>
-        <div class="col-6 text-center">
-            LOREM IPSUM
+        <div class="col-8">
+            <div class="mb-1"><span class="text-bg-quad px-1">tag actu</span></div>
+            <div>titre de la news</div>
         </div>
     </div>
     <hr>
     <div class="row">
-        <div class="col-8 rotate-left-5 f-bakerie-rough fs-4 fw-bolder">
+        <div class="col-4 d-flex align-items-center justify-content-center">
+            {{-- FIXME: changer l'image pour l'image du model news ainsi que le texte --}}
+            <img class="img-fluid w-100" src="{{ Vite::asset('resources/assets/images/tmp/nuggets.png') }}" alt="">
+        </div>
+        <div class="col-8">
+            <div class="mb-1"><span class="text-bg-quad px-1">tag actu</span></div>
+            <div>titre de la news qui risque de prendre de la place alors j'écris un grand texte pour simuler ça</div>
+        </div>
+    </div>
+    <hr>
+    <div class="row">
+        <div class="col-6 rotate-left-5 f-bakerie-rough fs-4 fw-bolder">
             {{ $hotNewsSettings->value['text'] }}
         </div>
     </div>
-    <div class="row ps-4 pe-4 pb-4 pt-2">
+    <div class="row py-2">
         <div class="col-12 text-center">
             <img class="img-fluid" src="{{ asset($hotNewsSettings->value['picture']) }}" alt="{{ $hotNewsSettings->value['picture_alt'] }}" title="{{ $hotNewsSettings->value['picture_title'] }}">
         </div>