except pages icon

mySouler · Jul 24, 2018 · 92e537b · 92e537b
1 parent 79adf37
commit 92e537b
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 11 deletions.
diff --git a/src/components/pages/404-pages/404PagesPage.vue b/src/components/pages/404-pages/404PagesPage.vue
@@ -3,7 +3,7 @@
     <div class="col-md-12">
       <vuestic-widget :headerText="'404 Pages'">
         <div class="row">
-          <div class="col-md-3">
+          <div class="col-md-3 not-found-pages__box">
             <div class="not-found-pages__advanced-wallpaper">
               <img src="https://i.imgur.com/GzUR0Wz.png not-found-pages__advanced-pic"/>
               <div class="not-found-pages__container">
@@ -47,7 +47,7 @@
               <img src="https://i.imgur.com/qcOlDz7.png"/>
               <div class="not-found-pages__container">
                 <h6 class="not-found-pages__advanced-text">Large text heading</h6>
-                <router-link :to="{ path: '/pages/not-found-custom' }">
+                <router-link :to="{ path: '/pages/not-found-large-text' }">
                   <button class="btn btn-primary not-found-pages__advanced-button">
                     {{ 'View Example' }}
                   </button>
@@ -111,9 +111,5 @@ export default {
     background-color: #ffffff;
     box-shadow: 0 8px 14.7px 1.3px rgba(188, 207, 190, 0.5);
   }
-
-  &__advanced-pic {
-
-  }
 }
 </style>
diff --git a/src/components/pages/404-pages/VuesticPageNotFoundCustom.vue b/src/components/pages/404-pages/VuesticPageNotFoundCustom.vue
@@ -16,7 +16,7 @@
           <a href="mailto:[email protected]">[email protected]</a>
         </div>
       </div>
-      <div class="not-found-wallpaper col-md-12">
+      <div class="not-found-wallpaper col-md-12 vuestic-page-not-found-custom__wallpaper-button">
         <router-link :to="{ path: './dashboard' }">
           <button class="btn btn-primary vuestic-page-not-found-custom__button">
             {{ 'Back to Dashboard' }}
@@ -49,7 +49,16 @@ export default {
 
   &__custom-image {
     padding-top: 30px;
-    width: 20%;
+    width: 25%;
+    margin-right: 3%;
+  }
+
+  &__wallpaper-button {
+    z-index: 1;
+    position: absolute;
+    background: transparent;
+    width: 250px;
+    margin-left: 43%
   }
 
   &__button {
@@ -61,12 +70,12 @@ export default {
   }
 
   &__sad-image {
-    width: 50%;
+    width: 60%;
     height: 100%;
   }
 
   &__text {
-    padding-top: 6%;
+    padding-top: 3%;
     color: white;
   }
 
@@ -88,7 +97,7 @@ export default {
 
   &__not-found-wallpaper-sad {
     position: absolute;
-    height: 35%;
+    height: 40%;
     bottom: 0;
     padding-left: 1000px;
   }
@@ -110,6 +119,15 @@ export default {
     .vuestic-page-not-found-custom {
       height: $auth-mobile-main-h;
 
+      &__custom-image {
+        width: 70%;
+      }
+
+      &__wallpaper-button {
+        width: 100%;
+        margin-left: 0;
+      }
+
       &__message {
         justify-content: center;
       }

diff --git a/src/components/pages/404-pages/VuesticPageNotFoundLargeText.vue b/src/components/pages/404-pages/VuesticPageNotFoundLargeText.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="vuestic-page-not-found-large-text">
+    <div class="vuestic-page-not-found-custom__content">
+      <div class="not-found-wallpaper">
+        <router-link class="i-vuestic vuestic-page-not-found-large-text__i-vuestic" :to="{path: '/'}"/>
+      </div>
+      <div class="not-found-wallpaper">
+        <h1 class="vuestic-page-not-found-large-text__number">404</h1>
+      </div>
+      <div class="not-found-wallpaper">
+        <h3 class="vuestic-page-not-found-large-text__text">The page's gonna fishing.</h3>
+      </div>
+      <div class="not-found-wallpaper col-md-12">
+        <div class="row vuestic-page-not-found-large-text__message">
+          <h4 class="vuestic-page-not-found-large-text__text-small">If you fell that it's not right, please send us a message at &nbsp</h4>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </div>
+      </div>
+      <div class="not-found-wallpaper col-md-12">
+        <router-link :to="{ path: './dashboard' }">
+          <button class="btn btn-primary vuestic-page-not-found-large-text__button">
+            {{ 'Back to Dashboard' }}
+          </button>
+        </router-link>
+      </div>
+    </div>
+    <div class="not-found-wallpaper vuestic-page-not-found-large-text__not-found-wallpaper-sad">
+      <img src="https://i.imgur.com/hu80UGU.png" class="vuestic-page-not-found-large-text__sad-image"/>
+    </div>
+    <div class="made-by-footer">
+      <span>
+        ©2018. Made by &nbsp
+        <a href="http://epicmax.co"> Epicmax</a>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'vuestic-page-not-found-large-text'
+}
+</script>
+
+<style lang="scss">
+.vuestic-page-not-found-large-text {
+  height: 100vh;
+  background-color: $top-nav-bg;
+
+  &__number {
+    font-size: 250px;
+    text-align: center;
+    color: white;
+  }
+
+  &__button {
+    width: 234px;
+    height: 42px;
+    padding-left: 22px;
+    padding-top: 10px;
+    font-size: 16px;
+  }
+
+  &__sad-image {
+    width: 50%;
+    height: 100%;
+  }
+
+  &__text {
+    padding-top: 3%;
+    color: white;
+  }
+
+  &__text-small {
+    font-family: SourceSansPro;
+    font-size: 16px;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: 1.5;
+    letter-spacing: normal;
+    text-align: center;
+    color: #bbb4b2;
+  }
+
+  &__i-vuestic {
+    margin-top: 3%;
+  }
+
+  &__not-found-wallpaper-sad {
+    position: absolute;
+    height: 35%;
+    bottom: 0;
+    padding-left: 1000px;
+  }
+
+  .not-found-wallpaper {
+    background-color: $top-nav-bg;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    .i-vuestic {
+      z-index: 2;
+      height: $auth-wallpaper-ivuestic-h;
+      width: 100%;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .vuestic-page-not-found-large-text {
+      height: $auth-mobile-main-h;
+
+      &__number {
+        font-size: 150px;
+      }
+
+      &__message {
+        justify-content: center;
+      }
+
+      &__i-vuestic {
+        margin-top: 5%;
+      }
+
+      &__not-found-wallpaper-sad {
+        padding: 0;
+        height: 35%;
+      }
+
+      &__text-small {
+        font-size: 15px;
+      }
+    }
+  }
+  .made-by-footer {
+    display: flex;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    padding-top: 25px;
+    padding-bottom: $made-by-footer-pb;
+    position: absolute;
+    bottom: 0;
+    height: calc(#{$layout-padding} + #{$widget-mb});
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -9,6 +9,8 @@ import VuesticPageNotFoundSimple
   from '../components/pages/404-pages/VuesticPageNotFoundSimple'
 import VuesticPageNotFoundCustom
   from '../components/pages/404-pages/VuesticPageNotFoundCustom'
+import VuesticPageNotFoundLargeText
+  from '../components/pages/404-pages/VuesticPageNotFoundLargeText'
 
 Vue.use(Router)
 
@@ -65,6 +67,10 @@ export default new Router({
       path: '/pages/not-found-custom',
       component: VuesticPageNotFoundCustom
     },
+    {
+      path: '/pages/not-found-large-text',
+      component: VuesticPageNotFoundLargeText
+    },
     {
       name: 'Admin',
       path: '/admin',