fixed puissance d'agir cartouch display
This commit is contained in:
parent
576cdc0445
commit
04eb79af8b
@ -210,6 +210,82 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
// PUISSANCE D'AGIR
|
||||
ul.besoins{
|
||||
li.besoin{
|
||||
position: relative;
|
||||
label.mdi:before{
|
||||
font-size: 0.8em;
|
||||
padding-right: 0.2em;
|
||||
|
||||
}
|
||||
label.mdi:hover:before,
|
||||
label.mdi.hover:before{
|
||||
color:#01ffe2;
|
||||
}
|
||||
svg.open-btn{
|
||||
position: absolute;
|
||||
right:0; top:0;
|
||||
cursor: pointer;
|
||||
}
|
||||
>header{
|
||||
padding: 0 0 0 0;
|
||||
>label{
|
||||
padding:0.3em 0 0.5em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
h4.besoin-description{
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
// padding: 0.5em 0;
|
||||
}
|
||||
}
|
||||
ul.reponses{
|
||||
overflow: hidden;
|
||||
max-height: 1px;
|
||||
transition: all 0.7s ease-in-out;
|
||||
li.reponse{
|
||||
padding:0.5em 0 0;
|
||||
&:last-of-type{
|
||||
padding: 0.5em 0 1em;
|
||||
}
|
||||
>label{
|
||||
padding:0 0 0.5em 0;
|
||||
}
|
||||
section{
|
||||
&:not(:last-of-type){
|
||||
padding: 0 0 0.5em 0;
|
||||
}
|
||||
label{ padding:0; }
|
||||
p{margin:0;}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
a.contribute-link{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items:flex-end;
|
||||
font-weight: 100;
|
||||
font-size: 0.882em;
|
||||
svg{
|
||||
width:1em; height:1em; margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
&.opened{
|
||||
ul.reponses{
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: #aaa 1px solid;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
>footer{
|
||||
section.infos{
|
||||
@ -258,68 +334,7 @@ body{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// PUISSANCE D'AGIR
|
||||
section.content-besoins{
|
||||
li.besoin{
|
||||
position: relative;
|
||||
label.mdi:before{
|
||||
font-size: 0.8em;
|
||||
padding-right: 0.2em;
|
||||
|
||||
}
|
||||
label.mdi:hover:before,
|
||||
label.mdi.hover:before{
|
||||
color:#01ffe2;
|
||||
}
|
||||
span.open-btn{
|
||||
position: absolute;
|
||||
right:0; top:0;
|
||||
cursor: pointer;
|
||||
}
|
||||
>header{
|
||||
padding: 0 0 0 0;
|
||||
>label{
|
||||
padding:0.5em 0 0.5em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
h4.besoin-description{
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
a.contribute-link{
|
||||
display: block;
|
||||
text-align: right;
|
||||
font-weight: 100;
|
||||
font-size: 0.882em;
|
||||
}
|
||||
}
|
||||
ul.reponses{
|
||||
overflow: hidden;
|
||||
max-height: 1px;
|
||||
transition: all 0.7s ease-in-out;
|
||||
li.reponse{
|
||||
padding:1em 0;
|
||||
section{
|
||||
padding:0;
|
||||
label{ padding: 0 0 0 0; }
|
||||
p{margin: 0 0 1em 0;}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&.opened{
|
||||
ul.reponses{
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
|
||||
padding-bottom: 0.5em;
|
||||
border-bottom: #aaa 1px solid;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
section.content-doleances{
|
||||
|
||||
|
||||
|
||||
@ -1198,6 +1198,14 @@ export default {
|
||||
},
|
||||
// ENGINE UPDATE
|
||||
onBeforeEngineUpdate (event) {
|
||||
|
||||
// TODO stop item on mouse hover
|
||||
if (this.hover_elmt && this.hover_elmt.id === this.id) {
|
||||
// Matter.Body.setStatic(this.body, true);
|
||||
} else {
|
||||
// Matter.Body.setStatic(this.body, false);
|
||||
}
|
||||
|
||||
// update the opening/closing tweening
|
||||
if (this.tween) {
|
||||
this.tween.update();
|
||||
@ -1526,7 +1534,6 @@ export default {
|
||||
|
||||
this.paper_main_object.position = this.pos = this.body.position;
|
||||
|
||||
// this.draw()
|
||||
this.handlePaperVisibility()
|
||||
},
|
||||
},
|
||||
|
||||
@ -5,28 +5,62 @@ import { ConcernementsStore } from '@stores/concernements'
|
||||
import { UserStore } from '@/stores/user'
|
||||
import { CommonStore } from '@/stores/common'
|
||||
|
||||
import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiChevronRight } from '@mdi/js';
|
||||
import { mdiChevronDown } from '@mdi/js';
|
||||
import { mdiPencilPlus } from '@mdi/js';
|
||||
import { mdiPencilPlusOutline } from '@mdi/js';
|
||||
|
||||
|
||||
export default {
|
||||
props: ['id'],
|
||||
data(){
|
||||
return {
|
||||
|
||||
opened_besoin_id: null,
|
||||
chevronright_path: mdiChevronRight,
|
||||
chevrondown_path: mdiChevronDown,
|
||||
pencilplus_path: mdiPencilPlus,
|
||||
pencilplusoutline_path: mdiPencilPlusOutline
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(UserStore,['isloggedin']),
|
||||
...mapState(ConcernementsStore,['opened_concernement']),
|
||||
...mapState(ConcernementsStore,['ct_concernement']),
|
||||
...mapState(ConcernementsStore,['ct_entite']),
|
||||
},
|
||||
created () {
|
||||
console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
|
||||
},
|
||||
methods: {
|
||||
onClickBesoin(id){
|
||||
console.log("onClickBesoin", id);
|
||||
this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
|
||||
},
|
||||
besoinClass(id){
|
||||
return this.opened_besoin_id === id ? "opened" : "";
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CartoucheLayout,
|
||||
SvgIcon
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
class="content-besoins">
|
||||
<CartoucheLayout>
|
||||
<template v-slot:header>
|
||||
<div class="pre-header">
|
||||
<!-- concernement -->
|
||||
<label>{{ ct_concernement.title.description }}</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:main>
|
||||
<ul class="besoins">
|
||||
<li
|
||||
v-for="besoin in opened_concernement.besoins"
|
||||
@ -35,11 +69,12 @@ export default {
|
||||
:id="besoin.id"
|
||||
:class="besoinClass(besoin.id)"
|
||||
>
|
||||
<span
|
||||
class="open-btn mdi"
|
||||
:class="{ 'mdi-chevron-right': besoin.id !== opened_besoin_id, 'mdi-chevron-down': besoin.id === opened_besoin_id } "
|
||||
<svg-icon
|
||||
type="mdi"
|
||||
:path="besoin.id !== opened_besoin_id ? chevronright_path : chevrondown_path"
|
||||
class="open-btn"
|
||||
@click="onClickBesoin(besoin.id)"
|
||||
/>
|
||||
></svg-icon>
|
||||
<header>
|
||||
<label
|
||||
class="mdi mdi-rhombus"
|
||||
@ -49,14 +84,6 @@ export default {
|
||||
Besoin de l'enqueteur
|
||||
</label>
|
||||
<h4 class="besoin-description" v-html="besoin.description"/>
|
||||
<a
|
||||
v-if="isloggedin"
|
||||
:href="'/api/node/add/reponse?besoin_id='+besoin.id"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="contribute-link mdi mdi-pencil-plus">
|
||||
contribuer à ce besoin
|
||||
</a>
|
||||
</header>
|
||||
<ul class="reponses">
|
||||
<li
|
||||
@ -84,7 +111,22 @@ export default {
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
<a
|
||||
v-if="isloggedin"
|
||||
:href="'/api/node/add/reponse?besoin_id='+besoin.id"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="contribute-link mdi mdi-pencil-plus">
|
||||
<svg-icon type="mdi" :path="pencilplusoutline_path" /> contribuer à ce besoin
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-slot:footer>
|
||||
|
||||
</template>
|
||||
|
||||
</CartoucheLayout>
|
||||
|
||||
</template>
|
||||
@ -2,7 +2,6 @@
|
||||
|
||||
import { mapActions, mapState } from 'pinia'
|
||||
import { ConcernementsStore } from '@stores/concernements'
|
||||
import { UserStore } from '@/stores/user'
|
||||
import { CommonStore } from '@/stores/common'
|
||||
|
||||
import { print } from 'graphql/language/printer'
|
||||
@ -26,18 +25,17 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState(UserStore,['isloggedin']),
|
||||
...mapState(ConcernementsStore,['map_mode']),
|
||||
...mapState(ConcernementsStore,['opened_concernement']),
|
||||
// ...mapState(ConcernementsStore,['opened_entity_id']),
|
||||
...mapState(ConcernementsStore,['concernements_loaded']),
|
||||
...mapState(ConcernementsStore,['ct_concernement']),
|
||||
...mapState(ConcernementsStore,['ct_entite']),
|
||||
...mapState(ConcernementsStore,['ct_cercle_politique']),
|
||||
...mapState(ConcernementsStore,['p_groupes_interets']),
|
||||
...mapState(ConcernementsStore,['p_reception_et_traitement']),
|
||||
...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
|
||||
...mapState(ConcernementsStore,['p_reception_application_decision']),
|
||||
...mapState(ConcernementsStore,['map_mode',
|
||||
'opened_concernement',
|
||||
// 'opened_entity_id',
|
||||
'concernements_loaded',
|
||||
'ct_concernement',
|
||||
'ct_entite',
|
||||
'ct_cercle_politique',
|
||||
'p_groupes_interets',
|
||||
'p_reception_et_traitement',
|
||||
'p_mise_en_oeuvre_decision',
|
||||
'p_reception_application_decision']),
|
||||
...mapState(CommonStore,['hover_elmt'])
|
||||
},
|
||||
created () {
|
||||
@ -98,13 +96,6 @@ export default {
|
||||
.catch(error => {
|
||||
console.warn('Issue with load entite', error)
|
||||
})
|
||||
},
|
||||
onClickBesoin(id){
|
||||
console.log("onClickBesoin", id);
|
||||
this.opened_besoin_id = id === this.opened_besoin_id ? null : id;
|
||||
},
|
||||
besoinClass(id){
|
||||
return this.opened_besoin_id === id ? "opened" : "";
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user