more cartouche lisibility improvements: header lables hide on scroll #2325

src/components/contents/TerrainDeVie.vue

@@ -32,6 +32,7 @@ export default {
       infos_opened: false,
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
+      mainscrolled: false,
     }
   },
   computed: {
@@ -53,6 +54,15 @@ export default {
     },
     display_concernement(){
       return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer';
+    },
+    entity_title_label(){
+      let str;
+      if (this.concernement.entites_byid[this.eid].menacemaintien > 0) {
+        str = 'maintenu';
+      } else {
+        str = 'menacé'
+      }
+      return `Pouvez-vous nommer par qui ou par quoi cet élément est ${str} ?`;
     }
   },
   created () {
@@ -90,7 +100,14 @@ export default {
     } else {
       this.history_slider_ops = null;
     }
+
   },
+  // mounted(){
+  //   console.log('terrain de vie mounted', this);
+  //   // this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+  //   //   console.log('main is scrolling', event);
+  //   // })
+  // },
   watch: {
     history_value: {
       handler (n, o) {
@@ -142,6 +159,9 @@ export default {
         .catch(error => {
           console.warn('Issue with load entite', error)
         })
+    },
+    onMainScrolled(scrolled){
+      this.mainscrolled = scrolled;
     }
   },
   components: {
@@ -155,12 +175,11 @@ export default {
 </script>
 
 <template>
-  <CartoucheLayout :cid="cid">
+  <CartoucheLayout :cid="cid" @main_scrolled="onMainScrolled">
     <template v-slot:header>
       <div class="entite">
         <!-- TODO update entite with revisions -->
-        <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
-        <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
+        <label v-if="entite" class="menacemaintient" :class="{ hidden: mainscrolled}">{{ entity_title_label }}</label>
         <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3>
       </div>
     </template>