From 4c839e0f30fad9e5df29f1f0682380581c582713 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 20 Aug 2020 00:14:27 +0200
Subject: viewer: information panel with markdown
github: resolves #214
github: resolves #37
---
viewer/src/components/LdInformation.vue | 59 ++++++++++++++++++++++++++++-----
1 file changed, 51 insertions(+), 8 deletions(-)
(limited to 'viewer/src/components')
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 @@
-->
<template>
- <div class="flex-column">
- <div>{{item.title}}</div>
- <div>{{item.description}}</div>
- <div>{{item.datetime}}</div>
- <b-taglist>
- <b-tag v-for="tag in item.tags" :key="tag">{{tag}}</b-tag>
- </b-taglist>
+ <div class="flex-column" :class="$style.infopanel">
+ <div v-if="item.title" :class="$style.title">{{ item.title }}</div>
+ <time v-if="item.datetime" :datetime="item.datetime" :class="$style.datetime">{{ formatDate }}</time>
+ <div v-if="item.description" :class="$style.description" v-html="formatDescription" />
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
+import marked from "marked";
@Component
export default class LdInformation extends Vue {
@Prop({ required: true }) readonly item!: Gallery.Item;
+
+ get formatDate() {
+ const date = this.item.datetime.substr(0, 10);
+ const time = this.item.datetime.substr(11, 5);
+ return `${date} ${time}`;
+ }
+
+ get formatDescription() {
+ if (!this.item.description) return "";
+ return marked(this.item.description);
+ }
}
</script>
-<style lang="scss">
+<style lang="scss" module>
+@import "~@/assets/scss/theme.scss";
+
+.infopanel {
+ padding: 2px 2px 7px 7px;
+ overflow-wrap: break-word;
+
+ .title {
+ font-weight: bold;
+ }
+ .datetime {
+ font-size: 0.9em;
+ color: $palette-300;
+ }
+ .description {
+ padding-bottom: 7px;
+ > * {
+ margin-top: 5px;
+ }
+ ul,
+ ol {
+ margin-left: 1em;
+ }
+ ul {
+ list-style-type: disc;
+ }
+ a {
+ color: $palette-200;
+ &:hover {
+ color: $palette-050;
+ text-decoration: underline;
+ }
+ }
+ }
+}
</style>
--
cgit v1.2.3