From f35493ea9003392aca539fa549656d2b020e3a43 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Tue, 3 Jun 2025 16:08:37 +0200
Subject: [PATCH] better cartouch css

---
 src/assets/main.scss                      | 48 ++++++++++-----
 src/components/ConcernementMapItem.vue    |  2 +-
 src/components/contents/TerrainDeVie.vue  | 72 +++++++++++------------
 src/components/layout/CartoucheLayout.vue | 28 ++++-----
 src/views/Concernement.vue                |  2 +-
 5 files changed, 85 insertions(+), 67 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index 6ffaa92..87ebc86 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -224,7 +224,7 @@ div.loading{
       box-sizing: border-box;
       width:$cartouch_width_full;
       height: 100%;
-      padding: 2rem 2rem 1rem;
+      padding: 1rem 1rem 1rem;
       overflow-y: auto;
       overflow-x: hidden;
       //
@@ -263,7 +263,7 @@ div.loading{
       // layout
       >header{
         flex: 0 0 auto;
-        padding: 0 0 1em 0;
+        // padding: 0 0 1em 0;
       }
       >main{
         flex: 1 1 auto;
@@ -305,7 +305,7 @@ div.loading{
           // display: flex;
           // flex-direction: column;
           // justify-content: flex-end;
-          padding-bottom: 0.5em;
+          // padding-bottom: 0.5em;
           label, h3{
             // height: 70px;
             box-sizing: border-box;
@@ -325,15 +325,22 @@ div.loading{
               font-weight: bold;
             }
           }
-          // span.menacemaintient{
-          //   display: block;
-          //   font-weight: 100;
-          //   font-size: 0.882em;
-          //   padding: 1em 0;
-          // }
+          
+          section.entite-params{
+            padding:0.5em 0;
+            display: flex;
+            flex-direction: row;
+            gap:0.5em;
+            align-items: center;
+            >section.editable{
+              // margin: 0.3em;
+              flex: 1 0 auto;
+            }
+          }
 
         }
         div.concernement-cartouche-icons{
+          margin-bottom: 1em;
           h2{
             font-weight: 400;
             font-size: 1.512em;
@@ -341,6 +348,7 @@ div.loading{
             //   font-weight: 100;
             // }
             padding-bottom: 0.5em;
+            margin-top: 0;
             overflow: hidden;
             display: -webkit-box;
             -webkit-box-orient: vertical;
@@ -379,13 +387,23 @@ div.loading{
           transition: max-height 0.5s ease-in-out,padding 0.5s ease-in-out;
           max-height: 100px;
           overflow: hidden;
-          &.hidden{
-            max-height: 0;
-            padding-bottom: 0;
+          // &.hidden{
+          //   max-height: 0;
+          //   padding-bottom: 0;
+          // }
+        }
+      }
+      &.entity-opened{
+        >header{
+          div.concernement-cartouche-icons{
+            label{
+              max-height: 0;
+              padding-bottom: 0;
+            }
           }
         }
       }
-      
+
       >main{
         overflow-y: auto;
         padding-top: $gradpad;
@@ -699,7 +717,7 @@ div.loading{
       span.date{
         @include font_questions();
         display: block;
-        padding: 0 0 1em 0;
+        padding: 0 0 0.3em 0;
       }
       ul, li{
         padding:0; margin:0;
@@ -1065,7 +1083,7 @@ div.dp__main{
   border-radius: 5px;
   $p:0.3em;
   padding:$p;
-  margin:0.5em 0 0 -$p;
+  margin:0 0 0 -$p;
   box-sizing: border-box;
   transition: all 0.2s ease-in-out;
   box-shadow: 2px 2px 4px #bbb;
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue
index da7e4ad..a26b81a 100644
--- a/src/components/ConcernementMapItem.vue
+++ b/src/components/ConcernementMapItem.vue
@@ -2625,7 +2625,7 @@ export default {
           if (group_to_hit) {
             let result = group_to_hit.hitTest(event.point);
             console.log('click result', result);
-            if (result) {
+            if (result && result.item.item_id && (result.item.name != "label_click_zone" || this.detailsZoomValue > 2)) {
               switch (this.map_mode) {
                 case "terraindevie":
                 case "superposition":
diff --git a/src/components/contents/TerrainDeVie.vue b/src/components/contents/TerrainDeVie.vue
index fb73d3a..bf377b8 100644
--- a/src/components/contents/TerrainDeVie.vue
+++ b/src/components/contents/TerrainDeVie.vue
@@ -594,44 +594,44 @@ export default {
           </div>
         </section>
 
-        <!-- active -->
-        <CheckboxEditable 
-          v-if="entite && entite.can_update"
-          :checked="this.parag_entite.active"
-          label="Active" 
-          :data="{
-            entitytype: 'paragraph',
-            bundle: 'entite_concernement',
-            id: this.parag_entite.id,
-            field: 'field_active'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+        <section class="entite-params" v-if="entite && entite.can_update">
+          <!-- active -->
+          <CheckboxEditable
+            :checked="this.parag_entite.active"
+            label="Active" 
+            :data="{
+              entitytype: 'paragraph',
+              bundle: 'entite_concernement',
+              id: this.parag_entite.id,
+              field: 'field_active'}"
+              v-on:updated="reloadConcernementEntites(cid)"/>
 
-        <!-- agissante -->
-        <CheckboxEditable 
-          v-if="entite && entite.can_update"
-          :checked="entite.agissante"
-          label="Entité action" 
-          :data="{
-            entitytype: 'node',
-            bundle: 'entite',
-            id: this.entite.id,
-            field: 'field_entite_agissante'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+          <!-- agissante -->
+          <CheckboxEditable
+            :checked="entite.agissante"
+            label="Entité action" 
+            :data="{
+              entitytype: 'node',
+              bundle: 'entite',
+              id: this.entite.id,
+              field: 'field_entite_agissante'}"
+              v-on:updated="reloadConcernementEntites(cid)"/>
 
-        <SelectEditable 
-          v-if="entite && entite.can_update"
-          label="Confidentialité"
-          :value="entite.confidentialite"
-          :options="{
-            'confidentialite_prive': 'privé',
-            'confidentialite_interne': 'interne',
-            'confidentialite_public': 'public'}"
-          :data="{
-            entitytype: 'node',
-            bundle: 'entite',
-            nid: this.entite.id,
-            field: 'field_confidentialite'}"
-            v-on:updated="reloadConcernementEntites(cid)"/>
+          <!-- confidentialité -->
+          <SelectEditable
+            label="Confidentialité"
+            :value="entite.confidentialite"
+            :options="{
+              'confidentialite_prive': 'privé',
+              'confidentialite_interne': 'interne',
+              'confidentialite_public': 'public'}"
+            :data="{
+              entitytype: 'node',
+              bundle: 'entite',
+              nid: this.entite.id,
+              field: 'field_confidentialite'}"
+              v-on:updated="reloadConcernementEntites(cid)"/>
+        </section>
 
 
       </div>
diff --git a/src/components/layout/CartoucheLayout.vue b/src/components/layout/CartoucheLayout.vue
index d11feeb..a188cfd 100644
--- a/src/components/layout/CartoucheLayout.vue
+++ b/src/components/layout/CartoucheLayout.vue
@@ -25,18 +25,18 @@ export default {
   },
   mounted () {
     // console.log('cartouche layout mounted', this);
-    this.$refs.cartouche_main.addEventListener('scroll', (event) => {
-      // console.log('main is scrolling', event);
-      let $main = event.target;
-      let scrolled = $main.scrollTop > 0;
-      this.$emit('main_scrolled', scrolled);
-      // TODO how to make this failsafe limit responsive ? 
-      if(scrolled && $main.scrollHeight > 900){
-        this.headerreduced = true;
-      } else {
-        this.headerreduced = false;
-      }
-    })
+    // this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+    //   console.log('main is scrolling', event);
+    //   let $main = event.target;
+    //   let scrolled = $main.scrollTop > 0;
+    //   this.$emit('main_scrolled', scrolled);
+    //   // TODO how to make this failsafe limit responsive ? 
+    //   if(scrolled && $main.scrollHeight > 900){
+    //     this.headerreduced = true;
+    //   } else {
+    //     this.headerreduced = false;
+    //   }
+    // })
   },
   computed: {
     ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
@@ -74,8 +74,8 @@ export default {
 <template>
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
-      <label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
-      
+      <label class="concernement-label">{{ ct_concernement.title.description }}</label>
+      <!-- :class="{ hidden: headerreduced }" -->
       <ContentEditable 
         tag="h2"
         :value="concernement.title" 
diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue
index e9a76e2..aaef5fb 100644
--- a/src/views/Concernement.vue
+++ b/src/views/Concernement.vue
@@ -230,7 +230,7 @@ export default {
 </script>
 
 <template>
-  <section v-if="opened_concernement" class="concernement">
+  <section v-if="opened_concernement" class="concernement" :class="{ 'entity-opened': main_cid_eid.eid }">
     <TerrainDeVie v-if="map_mode === 'terraindevie' || map_mode === 'action' || map_mode === 'superposition' || map_mode === 'proximite'" :cid="main_cid_eid.cid" :eid="main_cid_eid.eid"/>
     <PuissanceAgir v-if="map_mode === 'puissancedagir'" :cid="cid"/>
     <Doleancer v-if="map_mode === 'doleancer'" :cid="cid"/>