aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
authorZero~Informatique2020-08-20 00:14:27 +0200
committerG.Fouet2020-09-11 21:53:18 +0200
commit4c839e0f30fad9e5df29f1f0682380581c582713 (patch)
tree763b80f708a1c08137627610487db29bc38bb6ad /viewer/src/components
parentb46f0c99bb6f73ddc2ecdc0e47655b7110251cc9 (diff)
downloadldgallery-4c839e0f30fad9e5df29f1f0682380581c582713.tar.gz
viewer: information panel with markdown
github: resolves #214 github: resolves #37
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdInformation.vue59
1 files changed, 51 insertions, 8 deletions
diff --git a/viewer/src/components/LdInformation.vue b/viewer/src/components/LdInformation.vue
index ac526d5..29bd1be 100644
--- a/viewer/src/components/LdInformation.vue
+++ b/viewer/src/components/LdInformation.vue
@@ -18,24 +18,67 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="flex-column"> 21 <div class="flex-column" :class="$style.infopanel">
22 <div>{{item.title}}</div> 22 <div v-if="item.title" :class="$style.title">{{ item.title }}</div>
23 <div>{{item.description}}</div> 23 <time v-if="item.datetime" :datetime="item.datetime" :class="$style.datetime">{{ formatDate }}</time>
24 <div>{{item.datetime}}</div> 24 <div v-if="item.description" :class="$style.description" v-html="formatDescription" />
25 <b-taglist>
26 <b-tag v-for="tag in item.tags" :key="tag">{{tag}}</b-tag>
27 </b-taglist>
28 </div> 25 </div>
29</template> 26</template>
30 27
31<script lang="ts"> 28<script lang="ts">
32import { Component, Vue, Prop } from "vue-property-decorator"; 29import { Component, Vue, Prop } from "vue-property-decorator";
30import marked from "marked";
33 31
34@Component 32@Component
35export default class LdInformation extends Vue { 33export default class LdInformation extends Vue {
36 @Prop({ required: true }) readonly item!: Gallery.Item; 34 @Prop({ required: true }) readonly item!: Gallery.Item;
35
36 get formatDate() {
37 const date = this.item.datetime.substr(0, 10);
38 const time = this.item.datetime.substr(11, 5);
39 return `${date} ${time}`;
40 }
41
42 get formatDescription() {
43 if (!this.item.description) return "";
44 return marked(this.item.description);
45 }
37} 46}
38</script> 47</script>
39 48
40<style lang="scss"> 49<style lang="scss" module>
50@import "~@/assets/scss/theme.scss";
51
52.infopanel {
53 padding: 2px 2px 7px 7px;
54 overflow-wrap: break-word;
55
56 .title {
57 font-weight: bold;
58 }
59 .datetime {
60 font-size: 0.9em;
61 color: $palette-300;
62 }
63 .description {
64 padding-bottom: 7px;
65 > * {
66 margin-top: 5px;
67 }
68 ul,
69 ol {
70 margin-left: 1em;
71 }
72 ul {
73 list-style-type: disc;
74 }
75 a {
76 color: $palette-200;
77 &:hover {
78 color: $palette-050;
79 text-decoration: underline;
80 }
81 }
82 }
83}
41</style> 84</style>