Migrate error page to Bootstrap

fightforthefuture · Apr 7, 2020 · de1a581 · de1a581
1 parent 9b7805c
commit de1a581
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 25 deletions.
diff --git a/layouts/error.vue b/layouts/error.vue
@@ -1,32 +1,19 @@
 <i18n src="~/locales/layouts/error.yml"></i18n>
 
 <template>
-  <DefaultLayout>
-    <section class="sml-pad-y3 med-pad-y6">
-      <div class="wrapper">
-        <div class="row">
-          <div class="sml-c12 lrg-c8 grid-center text-center">
-            <h1 v-if="error.statusCode === 404">{{ $t('404_title') }}</h1>
-            <h1 v-else>{{ error.statusCode }} - {{ error.message }}</h1>
-            <p class="sml-push-y2 med-push-y3">
-              {{ $t('return') }}
-              <nuxt-link :to="localePath('index')">{{ $t('homepage') }}</nuxt-link>.
-            </p>
-          </div> <!-- .c -->
-        </div> <!-- .row -->
-      </div> <!-- .wrapper -->
-    </section>
-  </DefaultLayout>
+  <div class="jumbotron jumbotron-fluid text-center">
+    <h1 class="display-4">
+      <span v-if="error.statusCode === 404">{{ $t('404_title') }}</span>
+      <span v-else>{{ error.statusCode }} - {{ error.message }}</span>
+    </h1>
+    <p class="lead">
+      <nuxt-link :to="localePath('index')">{{ $t('return_home') }}</nuxt-link>
+    </p>
+  </div>
 </template>
 
 <script>
-import DefaultLayout from '~/components/DefaultLayout'
-
 export default {
-  components: {
-    DefaultLayout
-  },
-
   props: {
     error: {
       type: Object,

diff --git a/locales/layouts/error.yml b/locales/layouts/error.yml
@@ -1,4 +1,3 @@
 en:
-  404_title: 404 - Page not found
-  return: Return to the
-  homepage: homepage
+  404_title: 404 - Page not found 😳
+  return_home: Return to the home page.