fixed puissance d'agir cartouch display

src/assets/main.scss

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

src/components/ConcernementMapItem.vue

@@ -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()
     },
   },

src/components/contents/PuissanceAgir.vue

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

src/views/Concernement.vue

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