From 05e8b2a982273f6d28bea8897caa2c64813d5dc0 Mon Sep 17 00:00:00 2001 From: joan <joan@verdnatura.es> Date: Tue, 15 Nov 2022 13:38:30 +0100 Subject: [PATCH] feat(notFound): updated not found page - closes #4719 --- src/i18n/en/index.js | 1 + src/i18n/es/index.js | 1 + src/pages/NotFound.vue | 39 +++++++++++++++++++++++++++++---------- src/router/routes.js | 10 +++++----- 4 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js index 857df8d89..229a5b995 100644 --- a/src/i18n/en/index.js +++ b/src/i18n/en/index.js @@ -19,6 +19,7 @@ export default { remove: 'Remove', reset: 'Reset', cancel: 'Cancel', + back: 'Back', yes: 'Yes', no: 'No', noChanges: 'No changes to save', diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js index 57ed01b0d..c8dff9d30 100644 --- a/src/i18n/es/index.js +++ b/src/i18n/es/index.js @@ -19,6 +19,7 @@ export default { remove: 'Eliminar', reset: 'Restaurar', cancel: 'Cancelar', + back: 'Volver', yes: 'Si', no: 'No', noChanges: 'Sin cambios que guardar', diff --git a/src/pages/NotFound.vue b/src/pages/NotFound.vue index 65b91a3b8..98ed76297 100644 --- a/src/pages/NotFound.vue +++ b/src/pages/NotFound.vue @@ -1,20 +1,39 @@ -<template> - <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center"> - <div> - <div style="font-size: 30vh">404</div> +<script setup> +import { useI18n } from 'vue-i18n'; +import { useRouter } from 'vue-router'; - <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div> +const router = useRouter(); +const { t } = useI18n(); +</script> +<template> + <div class="text-center q-pa-md flex flex-center"> + <div> + <div class="text-grey-5" style="opacity: 0.4; font-size: 30vh"> + <q-icon name="vn:claims" /> + </div> + + <div class="text-h2 text-grey-5" style="opacity: 0.4">{{ t('notFound') }}</div> <q-btn + @click="router.go(-1)" + :label="t('globals.back')" class="q-mt-xl" - color="white" - text-color="blue" + color="primary" unelevated - to="/" - label="Go Home" + outline no-caps /> </div> </div> </template> - +<style lang="scss" scoped></style> +<i18n> +{ + 'en': { + 'notFound': 'Oops. Nothing here...' + }, + 'es': { + 'notFound': 'Vaya. Nada por aquĆ...' + } +} +</i18n> diff --git a/src/router/routes.js b/src/router/routes.js index db21227a5..a7261379f 100644 --- a/src/router/routes.js +++ b/src/router/routes.js @@ -25,12 +25,12 @@ const routes = [ customer, ticket, claim, + { + path: '/:pathMatch(.*)*', + name: 'NotFound', + component: () => import('../pages/NotFound.vue'), + } ], - }, - { - path: '/:pathMatch(.*)*', - name: 'NotFound', - component: () => import('../pages/NotFound.vue'), } ];