aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components')
-rw-r--r--viewer/src/components/LdError.vue64
-rw-r--r--viewer/src/components/LdGallery.vue8
2 files changed, 67 insertions, 5 deletions
diff --git a/viewer/src/components/LdError.vue b/viewer/src/components/LdError.vue
new file mode 100644
index 0000000..5e266ab
--- /dev/null
+++ b/viewer/src/components/LdError.vue
@@ -0,0 +1,64 @@
1<!--
2-- ldgallery - A static generator which turns a collection of tagged
3-- pictures into a searchable web gallery.
4--
5-- Copyright (C) 2020 Pacien TRAN-GIRARD
6--
7-- This program is free software: you can redistribute it and/or modify
8-- it under the terms of the GNU Affero General Public License as
9-- published by the Free Software Foundation, either version 3 of the
10-- License, or (at your option) any later version.
11--
12-- This program is distributed in the hope that it will be useful,
13-- but WITHOUT ANY WARRANTY; without even the implied warranty of
14-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15-- GNU Affero General Public License for more details.
16--
17-- You should have received a copy of the GNU Affero General Public License
18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
19-->
20
21<template>
22 <div :class="$style.container">
23 <div :class="$style.content">
24 <fa-icon :class="$style.icon" :icon="icon" size="6x" />
25 <div :class="$style.message" v-html="message"></div>
26 </div>
27 </div>
28</template>
29
30<script lang="ts">
31import { Component, Prop, Vue } from "vue-property-decorator";
32
33@Component export default class LdError extends Vue {
34 @Prop({ required: true }) readonly icon!: string;
35 @Prop({ required: true }) readonly message!: string;
36}
37</script>
38
39<style lang="scss" module>
40@import "~@/assets/scss/theme.scss";
41
42.container {
43 min-height: 100%;
44 display: flex;
45 align-items: center;
46 justify-content: center;
47}
48
49.content {
50 text-align: center;
51
52 & > *:not(last-child) {
53 margin-bottom: 0.15em;
54 }
55}
56
57.icon {
58 color: $disabled-color;
59}
60
61.message {
62 color: $text-light;
63}
64</style>
diff --git a/viewer/src/components/LdGallery.vue b/viewer/src/components/LdGallery.vue
index 29c18b9..e512758 100644
--- a/viewer/src/components/LdGallery.vue
+++ b/viewer/src/components/LdGallery.vue
@@ -18,11 +18,11 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div class="thumbnail-tiles"> 21 <ld-error v-if="hasNoResults()" icon="search" :message="noresult" />
22 <div v-else class="thumbnail-tiles">
22 <router-link v-for="item in items" :key="item.path" :to="item.path"> 23 <router-link v-for="item in items" :key="item.path" :to="item.path">
23 <ld-thumbnail :item="item" /> 24 <ld-thumbnail :item="item" />
24 </router-link> 25 </router-link>
25 <div v-if="hasNoResults()" class="noresult">{{noresult}}</div>
26 </div> 26 </div>
27</template> 27</template>
28 28
@@ -47,11 +47,9 @@ export default class LdPicture extends Vue {
47 flex-wrap: wrap; 47 flex-wrap: wrap;
48 align-items: center; 48 align-items: center;
49 justify-content: space-evenly; 49 justify-content: space-evenly;
50
50 & > a { 51 & > a {
51 margin: 2px; 52 margin: 2px;
52 } 53 }
53 & .noresult {
54 margin-top: 40px;
55 }
56} 54}
57</style> 55</style>