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

some css on doleance content, started mouse events

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-06-07 16:53:19 +02:00
parent 0b9a1ae946
commit c0028a636b
4 changed files with 100 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/assets/main.scss
View File

@ -82,6 +82,7 @@ body{
} }
#content{ #content{
section.concernement{ section.concernement{
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
box-sizing: border-box; box-sizing: border-box;
@ -99,6 +100,12 @@ body{
font-size: 0.882em; font-size: 0.882em;
padding: 0 0 1em 0; padding: 0 0 1em 0;
} }
ul, li{
padding:0; margin:0;
list-style: none;
}
>header{ >header{
display: flex; display: flex;
height: 8rem; height: 8rem;
@ -110,27 +117,35 @@ body{
// padding: 0 0 1em 0; // padding: 0 0 1em 0;
// flex-grow: auto; // flex-grow: auto;
} }
h3{
font-weight: 400;
font-size: 1.2em;
}
h2{ h2{
font-weight: 400; font-weight: 400;
font-size: 1.512em; font-size: 1.512em;
} }
h3{
font-weight: 400;
font-size: 1.2em;
}
} }
section>div{ h3{
font-weight: 400;
font-size: 1.2em;
}
h4{
font-weight: 400;
font-size: 1.2em;
}
h5{
font-weight: 400;
font-size: 1.1em;
}
section>div, p{
font-size: 1em; font-size: 1em;
font-weight: 300; font-weight: 300;
} }
// PUISSANCE D'AGIR // PUISSANCE D'AGIR
section.content-besoins{ section.content-besoins{
ul, li{
padding:0; margin:0;
list-style: none;
}
li.besoin{ li.besoin{
position: relative; position: relative;
label.mdi:before{ label.mdi:before{
@ -190,6 +205,23 @@ body{
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
section.content-doleances{
label{
margin:0;
padding:0 0 0.5em 0;
}
p{
margin:0;
padding:0 0 0.5em 0;
}
ul{
// padding:0 0 0 1em;
}
}
} }
} }

88
src/components/ConcernementMapItem.vue
View File

@ -1330,26 +1330,28 @@ export default {
let cam = new paper.Path({ let cam = new paper.Path({
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
fillColor: "rgba(255, 255, 255, 0.4)" fillColor: "rgba(255, 255, 255, 0.4)",
item_type: 'doleance_step',
item_id: 'lenquete'
}); });
cam.add({x: this.pos.x , y: this.pos.y + dr});
cam.add({x: this.pos.x + n, y: this.pos.y + n}); cam.lineTo({x: this.pos.x, y: this.pos.y + r});
cam.lineTo({x: this.pos.x + m , y: this.pos.y + m}); cam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m});
cam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r}); cam.lineTo({x: this.pos.x - n, y: this.pos.y + n});
cam.lineTo({x: this.pos.x, y: this.pos.y + dr}); cam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr});
cam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
enquete.addChild(cam) enquete.addChild(cam)
// texte // texte
enquete.addChild(new paper.PointText({ // enquete.addChild(new paper.PointText({
point: { // point: {
x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75, // x:this.pos.x + Math.sin(22.5*(Math.PI/180)) * r*0.75,
y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75 // y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
}, // },
content: doleance['lenquete'], // content: doleance['lenquete'],
fontSize: fontsize, // fontSize: fontsize,
fillColor: '#fff', // fillColor: '#fff',
justification: 'center' // justification: 'center',
})); // locked: true
// }));
g.addChild(enquete); g.addChild(enquete);
// //
@ -1360,27 +1362,31 @@ export default {
}); });
// camenbert // camenbert
let rescam = new paper.Path({ let rescam = new paper.Path({
name: 'resolution',
item_type: 'doleance_step',
item_id: 'probleme_initial_resolu',
strokeColor: '#fff', strokeColor: '#fff',
strokeWidth: 2, strokeWidth: 2,
fillColor: "rgba(255, 255, 255, 0.4)" fillColor: "rgba(255, 255, 255, 0.4)",
}); });
rescam.add({x: this.pos.x , y: this.pos.y + dr}); rescam.add({x: this.pos.x + n, y: this.pos.y + n});
rescam.lineTo({x: this.pos.x, y: this.pos.y + r}); rescam.lineTo({x: this.pos.x + m , y: this.pos.y + m});
rescam.arcTo({x: this.pos.x - p, y: this.pos.y + o}, {x: this.pos.x - m, y: this.pos.y + m}); rescam.arcTo({x: this.pos.x + p, y: this.pos.y + o}, {x: this.pos.x, y: this.pos.y + r});
rescam.lineTo({x: this.pos.x - n, y: this.pos.y + n}); rescam.lineTo({x: this.pos.x, y: this.pos.y + dr});
rescam.arcTo({x: this.pos.x - p_d, y: this.pos.y + o_d}, {x: this.pos.x , y: this.pos.y + dr}); rescam.arcTo({x: this.pos.x + p_d, y: this.pos.y + o_d}, {x: this.pos.x + n, y: this.pos.y + n});
resolution.addChild(rescam) resolution.addChild(rescam)
// texte // texte
resolution.addChild(new paper.PointText({ // resolution.addChild(new paper.PointText({
point: { // point: {
x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75, // x:this.pos.x - Math.sin(22.5*(Math.PI/180)) * r*0.75,
y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75 // y:this.pos.y + Math.cos(22.5*(Math.PI/180)) * r*0.75
}, // },
content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'], // content: doleance['probleme_initial_resolu'] ? doleance['oui_nouvelle_situation'] : doleance['non_adresse_doleance'],
fontSize: fontsize, // fontSize: fontsize,
fillColor: '#fff', // fillColor: '#fff',
justification: 'center' // justification: 'center'
})); // }));
g.addChild(resolution); g.addChild(resolution);
@ -1468,22 +1474,32 @@ export default {
if (this.is_opened) { if (this.is_opened) {
// lets define some options regarding the map_mode // lets define some options regarding the map_mode
let paper_group_tohit; let paper_group_tohit, op;
switch (this.map_mode) { switch (this.map_mode) {
case "terraindevie": case "terraindevie":
paper_group_tohit = 'entites'; paper_group_tohit = 'entites';
op = {};
break; break;
case "action": case "action":
paper_group_tohit = 'agissantes'; paper_group_tohit = 'agissantes';
op = {};
break; break;
case "puissancedagir": case "puissancedagir":
paper_group_tohit = 'puissanceagir_besoins'; paper_group_tohit = 'puissanceagir_besoins';
op = {};
break;
case "doleancer":
paper_group_tohit = 'doleance_steps';
op = {
// class: paper.Path
fill: true
};
break; break;
} }
let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point); let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point, op);
// console.log('move result', result); // console.log('move result', result);
if (result) { if (result && result.item.item_id) {
// console.log('move has result', result); // console.log('move has result', result);
let hover_elmt = { let hover_elmt = {
type: result.item.item_type, type: result.item.item_type,

2
src/components/MapConcernements.vue
View File

@ -159,7 +159,7 @@ export default {
</ul> </ul>
</nav> </nav>
<ConcernementMapPopup <ConcernementMapPopup
v-if="hover_elmt" v-if="hover_elmt && hover_elmt.type !== 'doleance_step'"
:infos="hover_elmt" :infos="hover_elmt"
/> />
</template> </template>

12
src/views/Concernement.vue
View File

@ -217,13 +217,13 @@ export default {
class="doleance"> class="doleance">
<header> <header>
<label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label> <label for="leprobleme">{{ ct_cercle_politique.field_le_probleme.label }}</label>
<h4 name="leprobleme">{{ doleance.leprobleme }}</h4> <h3 name="leprobleme">{{ doleance.leprobleme }}</h3>
<label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label> <label for="lenquete">{{ ct_cercle_politique.field_enquete_terraindevie.label }}</label>
<h3 name="lenquete">{{ doleance.lenquete }}</h3> <h4 name="lenquete">{{ doleance.lenquete }}</h4>
</header> </header>
<section class="groupesinterets"> <section class="groupesinterets">
<h2>{{ ct_cercle_politique.field_groupes.label }}</h2> <h5>{{ ct_cercle_politique.field_groupes.label }}</h5>
<ul> <ul>
<li <li
v-for="groupe in doleance.groupesinterets"> v-for="groupe in doleance.groupesinterets">
@ -244,7 +244,7 @@ export default {
<p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" /> <p name="comment_ennonce_doleance" v-html="doleance.comment_ennonce_doleance" />
<label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label> <label for="aqui_addresse_doleance">{{ ct_cercle_politique.field_a_qui_adresse_doleance.label }}</label>
<p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" /> <p name="aqui_addresse_doleance" v-html="doleance.aqui_addresse_doleance" />
<h2>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h2> <h5>{{ ct_cercle_politique.field_receptions_et_traitements.label }}</h5>
<ul class="reception_traitement"> <ul class="reception_traitement">
<li <li
v-for="rec in doleance.reception_traitement"> v-for="rec in doleance.reception_traitement">
@ -264,7 +264,7 @@ export default {
<p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" /> <p name="entites_decisionnaires" v-html="doleance.entites_decisionnaires" />
<label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label> <label for="decision_formule">{{ ct_cercle_politique.field_decision_formulee.label }}</label>
<p name="decision_formule" v-html="doleance.decision_formule" /> <p name="decision_formule" v-html="doleance.decision_formule" />
<h2>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h2> <h5>{{ ct_cercle_politique.field_mise_en_oeuvre_decision.label }}</h5>
<ul class="mise_en_oeuvre_decision"> <ul class="mise_en_oeuvre_decision">
<li <li
v-for="dec in doleance.mise_en_oeuvre_decision"> v-for="dec in doleance.mise_en_oeuvre_decision">
@ -284,7 +284,7 @@ export default {
<p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" /> <p name="aqui_adresse_decision" v-html="doleance.aqui_adresse_decision" />
<label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label> <label for="comment_formule_decision">{{ ct_cercle_politique.field_comment_formule_decision.label }}</label>
<p name="comment_formule_decision" v-html="doleance.comment_formule_decision" /> <p name="comment_formule_decision" v-html="doleance.comment_formule_decision" />
<h2>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h2> <h5>{{ ct_cercle_politique.field_receptions_et_applications.label }}</h5>
<ul class="receptions_et_applications"> <ul class="receptions_et_applications">
<li <li
v-for="app in doleance.receptions_et_applications"> v-for="app in doleance.receptions_et_applications">