forked from epicmaxco/vuestic-admin
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
style refactor and custom-image 404 page
- Loading branch information
1 parent
dd297eb
commit 79adf37
Showing
5 changed files
with
196 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
144 changes: 144 additions & 0 deletions
144
src/components/pages/404-pages/VuesticPageNotFoundCustom.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| <template> | ||
| <div class="vuestic-page-not-found-custom"> | ||
| <div class="vuestic-page-not-found-custom__content"> | ||
| <div class="not-found-wallpaper"> | ||
| <router-link class="i-vuestic vuestic-page-not-found-custom__i-vuestic" :to="{path: '/'}"/> | ||
| </div> | ||
| <div class="not-found-wallpaper"> | ||
| <img src="https://i.imgur.com/wodIng5.png" class="vuestic-page-not-found-custom__custom-image"/> | ||
| </div> | ||
| <div class="not-found-wallpaper"> | ||
| <h3 class="vuestic-page-not-found-custom__text">The page's gonna fishing.</h3> | ||
| </div> | ||
| <div class="not-found-wallpaper col-md-12"> | ||
| <div class="row vuestic-page-not-found-custom__message"> | ||
| <h4 class="vuestic-page-not-found-custom__text-small">If you fell that it's not right, please send us a message at  </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-custom__button"> | ||
| {{ 'Back to Dashboard' }} | ||
| </button> | ||
| </router-link> | ||
| </div> | ||
| </div> | ||
| <div class="not-found-wallpaper vuestic-page-not-found-custom__not-found-wallpaper-sad"> | ||
| <img src="https://i.imgur.com/hu80UGU.png" class="vuestic-page-not-found-custom__sad-image"/> | ||
| </div> | ||
| <div class="made-by-footer"> | ||
| <span> | ||
| ©2018. Made by   | ||
| <a href="http://epicmax.co"> Epicmax</a> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: 'vuestic-page-not-found-custom' | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .vuestic-page-not-found-custom { | ||
| height: 100vh; | ||
| background-color: $top-nav-bg; | ||
| &__custom-image { | ||
| padding-top: 30px; | ||
| width: 20%; | ||
| } | ||
| &__button { | ||
| width: 234px; | ||
| height: 42px; | ||
| padding-left: 22px; | ||
| padding-top: 10px; | ||
| font-size: 16px; | ||
| } | ||
| &__sad-image { | ||
| width: 50%; | ||
| height: 100%; | ||
| } | ||
| &__text { | ||
| padding-top: 6%; | ||
| 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-custom { | ||
| height: $auth-mobile-main-h; | ||
| &__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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| <template> | ||
| <div class="vuestic-page-not-found-search"> | ||
| <div class="vuestic-page-not-found-search__content"> | ||
| <div class="auth-wallpaper"> | ||
| <div class="not-found-wallpaper"> | ||
| <router-link class="i-vuestic vuestic-page-not-found-search__i-vuestic" :to="{path: '/'}"/> | ||
| </div> | ||
| <div class="auth-wallpaper"> | ||
| <div class="not-found-wallpaper"> | ||
| <h3 class="vuestic-page-not-found-search__text">The page's gonna fishing.</h3> | ||
| </div> | ||
| <div class="auth-wallpaper col-md-12"> | ||
| <div class="not-found-wallpaper col-md-12"> | ||
| <div class="row vuestic-page-not-found-search__message"> | ||
| <h4 class="vuestic-page-not-found-search__text-small">If you fell that it's not right, please send us a message at  </h4> | ||
| <a href="mailto:[email protected]">[email protected]</a> | ||
| </div> | ||
| </div> | ||
| <div class="auth-wallpaper"> | ||
| <div class="not-found-wallpaper"> | ||
| <div class="form-group"> | ||
| <div class="input-group vuestic-page-not-found-search__input"> | ||
| <input | ||
|
|
@@ -26,7 +26,7 @@ | |
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="auth-wallpaper col-md-12 vuestic-page-not-found-search__auth-wallpaper-list"> | ||
| <div class="not-found-wallpaper col-md-12 vuestic-page-not-found-search__not-found-wallpaper-list"> | ||
| <ul class="vuestic-page-not-found-search__list" v-for="category in filterItems"> | ||
| {{ category.categoryName }} | ||
| <li class="vuestic-page-not-found-search__list-element" v-for="item in category.items"> | ||
|
|
@@ -37,7 +37,7 @@ | |
| </ul> | ||
| </div> | ||
| </div> | ||
| <div class="auth-wallpaper vuestic-page-not-found-search__auth-wallpaper-sad"> | ||
| <div class="not-found-wallpaper vuestic-page-not-found-search__not-found-wallpaper-sad"> | ||
| <img src="https://i.imgur.com/hu80UGU.png" class="vuestic-page-not-found-search__sad-image"/> | ||
| </div> | ||
| <div class="made-by-footer"> | ||
|
|
@@ -210,19 +210,6 @@ export default { | |
| height: 100%; | ||
| } | ||
| &__content { | ||
| .nav { | ||
| display: flex; | ||
| height: $top-mobile-nav-height; | ||
| background-color: $top-nav-bg; | ||
| .i-vuestic { | ||
| height: $auth-mobile-nav-ivuestic-h; | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
| &__text { | ||
| padding-top: 50px; | ||
| color: white; | ||
|
|
@@ -252,18 +239,18 @@ export default { | |
| width: 310px; | ||
| } | ||
| &__auth-wallpaper-sad { | ||
| &__not-found-wallpaper-sad { | ||
| position: absolute; | ||
| height: 30%; | ||
| bottom: 0; | ||
| padding-left: 1000px; | ||
| } | ||
| .auth-wallpaper { | ||
| .not-found-wallpaper { | ||
| background-color: $top-nav-bg; | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| align-items: fle x-start; | ||
| justify-content: center; | ||
| .i-vuestic { | ||
| z-index: 2; | ||
|
|
@@ -288,7 +275,7 @@ export default { | |
| font-size: 10px; | ||
| } | ||
| &__auth-wallpaper-list { | ||
| &__not-found-wallpaper-list { | ||
| font-size: 10px; | ||
| padding: 0; | ||
| } | ||
|
|
@@ -297,7 +284,7 @@ export default { | |
| margin-top: 5%; | ||
| } | ||
| &__auth-wallpaper-sad { | ||
| &__not-found-wallpaper-sad { | ||
| padding: 0; | ||
| height: 25%; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,27 @@ | ||
| <template> | ||
| <div class="vuestic-page-not-found-simple"> | ||
| <div class="vuestic-page-not-found-simple__content"> | ||
| <div class="auth-wallpaper"> | ||
| <div class="not-found-wallpaper"> | ||
| <router-link class="i-vuestic vuestic-page-not-found-simple__i-vuestic" :to="{path: '/'}"/> | ||
| </div> | ||
| <div class="auth-wallpaper"> | ||
| <div class="not-found-wallpaper"> | ||
| <h3 class="vuestic-page-not-found-simple__text">The page's gonna fishing.</h3> | ||
| </div> | ||
| <div class="auth-wallpaper col-md-12"> | ||
| <div class="not-found-wallpaper col-md-12"> | ||
| <div class="row vuestic-page-not-found-simple__message"> | ||
| <h4 class="vuestic-page-not-found-simple__text-small">If you fell that it's not right, please send us a message at  </h4> | ||
| <a href="mailto:[email protected]">[email protected]</a> | ||
| </div> | ||
| </div> | ||
| <div class="auth-wallpaper col-md-12"> | ||
| <div class="not-found-wallpaper col-md-12"> | ||
| <router-link :to="{ path: './dashboard' }"> | ||
| <button class="btn btn-primary vuestic-page-not-found-simple__button"> | ||
| {{ 'Back to Dashboard' }} | ||
| </button> | ||
| </router-link> | ||
| </div> | ||
| </div> | ||
| <div class="auth-wallpaper vuestic-page-not-found-simple__auth-wallpaper-sad"> | ||
| <div class="not-found-wallpaper vuestic-page-not-found-simple__not-found-wallpaper-sad"> | ||
| <img src="https://i.imgur.com/hu80UGU.png" class="vuestic-page-not-found-simple__sad-image"/> | ||
| </div> | ||
| <div class="made-by-footer"> | ||
|
|
@@ -58,19 +58,6 @@ export default { | |
| height: 100%; | ||
| } | ||
| &__content { | ||
| .nav { | ||
| display: flex; | ||
| height: $top-mobile-nav-height; | ||
| background-color: $top-nav-bg; | ||
| .i-vuestic { | ||
| height: $auth-mobile-nav-ivuestic-h; | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
| &__text { | ||
| padding-top: 10%; | ||
| color: white; | ||
|
|
@@ -92,14 +79,14 @@ export default { | |
| margin-top: 10%; | ||
| } | ||
| &__auth-wallpaper-sad { | ||
| &__not-found-wallpaper-sad { | ||
| position: absolute; | ||
| height: 30%; | ||
| bottom: 0; | ||
| padding-left: 1000px; | ||
| } | ||
| .auth-wallpaper { | ||
| .not-found-wallpaper { | ||
| background-color: $top-nav-bg; | ||
| overflow: hidden; | ||
| display: flex; | ||
|
|
@@ -124,7 +111,7 @@ export default { | |
| margin-top: 5%; | ||
| } | ||
| &__auth-wallpaper-sad { | ||
| &__not-found-wallpaper-sad { | ||
| padding: 0; | ||
| height: 35%; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters