bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

#2325 cartouche header elipse chrome bug fixed

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2024-03-11 10:39:33 +01:00
parent f1d2268517
commit 9c1b14ad5a
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/contents/TerrainDeVie.vue
View File

@ -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>

16
src/components/layout/CartoucheLayout.vue
View File

@ -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" >