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, infos_opened: false,
chevronright_path: mdiChevronRight, chevronright_path: mdiChevronRight,
chevrondown_path: mdiChevronDown, chevrondown_path: mdiChevronDown,
mainscrolled: false, headerreduced: false,
} }
}, },
computed: { computed: {
@ -198,7 +198,14 @@ export default {
}) })
}, },
onMainScrolled(scrolled){ 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: { components: {
@ -212,11 +219,11 @@ export default {
</script> </script>
<template> <template>
<CartoucheLayout :cid="cid" @main_scrolled="onMainScrolled"> <CartoucheLayout ref="cartouche_layout" :cid="cid" @main_scrolled="onMainScrolled">
<template v-slot:header> <template v-slot:header>
<div class="entite"> <div class="entite">
<!-- TODO update entite with revisions --> <!-- 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> <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3>
</div> </div>
</template> </template>

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

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