aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/layout/left/LayoutInformation.vue
diff options
context:
space:
mode:
authorpacien2022-09-03 01:34:26 +0200
committerpacien2022-09-03 01:34:26 +0200
commita8452594c6571e8003baa2aca14747eeeee08152 (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/views/layout/left/LayoutInformation.vue
parentdd9c9804e9e3da9880c711f53edb9c4a19d782f8 (diff)
parent00510820a2794efcadbc83f7f8b54318fe198ecb (diff)
downloadldgallery-a8452594c6571e8003baa2aca14747eeeee08152.tar.gz
Merge branch 'vue3-refactoring-staging' into develop
Reviewed-by: pacien <pacien.trangirard@pacien.net>
Diffstat (limited to 'viewer/src/views/layout/left/LayoutInformation.vue')
-rw-r--r--viewer/src/views/layout/left/LayoutInformation.vue99
1 files changed, 99 insertions, 0 deletions
diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue
new file mode 100644
index 0000000..780a458
--- /dev/null
+++ b/viewer/src/views/layout/left/LayoutInformation.vue
@@ -0,0 +1,99 @@
1<!-- ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 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
22 v-if="item"
23 class="flex-column"
24 :class="$style.infopanel"
25 >
26 <div
27 v-if="item.title"
28 :class="$style.title"
29 >
30 {{ item.title }}
31 </div>
32 <time
33 v-if="item.datetime"
34 :datetime="item.datetime"
35 :class="$style.datetime"
36 >
37 {{ formatDate }}
38 </time>
39 <LdMarkdown
40 v-if="item.description"
41 :class="$style.description"
42 :markdown="item.description"
43 />
44 </div>
45</template>
46
47<script setup lang="ts">
48import { Item } from '@/@types/gallery';
49import { LdMarkdown } from '@/components/async';
50import { computed, PropType } from 'vue';
51
52const props = defineProps({
53 item: { type: Object as PropType<Item>, required: true },
54});
55
56const formatDate = computed(() => {
57 const { datetime } = props.item;
58 const date = datetime.substring(0, 10);
59 const time = datetime.substring(11, 16);
60 return `${date} ${time}`;
61});
62</script>
63
64<style lang="scss" module>
65@import "~@/assets/scss/theme";
66
67.infopanel {
68 padding: 2px 2px 7px 7px;
69 overflow-wrap: break-word;
70
71 .title {
72 font-weight: bold;
73 }
74 .datetime {
75 font-size: 0.9em;
76 color: $palette-300;
77 }
78 .description {
79 padding-bottom: 7px;
80 > * {
81 margin-top: 5px;
82 }
83 ul,
84 ol {
85 margin-left: 1em;
86 }
87 ul {
88 list-style-type: disc;
89 }
90 a {
91 color: $palette-200;
92 &:hover {
93 color: $palette-050;
94 text-decoration: underline;
95 }
96 }
97 }
98}
99</style>