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

displaying all entite fields

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2023-07-05 15:03:37 +02:00
parent 965d08c432
commit 689d00d3de
5 changed files with 142 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/main.scss
View File

@@ -100,21 +100,23 @@ body{
display: flex;
flex-direction: column;
justify-content: flex-end;
// layout
>header{
flex: 0 0 auto;
padding: 0 0 1em 0;
}
>main{
flex: 1 1 auto;
padding: 1em 0;
}
>footer{
flex: 0 0 auto;
padding: 1em 0 0;
}
>header{
flex: 0 0 auto;
}
// contents
>header{
display: flex;
// height: 8rem;

116
src/components/contents/Entite.vue Normal file
View File

@@ -0,0 +1,116 @@
<script>
import { mapActions, mapState } from 'pinia'
import { ConcernementsStore } from '@stores/concernements'
export default {
props: ['entite'],
data() {
return {
}
},
computed: {
...mapState(ConcernementsStore,['opened_concernement']),
...mapState(ConcernementsStore,['ct_concernement']),
...mapState(ConcernementsStore,['ct_entite']),
},
methods: {
},
components: {
}
}
</script>
<template>
<section class="action">
<label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
<div v-html="entite.action"/>
</section>
<section class="menace-maintien">
<label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
<div v-html="entite.menacemaintien"/>
</section>
<!-- SOURCES (experiences vecues) -->
<section
v-if="entite.sources.length"
class="sources multiple">
<section
v-for="(source, index) in entite.sources"
:key="index"
class="source">
<section class="description">
<label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</label>
<div v-html="source.description"/>
</section>
<section
v-if="source.images.length"
class="images">
<figure
v-for="(image, j) in source.images"
:key="j">
<img :src="image.url" :alt="image.alt"/>
</figure>
</section>
<section
v-if="source.videos.length"
class="video multiple">
<vue-plyr
v-for="(video,v) in source.videos"
:key="v">
<div class="plyr__video-embed">
<iframe
:src="video.url"
allowfullscreen
></iframe>
</div>
</vue-plyr>
</section>
<section
v-if="source.audios.length"
class="audio multiple">
<div
v-for="(audio,a) in source.audios"
:key="a">
<label v-if="audio.description">{{ audio.description }}</label>
<label v-else>{{ audio.file.filename }}</label>
<vue-plyr>
<audio>
<source :src="audio.file.url" :type="audio.file.filemime" />
</audio>
</vue-plyr>
</div>
</section>
<section
v-if="source.liens.length"
class="liens multiple">
<a
v-for="(lien,l) in source.liens"
:key="l"
:href="lien.url">
{{ lien.title }}
</a>
</section>
<section
v-if="source.documents.length"
class="documents multiple">
<a
v-for="(doc,d) in source.documents"
:key="d"
:href="doc.file.url">
<template v-if="doc.description">{{ doc.description }}</template>
<template v-else>{{ doc.file.url }}</template>
</a>
</section>
</section>
</section>
</template>

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

@@ -6,6 +6,7 @@ import { UserStore } from '@/stores/user'
// import { CommonStore } from '@/stores/common'
import CartoucheLayout from '@components/layout/CartoucheLayout.vue';
import Entite from '@components/contents/Entite.vue';
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
@@ -46,6 +47,7 @@ export default {
},
components: {
CartoucheLayout,
Entite,
VueSlider
}
}
@@ -80,52 +82,7 @@ export default {
</template>
<!-- entite -->
<template v-if="entite">
<section class="action">
<label v-if="ct_entite">{{ ct_entite.field_action.description }}</label>
<div v-html="entite.action"/>
</section>
<section class="menace-maintien">
<label v-if="ct_entite">{{ ct_entite.field_menace_maintien.description }}</label>
<div v-html="entite.menacemaintien"/>
</section>
<section
v-if="entite.sources.length"
class="sources multiple">
<section
v-for="(source, index) in entite.sources"
:key="index"
class="source">
<section class="description">
<label v-if="ct_entite"> {{ ct_entite.field_sources.description }}</label>
<div v-html="source.description"/>
</section>
<section
v-if="source.images.length"
class="images">
<figure
v-for="(image, j) in source.images"
:key="j">
<img :src="image.url" :alt="image.alt"/>
</figure>
</section>
<section
v-if="source.videos.length"
class="video multiple">
<vue-plyr
v-for="(video,v) in source.videos"
:key="v">
<div class="plyr__video-embed">
<iframe
:src="video.url"
allowfullscreen
></iframe>
</div>
</vue-plyr>
</section>
</section>
</section>
</template>
<Entite v-if="entite" :entite="entite"/>
</template>
<template v-slot:footer>