From bed584f81f0941e3c3956c974d92b6aa79ff924d Mon Sep 17 00:00:00 2001
From: LaurentBlondel <laurent@zantetusken.fr>
Date: Thu, 23 Nov 2023 11:27:58 +0100
Subject: [PATCH] integration pages vertical home, table et tpl

---
 ui/src/main/resources/static/css/custom.css   |  33 +++-
 ui/src/main/resources/static/tpl_table.html   |  74 +++----
 .../templates/inc/vertical-table.html         |  57 +++---
 ui/src/main/resources/templates/index.html    |  24 +--
 .../resources/templates/vertical-home.html    | 185 +++++++-----------
 5 files changed, 177 insertions(+), 196 deletions(-)

diff --git a/ui/src/main/resources/static/css/custom.css b/ui/src/main/resources/static/css/custom.css
index 4e47fa0c..773f7831 100644
--- a/ui/src/main/resources/static/css/custom.css
+++ b/ui/src/main/resources/static/css/custom.css
@@ -1,4 +1,4 @@
-* {
+/** {
 	font-family: 'League Spartan', sans-serif!important;
 }
 .fa, .far, .fas {
@@ -7,7 +7,7 @@
 .fab {
 	font-family: "Font Awesome 5 Brands"!important;
   }
-
+*/
 
 /***********************************************
 CUSTOM
@@ -177,4 +177,33 @@ Xwiki css
 
 .expandright:focus {
 	padding: 0 0 0 16px;
+}
+
+
+.bg-gray-200 {
+	background-color: #f1efe7!important;
+}
+
+.btn-primary {
+	background-color: #1e851a!important;
+	border-color: #1e851a!important;
+}
+
+.text-gray .h4 {
+	color: #1e851a!important
+}
+/* bandeau séparateur */
+.bg-primary .text-white-50 {
+	color: #1e851a!important
+}
+/* bandeau séparateur */
+
+/* les titre avec la font spartan */
+h1[class^="h"],
+h2[class^="h"],
+h3[class^="h"],
+h4[class^="h"],
+h5[class^="h"],
+h6[class^="h"] {
+	font-family: 'League Spartan', sans-serif!important;
 }
\ No newline at end of file
diff --git a/ui/src/main/resources/static/tpl_table.html b/ui/src/main/resources/static/tpl_table.html
index f1b87d87..95e04208 100644
--- a/ui/src/main/resources/static/tpl_table.html
+++ b/ui/src/main/resources/static/tpl_table.html
@@ -1,47 +1,37 @@
 <div style="display:none">	
 	<div id="template-product-search">
-	
-			<div class="card shadow p-4">
-                    <div class="row align-items-center">
-                        <aside class="col-md-3">
-                            <a href="{{productUrl}}">
-                                <img src="{{imageUrl}}" alt="{{name}}">
-                            </a>
-                        </aside> <!-- col.// -->
-                        <div class="col-md-6">
-                            <div class="info-main">
-                                <a href="{{productUrl}}" class="h5 title">{{data.attributes.referentielAttributes.BRAND}} - {{name}}</a>
-                                <div class="d-flex my-3">
-                                    <span class="star fas fa-star text-warning me-1"></span> 
-                                    <span class="star fas fa-star text-warning me-1"></span> 
-                                    <span class="star fas fa-star text-warning me-1"></span> 
-                                    <span class="star fas fa-star text-warning me-1"></span> 
-                                    <span class="star fas fa-star text-warning"></span> 
-                                    <span class="badge badge-pill badge-gray ms-2">4.7</span>
-                                    <span class="small text-success ms-3"><span class="fas fa-shopping-cart me-1"></span>{{data.offersCount}} offre(s)</span>
-                                </div>
-                                <p>Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.</p>
-                            </div>
-                        </div> 
-                        <div class="col-12 col-md-3">
-                            <div class="d-flex align-items-center">
-                                <span class="h5 mb-0 text-danger me-2">
-                                    {{data.price.minPrice.price}} {{data.price.minPrice.currency}}
-                                </span>
-                            </div> <!-- info-price-detail // -->
+        <div class="row">
+            <article class="col-12 col-md-3">
+                <div class="card shadow">
+                    <div class="card-header bg-gray-200 border-0 text-center">
+                        <img src="{{imageUrl}}" alt="{{name}}">
+                    </div>
+                    <div class="card-body border-top border-gray-300">
+                        <a href="{{productUrl}}" class="h5">{{data.attributes.referentielAttributes.BRAND}} - {{name}}</a>
+                        <p class="h6 fw-light text-gray mt-2">
+                            Monitor your health. Track your workouts. Get the motivation you need to achieve your fitness goals. And stay connected to the people and information you care about.
+                        </p>
+                        <div class="d-flex mt-3">
+                            <span class="star fas fa-star text-warning me-1"></span> 
+                            <span class="star fas fa-star text-warning me-1"></span> 
+                            <span class="star fas fa-star text-warning me-1"></span> 
+                            <span class="star fas fa-star text-warning me-1"></span> 
+                            <span class="star fas fa-star text-warning"></span> 
+                            <span class="badge badge-pill badge-gray ms-2">4.7</span>
+                            <span class="small text-success ms-3">{{data.offersCount}} offre(s)</span>
+                        </div>
+                    </div>
+                    <div class="card-footer bg-gray-200 border-top border-gray-300 p-4">
+                        <div class="mb-3">
+                            <p class="h5 my-0 text-gray me-2">
+                                {{data.price.minPrice.price}} {{data.price.minPrice.currency}}
+                            </p>
                             <span class="text-success small"><span class="fas fa-shopping-cart me-1"></span>Compensation : {{data.price.minPrice.compensation}} {{data.price.minPrice.currency}}</span>
-                            <div class="d-grid gap-2 mt-4">
-                                <a class="btn btn-tertiary btn-sm" href="{{productUrl}}">
-                                    Details
-                                </a>
-                                <a href="#" class="btn btn-tertiary btn-sm"><span class="fa fa-heart me-1"></span> 
-                                    Acheter
-                                </a>
-                            </div>
-                            
-                        </div> 
-                    </div> 
-                </div>
-	</div>
+                        </div>
+                    </div>
+                </div> 
+            </article>
+	    </div>
+    </div>
 </div>
 
diff --git a/ui/src/main/resources/templates/inc/vertical-table.html b/ui/src/main/resources/templates/inc/vertical-table.html
index e80e0000..89717c44 100644
--- a/ui/src/main/resources/templates/inc/vertical-table.html
+++ b/ui/src/main/resources/templates/inc/vertical-table.html
@@ -1,42 +1,45 @@
 
-<table id="tableProducts" class="table compact">
+<div class="table-responsive-sm">
+    <table id="tableProducts" class="table">
         <thead>
             <tr>
-                <th>Nom</th>
-                <th>Marque</th>
-                <th>Eco-score</th>
-                <th>Prix</th>
-                <th>Offres</th>
+                <th><small>Nom</small></th>
+                <th><small>Marque</small></th>
+                <th><small>Eco-score</small></th>
+                <th><small>Prix</small></th>
+                <th><small>Offres</small></th>
                 
                 <th:block th:each="filter : ${products.customFilters}">
 	                <th th:text="${filter.key.name.get(siteLanguage)}"></th>            
                 </th:block>
-                
-                
             </tr>
         </thead>
         <tbody>
-            <tr th:each="p : ${products.data}" >
-               
-               
-                <td th:if="${p.model()}"><a th:text="${p.model()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></td>
-                <td th:unless="${p.model()}"><a th:text="${p.bestName()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></td>
-               
-               
-               
-                <td th:text="${p.brand()}"></td>
-                <td></td>
-                <td th:text="${p.bestPrice.price}"></td>
-                <td th:text="${p.offersCount}"></td>
-				
-                <th:block th:each="filter : ${products.customFilters}">
-	                <td th:if="${p.attributes.aggregatedAttributes.get(filter.key.key)}" th:text="${p.attributes.aggregatedAttributes.get(filter.key.key).value }"></td>            
-	                <td th:unless="${p.attributes.aggregatedAttributes.get(filter.key.key)}"></td>            
-
-                </th:block>
+            <tr>
+                <td>
+                    <div th:each="p : ${products.data}" >
+                        
+                            <p th:if="${p.model()}"><a th:text="${p.model()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></p>
+                            <p th:unless="${p.model()}"><a th:text="${p.bestName()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></p>
+                        
+                        
+                        
+                            <p th:text="${p.brand()}"></p>
+                            <p></p>
+                            <p th:text="${p.bestPrice.price}"></p>
+                            <p th:text="${p.offersCount}"></p>
+                            
+                            <th:block th:each="filter : ${products.customFilters}">
+                                <p th:if="${p.attributes.aggregatedAttributes.get(filter.key.key)}" th:text="${p.attributes.aggregatedAttributes.get(filter.key.key).value }"></p>            
+                                <p th:unless="${p.attributes.aggregatedAttributes.get(filter.key.key)}"></p>            
+                            </th:block>
 
+                       
+                    </div>
+                </td>
             </tr>
  
         </tbody>
 
-    </table>
\ No newline at end of file
+    </table>
+</div>
\ No newline at end of file
diff --git a/ui/src/main/resources/templates/index.html b/ui/src/main/resources/templates/index.html
index 624babd5..3d4564aa 100644
--- a/ui/src/main/resources/templates/index.html
+++ b/ui/src/main/resources/templates/index.html
@@ -71,9 +71,9 @@
 			</div>
 		</section>
 
-		<section class="bg-primary mt-4 text-center py-4">
-			<h1 class="mb-3 text-white-50">Consommons peu, consommons bien</h1>
-			<p class="lead text-white mb-0">Un coup de main éthique et ouvert pour amoindrir l'impact de votre shopping en ligne.</p>
+		<section class="bg-white mt-4 text-center py-4">
+			<h1 class="mb-3">Consommons peu, consommons bien</h1>
+			<p class="lead mb-0">Un coup de main éthique et ouvert pour amoindrir l'impact de votre shopping en ligne.</p>
 		</section>
        
 
@@ -155,9 +155,9 @@ <h2 class="h4 m-0">Data responsable</h2>
 
 		</div>
 
-		<section class="bg-black text-center py-4">
-			<h1 class="mb-3 text-white-50">Les chiffres clés</h1>
-			<p class="lead text-white mb-0">Avec animation, c'est plus funky</p>
+		<section class="bg-white mt-4 text-center py-4">
+			<h1 class="mb-3">Les chiffres clés</h1>
+			<p class="lead mb-0">Avec animation, c'est plus funky</p>
 		</section>
 
 	   <section class="container text-center py-4">
@@ -212,9 +212,9 @@ <h1 class="mb-3 text-white-50">Les chiffres clés</h1>
 			</div>
 	   </section>
 
-	   <section class="bg-black text-center py-4">
-			<h1 class="mb-3 text-white-50">Nos catégories évaluées</h1>
-			<p class="lead text-white mb-0">L'assurance de bien choisir</p>
+	   <section class="bg-white mt-4 text-center py-4">
+			<h1 class="mb-3">Nos catégories évaluées</h1>
+			<p class="lead mb-0">L'assurance de bien choisir</p>
 		</section>
 
 		<section class="container">
@@ -243,9 +243,9 @@ <h2 class="h5">
 		</section>
 
    
-		<section class="bg-black mt-4 text-center py-4">
-			<h1 class="mb-3 text-white-50">Notre philosophie : le bien commun</h1>
-			<p class="lead text-white mb-0">Découvrez nos valeurs et nos atouts</p>
+		<section class="bg-white mt-4 text-center py-4">
+			<h1 class="mb-3">Notre philosophie : le bien commun</h1>
+			<p class="lead mb-0">Découvrez nos valeurs et nos atouts</p>
 		</section>
 	   
 	   
diff --git a/ui/src/main/resources/templates/vertical-home.html b/ui/src/main/resources/templates/vertical-home.html
index 10d0c2c9..f07322f6 100644
--- a/ui/src/main/resources/templates/vertical-home.html
+++ b/ui/src/main/resources/templates/vertical-home.html
@@ -45,135 +45,94 @@
 	
     <main>	
   
-        <div class="section section-lg bg-gray-200">
-            <div class="container">
-
-				<div class="row">
-					<div class="col-12">
-						<!-- Carousel -->
-						<div id="Carousel2" class="carousel slide" data-ride="carousel">
-							<div class="carousel-inner">
-
-								<div class="carousel-item" th:each="p : ${products.data}">
-									<div th:if="${p.model()}">
-										<a>
-											<p th:text="${p.brand()}"></p>
-										</a>
-									</div>
-									<img class="d-none w-100" src="../../assets/img/carousel/image-2.jpg" alt="Second slide">
-								</div>
-								<div class="carousel-item d-none">
-									<img class="d-block w-100" src="../../assets/img/carousel/image-3.jpg" alt="Third slide">
-								</div>
-
-
-
-								<tr class="d-none" th:each="p : ${products.data}" >
-               
-               
-									<td th:if="${p.model()}"><a th:text="${p.model()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></td>
-									<td th:unless="${p.model()}"><a th:text="${p.bestName()}" th:href="'/'+${verticalPath}+ '/'+${p.names.name}"></a></td>
-								   
-								   
-								   
-									<td th:text="${p.brand()}"></td>
-									<td></td>
-									<td 
-									></td>
-									<td th:text="${p.offersCount}"></td>
-									
-									<th:block th:each="filter : ${products.customFilters}">
-										<td th:if="${p.attributes.aggregatedAttributes.get(filter.key.key)}" th:text="${p.attributes.aggregatedAttributes.get(filter.key.key).value }"></td>            
-										<td th:unless="${p.attributes.aggregatedAttributes.get(filter.key.key)}"></td>            
-					
-									</th:block>
-					
-								</tr>
-							</div>
-							<a class="carousel-control-prev" href="#Carousel2" role="button" data-bs-slide="prev">
-								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
-								<span class="sr-only">Previous</span>
-							</a>
-							<a class="carousel-control-next" href="#Carousel2" role="button" data-bs-slide="next">
-								<span class="carousel-control-next-icon" aria-hidden="true"></span>
-								<span class="sr-only">Next</span>
-							</a>
-						</div>
-						<!-- End of Carousel -->
-					</div>
-				</div>
+        <div class="section bg-gray-200">
+            <div class="container container-semi-fluid">
 
 				<!--/* Hero */-->						
-				<div class="row mb-2">							
-					<div class="card shadow">
-						<div class=" align-items-center">
-							
-								<div class="d-flex flex-wrap align-items-center row">
-			                        <div class="col-lg-2 text-center">
-			                                <img class="mt-2" width="150" th:src="${config.homeLogo.i18n(siteLanguage)}">
-			                        </div>
-			                        <span class="col-lg-10">
-			                                <h1 class="mt-2 text-center" th:text="${config.homeTitle.i18n(siteLanguage)}"></h1>
-			                                <div class="row p-2 mb-4"> 
-			                					<th:block th:with="path=${vertical} + '/welcome-header'">
-			                     					<th:block th:insert="~{inc/wiki.html}"></th:block>
-			                     				</th:block>
-			                				</div>		
-			                				
-			                        </span> 
-								</div>
-	                    </div>
+				<div class="row mb-3">							
+					<div class="">
+						<!--div class="col-lg-2 text-center">
+								<img class="mt-2" width="150" th:src="${config.homeLogo.i18n(siteLanguage)}">
+						</div-->
+						<h1 class="mb-3 text-center" th:text="${config.homeTitle.i18n(siteLanguage)}"></h1>
+
+						<p class="text-center">
+							<th:block th:with="path=${vertical} + '/welcome-header'">
+								<th:block th:insert="~{inc/wiki.html}"></th:block>
+							</th:block>
+						</p>
 					</div>
 				</div>
 						
-                <div class="row ">
+                <div class="container">
                 
-                	<!--/* Left column */-->                	
-                    <div class="col-lg-3 mb-3 mb-lg-0">
-                    
-                		<!--/* Guides */-->	
-						<div class="row card shadow mb-2">
-							<div class="card-header"><h2 class="h5">Les guides</h2></div>
-							<div class="card-body">
-								<ul class="list-group list-group-flush price-list">
-									<li class="list-group-item border-0"><img height="16" width="16" class="me-2" src="/icon/fnac.com" title="icône fnac"><a href="http://nudger.fr/televiseurs/impact-ecologique-televiseurs">Téléviseurs : quel impact écologique ?</a> </li>
-									<li class="list-group-item border-0"><span class="fas fa-box"></span><a href="https://nudger.fr/televiseurs/comment-trouver-televiseur-ecologique">Bien choisir sa TV ! </a></li>
-									<li class="list-group-item border-0"><span class="fas fa-clock"></span><a href="https://nudger.fr/televiseurs/quelle-difference-qled-oled">OLED, QLED, LCD : Les différences</a> </li>
-								
-								</ul>
-							</div>
-						</div>                    
-                                        
-				        <!--/* Ecological Filters */-->	
-						<div class="row card shadow mb-2 border-success text-secondary">
-							<div class="card-header"><h2 class="h5">Eco-Filtres</h2></div>
-							<div class="card-body">
-                    			<th:block th:insert="~{inc/vertical-filters-eco.html}"></th:block>
-								
+                	<hr>
+					<div class="mb-3">
+						<button class="btn btn-outline-primary mb-sm-3 mb-lg-0" type="button" data-bs-toggle="modal" data-bs-target="#modal-guides">Les guides</button>
+						<button class="btn btn-outline-primary mb-sm-3 mb-lg-0 mx-md-3" type="button" data-bs-toggle="modal" data-bs-target="#modal-eco-filtres">Eco-Filtres</button>
+						<button class="btn btn-outline-primary mb-lg-0 mb-sm-3" type="button" data-bs-toggle="modal" data-bs-target="#modal-filtres">Filtres</button>
+					</div>  
+					<hr>		
+					<div class="modal fade" id="modal-guides" tabindex="-1" role="dialog" aria-labelledby="modal-guides" aria-hidden="true">
+						<div class="modal-dialog modal-dialog-centered" role="document">
+							<div class="modal-content">
+								<div class="modal-header">
+									<h2 class="h6 modal-title">Les guides</h2>
+									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+								</div>
+								<div class="modal-body">
+									<ul class="list-group list-group-flush price-list">
+										<li class="list-group-item border-0"><img height="16" width="16" class="me-2" src="/icon/fnac.com" title="icône fnac"><a href="http://nudger.fr/televiseurs/impact-ecologique-televiseurs">Téléviseurs : quel impact écologique ?</a> </li>
+										<li class="list-group-item border-0"><span class="fas fa-box"></span><a href="https://nudger.fr/televiseurs/comment-trouver-televiseur-ecologique">Bien choisir sa TV ! </a></li>
+										<li class="list-group-item border-0"><span class="fas fa-clock"></span><a href="https://nudger.fr/televiseurs/quelle-difference-qled-oled">OLED, QLED, LCD : Les différences</a> </li>
+									</ul>
+								</div>
+								<div class="modal-footer">
+									<button type="button" class="btn btn-link text-gray ms-auto" data-bs-dismiss="modal">Close</button>
+								</div>
 							</div>
 						</div>
+					</div>
 
-				        <!--/* Classical Filters */-->							
-						<div class="row card shadow mb-2">
-							<div class="card-header"><h2 class="h5">Filtres</h2></div>
-							<div class="card-body">
-                    			<th:block th:insert="~{inc/vertical-filters.html}"></th:block>
-								
+					<div class="modal fade" id="modal-eco-filtres" tabindex="-1" role="dialog" aria-labelledby="modal-eco-filtres" aria-hidden="true">
+						<div class="modal-dialog modal-dialog-centered" role="document">
+							<div class="modal-content">
+								<div class="modal-header">
+									<h2 class="h6 modal-title">Eco-Filtres</h2>
+									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+								</div>
+								<div class="modal-body">
+									<th:block th:insert="~{inc/vertical-filters-eco.html}"></th:block>
+								</div>
+								<div class="modal-footer">
+									<button type="button" class="btn btn-link text-gray ms-auto" data-bs-dismiss="modal">Close</button>
+								</div>
 							</div>
 						</div>
-						
-						
-						  				        					
 					</div>
 
-					<!--/* Right column */-->
-					<div class="col-lg-9">
-						<div class="ms-1 row card shadow">
-							<th:block th:insert="~{inc/vertical-table.html}"></th:block>
+					<div class="modal fade" id="modal-filtres" tabindex="-1" role="dialog" aria-labelledby="modal-filtres" aria-hidden="true">
+						<div class="modal-dialog modal-dialog-centered" role="document">
+							<div class="modal-content">
+								<div class="modal-header">
+									<h2 class="h6 modal-title">Filtres</h2>
+									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+								</div>
+								<div class="modal-body">
+									<th:block th:insert="~{inc/vertical-filters.html}"></th:block>
+								</div>
+								<div class="modal-footer">
+									<button type="button" class="btn btn-link text-gray ms-auto" data-bs-dismiss="modal">Close</button>
+								</div>
+							</div>
 						</div>
-
 					</div>
 				</div>
+
+				<!--/* Right column */-->
+				<div class="col-12 mb-3">
+					<th:block th:insert="~{inc/vertical-table.html}"></th:block>
+				</div>
         	</div>
        	</div>
     </main>