plier deplier infos meta concernement #2232

src/assets/main.scss

@@ -161,7 +161,7 @@ body{
             display: block;
             font-weight: 100;
             font-size: 0.882em;
-            padding: 1em 0 1em 0;
+            padding: 0.5em 0;
           }
         }
         div.concernement-cartouche-icons{
@@ -359,10 +359,28 @@ body{
       }
       >footer{
         section.infos{
-          >div{
+          position: relative;
+          svg.open-btn{
+            position: absolute;
+            right:0;
+            top: 0;
+            cursor: pointer;
+          }
+          div.wrapper{
+            overflow-y: hidden;
+            max-height: 0.1px;
+            transition: all 0.5s ease-in-out;
+            &.opened{
+              max-height: 200px;
+            }
+          }
+          div.info{
             font-size: 0.882em;
             font-weight: 100;
             // white-space:nowrap;
+            &.author{
+              cursor: pointer;
+            }
             >span.label{
               font-weight: 100;
             }
@@ -408,7 +426,7 @@ body{
         display: block;
         font-weight: 100;
         font-size: 0.882em;
-        padding: 0 0 1em 0;
+        padding: 0 0 0.5em 0;
       }
       ul, li{
         padding:0; margin:0;

src/components/contents/TerrainDeVie.vue

@@ -11,12 +11,19 @@ import Entite from '@components/contents/Entite.vue';
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/default.css'
 
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiChevronRight } from '@mdi/js';
+import { mdiChevronDown } from '@mdi/js';
+
 export default {
   props: ['id', 'eid', 'entite'],
   data(){
     return {
       history_value: 0,
-      history_slider_ops: null
+      history_slider_ops: null,
+      infos_opened: false,
+      chevronright_path: mdiChevronRight,
+      chevrondown_path: mdiChevronDown,
     }
   },
   computed: {
@@ -79,12 +86,16 @@ export default {
     }
   },
   methods: {
-    ...mapActions(ConcernementsStore, ['setActiveRevision']) // 'loadConcernementsRevisions'
+    ...mapActions(ConcernementsStore, ['setActiveRevision']), // 'loadConcernementsRevisions'
+    onClickInfos(){
+      this.infos_opened = !this.infos_opened;
+    }
   },
   components: {
     CartoucheLayout,
     Entite,
-    VueSlider
+    VueSlider,
+    SvgIcon
   }
 }
 
@@ -120,12 +131,24 @@ export default {
 
     <template v-slot:footer>
       <section class="infos">
-          <div class="author"><span>une enquête de</span> {{ opened_concernement.author.username }}<br/></div>
+        <svg-icon
-          <div class="structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></div>
+            type="mdi" 
-          <div class="lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></div>
+            :path="!infos_opened ? chevronright_path : chevrondown_path"
-          <div class="created"><span>démarrée le</span> {{ created }}<br/></div>
+            class="open-btn"
-          <div class="changed"><span>mise à jour le</span> {{ changed }}</div>
+            @click="onClickInfos"
-          <div class="recit-colophon" v-if="opened_concernement.recit_colophon" v-html="opened_concernement.recit_colophon"/>
+            ></svg-icon>
+          <div 
+            class="author info" 
+            @click="onClickInfos">
+              <span>une enquête de</span> {{ opened_concernement.author.username }}<br/>
+          </div>
+          <div class="wrapper" :class="{ 'opened': infos_opened }">
+            <div class="info structure" v-if="opened_concernement.author.structure.length"><span>avec</span> {{ opened_concernement.author.structure[0].name }}<br/></div>
+            <div class="info lieu" v-if="opened_concernement.lieu.length"><span>à</span> {{ opened_concernement.lieu[0].name }}<br/></div>
+            <div class="info created"><span>démarrée le</span> {{ created }}<br/></div>
+            <div class="info changed"><span>mise à jour le</span> {{ changed }}</div>
+            <div class="info recit-colophon" v-if="opened_concernement.recit_colophon" v-html="opened_concernement.recit_colophon"/>
+          </div>
       </section>
       
       <section class="sliders"  v-if="history_slider_ops">