aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdInformation.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdInformation.vue')
-rw-r--r--viewer/src/components/LdInformation.vue84
1 files changed, 0 insertions, 84 deletions
diff --git a/viewer/src/components/LdInformation.vue b/viewer/src/components/LdInformation.vue
deleted file mode 100644
index 68e1817..0000000
--- a/viewer/src/components/LdInformation.vue
+++ /dev/null
@@ -1,84 +0,0 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2020 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18-->
19
20<template>
21 <div v-if="item" class="flex-column" :class="$style.infopanel">
22 <div v-if="item.title" :class="$style.title">{{ item.title }}</div>
23 <time v-if="item.datetime" :datetime="item.datetime" :class="$style.datetime">{{ formatDate }}</time>
24 <Markdown v-if="item.description" :class="$style.description" :markdown="item.description" />
25 </div>
26</template>
27
28<script lang="ts">
29import { Item } from "@/@types/gallery";
30import { Markdown } from "@/components/async";
31import { Component, Prop, Vue } from "vue-property-decorator";
32
33@Component({
34 components: {
35 Markdown,
36 },
37})
38export default class LdInformation extends Vue {
39 @Prop({ required: true }) readonly item!: Item;
40
41 get formatDate() {
42 const date = this.item.datetime.substr(0, 10);
43 const time = this.item.datetime.substr(11, 5);
44 return `${date} ${time}`;
45 }
46}
47</script>
48
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}
84</style>