leo/kabano
1
0
Fork 0
Code Issues Pull Requests Releases Activity

View of a POI is working fine

Browse Source
This commit is contained in:
leosw
2026-01-18 19:40:59 +01:00
parent d2b4f38f0b
commit 0f502d6536
5 changed files with 302 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
views/css/d.poi.css
View File

@@ -467,66 +467,112 @@ form.form input[type="checkbox"]:checked + span:before {
}
}
/*****************************************
* CHAMPS GÉNÉRIQUES
*****************************************/
/* Ligne principale : coordonnées + type */
.poi-id-main {
.field {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 19px; /* demandé */
flex-direction: column;
gap: 4px;
padding-bottom: 12px;
}
.field > label {
font-weight: 600;
font-size: 17px;
}
/* Coordonnées */
.poi-id-coords {
display: flex;
align-items: center;
gap: 8px;
/*****************************************
* TEXTES LONGS (t_)
*****************************************/
.field-t .field-value {
padding: 10px 12px;
font-size: 15px;
}
.poi-id-coords a {
color: #0055aa;
text-decoration: none;
}
.poi-id-coords a:hover {
text-decoration: underline;
}
/*****************************************
* NOMBRES ET LIENS EN LIGNE (n_ et l_)
*****************************************/
.poi-id-elev {
color: #333;
}
/* Type */
.poi-id-type {
display: flex;
align-items: center;
/* Label + valeur sur une seule ligne */
.field-n,
.field-l {
flex-direction: row;
align-items: baseline;
gap: 6px;
}
/* Label discret */
.poi-id-label {
font-weight: 500;
color: #444;
/* On enlève le padding bas qui faisait “bloc” */
.field-n,
.field-l {
padding-bottom: 4px;
}
/* Dates en petit */
.poi-id-dates {
font-size: 15px; /* demandé */
color: #555;
display: flex;
gap: 20px;
/* Valeur inline */
.inline-value {
display: inline-block;
font-size: 15px;
color: #222;
}
/* Mobile */
@media (max-width: 700px) {
.poi-id-main {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.poi-id-dates {
flex-direction: column;
gap: 2px;
/* Liens */
.inline-value a {
color: #1a5ad7;
font-weight: 600;
text-decoration: none;
}
.inline-value a:hover {
text-decoration: underline;
}
/*****************************************
* Booleans grid in poi view
*****************************************/
.bool-grid {
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;
text-align: center;
margin-bottom: 10px;
}
.bool-row.labels {
font-weight: 600;
font-size: 16px;
}
.bool-label {
padding: 5px;
}
.bool-row.values {
margin-top: 5px;
}
.boolean-pill {
display: inline-block;
padding: 8px 12px;
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));
}
}

105
views/d.poi.view.html
View File

@@ -75,33 +75,94 @@
</span>
<? } ?>
<br>
<br>
<h2>Description</h2>
<div class="poi-description">
<?=$poi->content_html?>
</div>
<?php
$fields = $poi_types[$poi->poi_type][5];
$values = $poi->parameters ?? [];
<hr>
// Séparer les booléens des autres champs
$bool_fields = [];
$other_fields = [];
<h2 id="abstract_title">Informations générales</h2>
<p id="abstract">
<?=$poi_types[$poi->poi_type][4] ?? ""?>
</p>
foreach ($fields as $key => $label) {
if ($key[0] === 'b') {
$bool_fields[$key] = $label;
} else {
$other_fields[$key] = $label;
}
}
?>
<div id="specific_form" class="view-mode">
<!-- AUTRES CHAMPS (texte, nombre, lien) -->
<?php foreach ($other_fields as $key => $label): ?>
<?php
$value = $values[$key] ?? null;
$type = $key[0];
?>
<div class="field field-<?= $type ?>">
<label><?= $label ?></label>
<?php if ($type === 'n'): ?>
<span class="inline-value"><?= $value !== null ? $value : "<em>—</em>" ?></span>
<?php elseif ($type === 't'): ?>
<div class="field-value">
<?= $value ? nl2br(htmlspecialchars($value)) : "<em>Aucune information.</em>" ?>
</div>
<?php elseif ($type === 'l'): ?>
<span class="inline-value">
<?php if ($value): ?>
<a href="<?= htmlspecialchars($value) ?>" target="_blank"><?= $value ?></a>
<?php else: ?>
<em>—</em>
<?php endif; ?>
</span>
<?php endif; ?>
</div>
<?php endforeach; ?>
<!-- TABLEAU DES BOOLÉENS -->
<?php if (!empty($bool_fields)): ?>
<div class="bool-grid">
<!-- Ligne des labels -->
<div class="bool-row labels">
<?php foreach ($bool_fields as $key => $label): ?>
<div class="bool-label"><?= $label ?></div>
<?php endforeach; ?>
</div>
<!-- Ligne des valeurs -->
<div class="bool-row values">
<?php foreach ($bool_fields as $key => $label): ?>
<?php
$value = $values[$key] ?? -1;
$icon = [
1 => "<span class='boolean-pill boolean-yes'>✔️</span>",
0 => "<span class='boolean-pill boolean-no'>❌</span>",
-1 => "<span class='boolean-pill boolean-unknown'>❓</span>"
][$value];
?>
<div class="bool-cell">
<?= $icon ?>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
<h2>Caractéristiques</h2>
<div id="specific_form">
<? if (!empty($poi->parameters)) { ?>
<? foreach ($poi->parameters as $key => $value) { ?>
<div class="flex_line poi_param">
<label><strong><?=$key?></strong></label>
<span><?=$value?></span>
</div>
<? } ?>
<? } else { ?>
<p>Aucune information spécifique.</p>
<? } ?>
</div>
<? if ($poi->is_commentable == 't') { ?>
<h2>Commentaires</h2>