#2325 cartouche header elipse chrome bug fixed

src/components/contents/TerrainDeVie.vue

@@ -34,7 +34,7 @@ export default {
       infos_opened: false,
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
-      mainscrolled: false,
+      headerreduced: false,
     }
   },
   computed: {
@@ -198,7 +198,14 @@ export default {
         })
     },
     onMainScrolled(scrolled){
-      this.mainscrolled = scrolled;
+      console.log('this.$refs', this.$refs);
+      let cartouche_main = this.$refs.cartouche_layout.$refs.cartouche_main;
+      console.log('cartouche_main', cartouche_main);
+      if(scrolled && cartouche_main.scrollHeight > 600){
+        this.headerreduced = true;
+      } else {
+        this.headerreduced = false;
+      }
     }
   },
   components: {
@@ -212,11 +219,11 @@ export default {
 </script>
 
 <template>
-  <CartoucheLayout :cid="cid" @main_scrolled="onMainScrolled">
+  <CartoucheLayout ref="cartouche_layout" :cid="cid" @main_scrolled="onMainScrolled">
     <template v-slot:header>
       <div class="entite">
         <!-- TODO update entite with revisions -->
-        <label v-if="entite" class="menacemaintient" :class="{ hidden: mainscrolled}">{{ entity_title_label }}</label>
+        <label v-if="entite" class="menacemaintient" :class="{ hidden: headerreduced}">{{ entity_title_label }}</label>
         <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3>
       </div>
     </template>

src/components/layout/CartoucheLayout.vue

@@ -13,6 +13,7 @@ export default {
     return {
       headphones_path: mdiHeadphones,
       mainscrolled: false,
+      headerreduced: false,
     }
   },
   created () {
@@ -22,10 +23,15 @@ 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.originalTarget;
-      let scrolled = this.mainscrolled = $main.scrollTop > 0;
+      console.log('main is scrolling', event);
+      let $main = event.target;
+      let scrolled = $main.scrollTop > 0;
       this.$emit('main_scrolled', scrolled);
+      if(scrolled && $main.scrollHeight > 600){
+        this.headerreduced = true;
+      } else {
+        this.headerreduced = false;
+      }
     })
   },
   computed: {
@@ -54,8 +60,8 @@ export default {
 <template>
   <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
-      <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
-      <h2 :class="{ ellipsed: mainscrolled }">{{ concernement.title }}</h2>
+      <label :class="{ hidden: headerreduced }">{{ ct_concernement.title.description }}</label>
+      <h2 :class="{ ellipsed: headerreduced }">{{ concernement.title }}</h2>
       <!-- <nav class="icons">
         <ul>
           <li v-if="concernement.has_recit" >