viewer/GalleryNavigation: better error messages

Introducing a generic error page with some icon and a different error for unknown resources

GitHub: closes #190

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 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2020  Pacien TRAN-GIRARD
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.content">
+      <fa-icon :class="$style.icon" :icon="icon" size="6x" />
+      <div :class="$style.message" v-html="message"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component export default class LdError extends Vue {
+  @Prop({ required: true }) readonly icon!: string;
+  @Prop({ required: true }) readonly message!: string;
+}
+</script>
+
+<style lang="scss" module>
+@import "~@/assets/scss/theme.scss";
+
+.container {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  text-align: center;
+
+  & > *:not(last-child) {
+    margin-bottom: 0.15em;
+  }
+}
+
+.icon {
+  color: $disabled-color;
+}
+
+.message {
+  color: $text-light;
+}
+</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 @@
 -->
 
 <template>
-  <div class="thumbnail-tiles">
+  <ld-error v-if="hasNoResults()" icon="search" :message="noresult" />
+  <div v-else class="thumbnail-tiles">
     <router-link v-for="item in items" :key="item.path" :to="item.path">
       <ld-thumbnail :item="item" />
     </router-link>
-    <div v-if="hasNoResults()" class="noresult">{{noresult}}</div>
   </div>
 </template>
 
@@ -47,11 +47,9 @@ export default class LdPicture extends Vue {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-evenly;
+
   & > a {
     margin: 2px;
   }
-  & .noresult {
-    margin-top: 40px;
-  }
 }
 </style>