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

src/assets/main.scss

@@ -272,12 +272,13 @@ body{
               font-weight: bold;
             }
           }
-          span.menacemaintient{
-            display: block;
-            font-weight: 100;
-            font-size: 0.882em;
-            padding: 1em 0;
-          }
+          // span.menacemaintient{
+          //   display: block;
+          //   font-weight: 100;
+          //   font-size: 0.882em;
+          //   padding: 1em 0;
+          // }
+
         }
         div.concernement-cartouche-icons{
           h2{
@@ -286,29 +287,40 @@ body{
             // &.faded{
             //   font-weight: 100;
             // }
+            padding-bottom: 0.5em;
           }
-          nav.icons{
-            ul{
-              display: flex;
-              flex-direction: row;
-              li{
-                margin: 0.4em 0.6em 0 0;
-                >svg{
-                  display: inline-block;
-                  $d: 35px; 
-                  width:$d; height:$d;
-                  border-radius: $d * 0.5;
-                  background-color: #fff;
-                  padding: 2px;
-                  box-sizing: border-box;
-                  color: #333;
-                  // font-size: 2em;
-                }
-              }
-            }
+          // nav.icons{
+          //   ul{
+          //     display: flex;
+          //     flex-direction: row;
+          //     li{
+          //       margin: 0.4em 0.6em 0 0;
+          //       >svg{
+          //         display: inline-block;
+          //         $d: 35px; 
+          //         width:$d; height:$d;
+          //         border-radius: $d * 0.5;
+          //         background-color: #fff;
+          //         padding: 2px;
+          //         box-sizing: border-box;
+          //         color: #333;
+          //         // font-size: 2em;
+          //       }
+          //     }
+          //   }
+          // }
+        }
+        label{
+          display: block;
+          height:auto;
+          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;
           }
         }
-        
       }
       
       >main{

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>

src/components/layout/CartoucheLayout.vue

@@ -10,13 +10,23 @@ export default {
   props: ['cid'],
   data(){
     return {
-      headphones_path: mdiHeadphones
+      headphones_path: mdiHeadphones,
+      mainscrolled: false,
     }
   },
   created () {
     console.log('Cartouch layout created', this.cid);
     this.concernement = this.concernementsByID[this.cid];
   },
+  mounted () {
+    // console.log('cartouche layout mounted', this);
+    this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+      // console.log('main is scrolling', event);
+      let $main = event.originalTarget;
+      let scrolled = this.mainscrolled = $main.scrollTop > 0;
+      this.$emit('main_scrolled', scrolled);
+    })
+  },
   computed: {
     ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
   },
@@ -41,9 +51,9 @@ export default {
 </script>
 
 <template>
-  <header>
+  <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
-      <label>{{ ct_concernement.title.description }}</label>
+      <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
       <h2>{{ concernement.title }}</h2>
       <!-- <nav class="icons">
         <ul>
@@ -74,10 +84,10 @@ export default {
     </div>
     <slot name="header"></slot>
   </header>
-  <main>
+  <main ref="cartouche_main">
     <slot name="main"></slot>
   </main>
-  <footer>
+  <footer ref="cartouche_footer">
     <slot name="footer"></slot>
   </footer>
 </template>