From 65b9cf071fd80a9f83497f0ac38ac1c8735509e9 Mon Sep 17 00:00:00 2001
From: leosw <leo@lstronic.com>
Date: Sun, 8 Mar 2026 11:16:08 +0100
Subject: [PATCH] =?UTF-8?q?Correction=20de=20la=20page=20poi=20view=20sur?=
 =?UTF-8?q?=20ls=20=C3=A9crans=20=C3=A9troits?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/views/css/d.poi.css   | 49 +++++++++++++++++++-----------------
 public/views/d.poi.view.html | 30 ++++++----------------
 2 files changed, 34 insertions(+), 45 deletions(-)

diff --git a/public/views/css/d.poi.css b/public/views/css/d.poi.css
index 6957be5..3c443ad 100755
--- a/public/views/css/d.poi.css
+++ b/public/views/css/d.poi.css
@@ -26,7 +26,7 @@ html, body {
 }
 #slide-icon {
 	position: absolute;
-	left: 400px;
+	left: calc(50% - 26px);
 	top: -35px;
 	color: #000;
 	font-size: 60px;
@@ -510,7 +510,7 @@ form.form input[type="checkbox"]:checked + span:before {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    font-size: 19px; /* demandé */
+    font-size: 19px;
     font-weight: 600;
 }
 
@@ -518,7 +518,9 @@ form.form input[type="checkbox"]:checked + span:before {
 .poi-id-coords {
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 8px;
+    row-gap: 2px;
 }
 
 .poi-id-coords a {
@@ -528,7 +530,6 @@ form.form input[type="checkbox"]:checked + span:before {
 .poi-id-coords a:hover {
     text-decoration: underline;
 }
-
 .poi-id-elev {
     color: #333;
 }
@@ -633,44 +634,46 @@ form.form input[type="checkbox"]:checked + span:before {
  *****************************************/
 
 .bool-grid {
+    display: flex;
     margin: 20px 0 0 0;
     padding: 20px 15px;
     background: rgba(200, 220, 255, 0.25);
 	border-top: 1px solid #bbb;
 }
 
-.bool-row {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
+.bool-grid .bool-cell {
+    margin-right: 10px;
     text-align: center;
-    margin-bottom: 10px;
 }
 
-.bool-row.labels {
-    font-size: 16px;
-}
-
-.bool-label {
-    padding: 5px;
-}
-
-.bool-row.values {
-    margin-top: 5px;
+.bool-grid .bool-cell:last-child {
+    margin-right: 0;
 }
 
 .boolean-pill {
     display: inline-block;
     padding: 8px 12px;
+    margin-top: 5px;
     border-radius: 20px;
     font-weight: 700;
     font-size: 18px;
     background: white;
 }
 
-@media (max-width: 900px) {
-    .bool-row {
-        grid-auto-flow: row;
-        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+/**
+ * Utiliser flexbox pour s'adapter à la largeur de la page
+ */
+@media only screen and (max-width: 800px) {
+    .bool-grid {
+        flex-direction: column;
     }
-}
+    .bool-grid .bool-cell {
+        margin-right: 0;
+        margin-bottom: 10px;
+        width: 100%;
+    	text-align: left;
+    }
+    .bool-label, .bool-icon {
+    	display: inline-block;
+    }
+}
\ No newline at end of file
diff --git a/public/views/d.poi.view.html b/public/views/d.poi.view.html
index fc4667a..f1f931f 100644
--- a/public/views/d.poi.view.html
+++ b/public/views/d.poi.view.html
@@ -164,31 +164,17 @@
 							-1 => "<span class='boolean-pill boolean-unknown'>➖</span>"
 						];
 					?>
-					<div class="bool-grid">
 
-						<!-- Boolean labels -->
-						<div class="bool-row labels">
-							<?php foreach ($boolFields as $key => $label): ?>
-								<div class="bool-label"><?= $label ?></div>
-							<?php endforeach; ?>
+						<div class="bool-grid">
+						    <?php foreach ($boolFields as $key => $label): ?>
+						        <?php $icon = $boolIcons[$poiValues[$key] ?? 2]; ?>
+						        <div class="bool-cell">
+						            <div class="bool-label"><?= $label ?></div>
+						            <div class="bool-icon"><?= $icon ?></div>
+						        </div>
+						    <?php endforeach; ?>
 						</div>
-
-						<!-- Boolean values -->
-						<div class="bool-row values">
-							<?php foreach ($boolFields as $key => $label): ?>
-								<?php
-									$value = $poiValues[$key] ?? 2;
-									$icon = $boolIcons[$value];
-								?>
-								<div class="bool-cell">
-									<?= $icon ?>
-								</div>
-							<?php endforeach; ?>
-						</div>
-
-					</div>
 					<?php endif; ?>
-
 				</div>