refactor: relocate documents and linked assets to sidebar and update card styling in asset detail views

loko/assets/templates/assets/detail_generic.html

@@ -55,6 +55,44 @@
     input[type="number"][data-coordinate] {
         font-variant-numeric: tabular-nums;
     }
+
+    /* Accentuation des bordures de cartes pour meilleure distinction */
+    #asset-detail-container .card {
+        border: 1px solid #b8c5d3;
+        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+        border-radius: 8px;
+        overflow: hidden;
+    }
+    #asset-detail-container .card-header {
+        border-bottom: 1px solid #b8c5d3;
+        background-color: #f8fafc;
+    }
+
+    /* Adoucissement des lignes alternées des tables (stripes très clairs et élégants) */
+    #asset-detail-container .table-striped {
+        --bs-table-striped-bg: #f8fafc;
+        --bs-table-accent-bg: #f8fafc;
+    }
+    #asset-detail-container .table-striped > tbody > tr:nth-of-type(odd) > * {
+        --bs-table-bg-type: #f8fafc;
+        --bs-table-accent-bg: #f8fafc;
+        background-color: #f8fafc !important;
+        box-shadow: inset 0 0 0 9999px #f8fafc !important;
+    }
+    #asset-detail-container .table-striped > tbody > tr:nth-of-type(even) > * {
+        --bs-table-bg-type: #ffffff;
+        --bs-table-accent-bg: #ffffff;
+        background-color: #ffffff !important;
+        box-shadow: inset 0 0 0 9999px #ffffff !important;
+    }
+    #asset-detail-container .table th {
+        color: #475569;
+        font-weight: 500;
+        border-color: #e2e8f0;
+    }
+    #asset-detail-container .table td {
+        border-color: #e2e8f0;
+    }
 </style>
 {% endblock head %}
 
@@ -497,8 +535,10 @@
             </div>
             {% endblock main_asset_content %}
 
+            {% block asset_documents_block %}
             <!-- Documents associés -->
             {% asset_documents asset %}
+            {% endblock asset_documents_block %}
 
             <!-- Blocs supplémentaires (extensible par les templates spécifiques) -->
             {% block extra_blocks %}{% endblock extra_blocks %}
@@ -555,6 +595,7 @@
             </script>
             {% endif %}
 
+            {% block linked_assets_block %}
             <!-- Assets liés (parents puis enfants) -->
             {% get_asset_parents asset as parent_groups %}
             {% get_asset_children_tree asset as children_tree %}
@@ -581,6 +622,7 @@
                 </div>
             </div>
             {% endif %}
+            {% endblock linked_assets_block %}
 
             <!-- Historique des remplacements -->
             {% if asset_replacements and asset_replacements|length > 1 %}
@@ -754,6 +796,9 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Blocs supplémentaires en bas de colonne droite -->
+            {% block side_bottom_cards %}{% endblock side_bottom_cards %}
         </div>
     </div>
 

loko/assets/templates/assets/naturetree_detail.html

@@ -155,7 +155,7 @@
 {% block main_asset_content %}
 
 {# ── CARTE 1 : IDENTITÉ DE L'ARBRE ── #}
-<div class="card mb-3 shadow-sm border-0">
+<div class="card mb-3 shadow-sm">
     <div class="card-header bg-light d-flex align-items-center justify-content-between">
         <h5 class="mb-0 fs-6 fw-bold" style="color: var(--brand-color);">
             <i class="bi bi-info-circle text-primary me-2"></i>{% translate "Identité & Informations générales" %}
@@ -352,7 +352,7 @@
 
 
 {# ── CARTE 2 : DENDROMÉTRIE & DIMENSIONS ── #}
-<div class="card mb-3 shadow-sm border-0">
+<div class="card mb-3 shadow-sm">
     <div class="card-header bg-light">
         <h5 class="mb-0 fs-6 fw-bold" style="color: var(--brand-color);">
             <i class="bi bi-rulers text-success me-2"></i>{% translate "Fiche dendrométrique & Dimensions" %}
@@ -489,7 +489,7 @@
 
 
 {# ── CARTE 3 : DIAGNOSTIC SANITAIRE & SÉCURITÉ ── #}
-<div class="card mb-3 shadow-sm border-0">
+<div class="card mb-3 shadow-sm">
     <div class="card-header bg-light d-flex align-items-center justify-content-between">
         <h5 class="mb-0 fs-6 fw-bold" style="color: var(--brand-color);">
             <i class="bi bi-shield-check text-warning me-2"></i>{% translate "Diagnostic sanitaire & Sécurité" %}
@@ -666,7 +666,7 @@
 
 
 {# ── CARTE 4 : IMPLANTATION & CONDUITE DE TAILLE ── #}
-<div class="card mb-3 shadow-sm border-0">
+<div class="card mb-3 shadow-sm">
     <div class="card-header bg-light">
         <h5 class="mb-0 fs-6 fw-bold" style="color: var(--brand-color);">
             <i class="bi bi-geo-alt text-info me-2"></i>{% translate "Implantation & Conduite de taille" %}
@@ -801,3 +801,47 @@
 {% block model_card %}
 {% asset_model_card asset card_title="Essence botanique" %}
 {% endblock model_card %}
+
+
+{# ══════════════════════════════════════════════════════════════════════════════ #}
+{#  DÉPLACEMENT DES DOCUMENTS ET ASSETS LIÉS VERS LA COLONNE DE DROITE          #}
+{# ══════════════════════════════════════════════════════════════════════════════ #}
+{% block asset_documents_block %}
+{# Vide en colonne principale : déplacé dans side_bottom_cards pour équilibrer la page #}
+{% endblock asset_documents_block %}
+
+{% block linked_assets_block %}
+{# Vide en colonne principale : déplacé dans side_bottom_cards pour équilibrer la page #}
+{% endblock linked_assets_block %}
+
+{% block side_bottom_cards %}
+<!-- Documents associés (déplacés en colonne droite) -->
+{% asset_documents asset %}
+
+<!-- Assets liés (déplacés en colonne droite) -->
+{% get_asset_parents asset as parent_groups %}
+{% get_asset_children_tree asset as children_tree %}
+{% if parent_groups or children_tree or allowed_update_fields %}
+<div class="card mb-3 shadow-sm" id="linked-assets-card">
+    <div class="card-header bg-light d-flex align-items-center justify-content-between">
+        <h5 class="mb-0 fs-6 fw-bold">{% translate "Assets liés" %}</h5>
+        {% if allowed_update_fields %}
+        <button type="button"
+                class="btn btn-outline-secondary btn-sm d-none"
+                data-edit-mode-only="true"
+                id="open-link-asset-modal-btn"
+                title="{% translate 'Lier ou créer un asset' %}">
+            <i class="bi bi-plus-lg me-1"></i>{% translate "Lier / Créer" %}
+        </button>
+        {% endif %}
+    </div>
+    <div class="card-body pb-1" id="linked-assets-body">
+        {% if not parent_groups and not children_tree %}
+        <p class="text-muted small mb-2" id="no-linked-assets-msg">{% translate "Aucun asset lié." %}</p>
+        {% endif %}
+        {% include "assets/components/asset_children_tree.html" with children_tree=parent_groups editable=allowed_update_fields parent_model=asset_model parent_id=asset.id %}
+        {% include "assets/components/asset_children_tree.html" with children_tree=children_tree editable=allowed_update_fields parent_model=asset_model parent_id=asset.id %}
+    </div>
+</div>
+{% endif %}
+{% endblock side_bottom_cards %}