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

plier deplier infos meta concernement #2232

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-15 22:28:44 +02:00
parent 0bb60fe21e
commit 8fb1a716dc
2 changed files with 53 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/assets/main.scss
View File

@ -161,7 +161,7 @@ body{
display: block; display: block;
font-weight: 100; font-weight: 100;
font-size: 0.882em; font-size: 0.882em;
padding: 1em 0 1em 0; padding: 0.5em 0;
} }
} }
div.concernement-cartouche-icons{ div.concernement-cartouche-icons{
@ -359,10 +359,28 @@ body{
} }
>footer{ >footer{
section.infos{ 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-size: 0.882em;
font-weight: 100; font-weight: 100;
// white-space:nowrap; // white-space:nowrap;
&.author{
cursor: pointer;
}
>span.label{ >span.label{
font-weight: 100; font-weight: 100;
} }
@ -408,7 +426,7 @@ body{
display: block; display: block;
font-weight: 100; font-weight: 100;
font-size: 0.882em; font-size: 0.882em;
padding: 0 0 1em 0; padding: 0 0 0.5em 0;
} }
ul, li{ ul, li{
padding:0; margin:0; padding:0; margin:0;

41
src/components/contents/TerrainDeVie.vue
View File

@ -11,12 +11,19 @@ import Entite from '@components/contents/Entite.vue';
import VueSlider from 'vue-slider-component' import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css' 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 { export default {
props: ['id', 'eid', 'entite'], props: ['id', 'eid', 'entite'],
data(){ data(){
return { return {
history_value: 0, history_value: 0,
history_slider_ops: null history_slider_ops: null,
infos_opened: false,
chevronright_path: mdiChevronRight,
chevrondown_path: mdiChevronDown,
} }
}, },
computed: { computed: {
@ -79,12 +86,16 @@ export default {
} }
}, },
methods: { methods: {
...mapActions(ConcernementsStore, ['setActiveRevision']) // 'loadConcernementsRevisions' ...mapActions(ConcernementsStore, ['setActiveRevision']), // 'loadConcernementsRevisions'
onClickInfos(){
this.infos_opened = !this.infos_opened;
}
}, },
components: { components: {
CartoucheLayout, CartoucheLayout,
Entite, Entite,
VueSlider VueSlider,
SvgIcon
} }
} }
@ -120,12 +131,24 @@ export default {
<template v-slot:footer> <template v-slot:footer>
<section class="infos"> <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>
<section class="sliders" v-if="history_slider_ops"> <section class="sliders" v-if="history_slider_ops">