more cartouche lisibility improvements: header lables hide on scroll #2325
This commit is contained in:
parent
9b7f661e33
commit
b3f83db120
@ -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{
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user