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

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>