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.
fix (404 pages) : style and routing refactoring (epicmaxco#294)
* fix (404 pages) : style and routing refactoring * fix(404): proper routes * fix(404): 404 pages selection styles fix * fix(404): MadeByComponent naming fix * fix(404): sad guy image placement * fix(404): back buttton respinsive style * fix(404): large text and custom image pages - styles * feat(404): pages list - reduce templating
- Loading branch information
1 parent
126ead2
commit 33f6299
Showing
8 changed files
with
209 additions
and
286 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
4 changes: 2 additions & 2 deletions
4
...nents/pages/404-pages/MadyByComponent.vue → ...nents/pages/404-pages/MadeByComponent.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
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 |
|---|---|---|
|
|
@@ -13,132 +13,115 @@ | |
| <div class="vuestic-page-not-found-custom__wallpaper col-md-12"> | ||
| <div class="row vuestic-page-not-found-custom__message"> | ||
| <h4 class="vuestic-page-not-found-custom__text-small">If you feel that it's not right, please send us a message at  </h4> | ||
| <a href="mailto:[email protected]">hi@epicmax.co</a> | ||
| <a href="mailto:[email protected]">hello@epicmax.co</a> | ||
| </div> | ||
| </div> | ||
| <div class="vuestic-page-not-found-custom__wallpaper col-md-12 vuestic-page-not-found-custom__wallpaper-button"> | ||
| <router-link :to="{ path: './dashboard' }"> | ||
| <button class="btn btn-primary"> | ||
| <button class="btn btn-primary back-button"> | ||
| {{'Back to dashboard'}} | ||
| </button> | ||
| </router-link> | ||
| </div> | ||
| </div> | ||
| <div class="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> | ||
| <vuestic-page-not-found-sad-wallpaper/> | ||
| <made-by-component/> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import MadeByComponent from './MadyByComponent' | ||
| import MadeByComponent from './MadeByComponent' | ||
| import VuesticPageNotFoundSadWallpaper from './VuesticPageNotFoundSadWallpaper.vue' | ||
| export default { | ||
| name: 'vuestic-page-not-found-custom', | ||
| components: { | ||
| MadeByComponent | ||
| MadeByComponent, | ||
| VuesticPageNotFoundSadWallpaper | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| .vuestic-page-not-found-custom { | ||
| height: 100vh; | ||
| min-height: 100vh; | ||
| padding-bottom: 84px; | ||
| background-color: $top-nav-bg; | ||
| &__custom-image { | ||
| padding-top: 30px; | ||
| padding-top: 60px; | ||
| width: 30%; | ||
| margin-right: 3%; | ||
| min-width: 350px; | ||
| } | ||
| &__wallpaper-button { | ||
| z-index: 1; | ||
| position: absolute; | ||
| background: transparent; | ||
| width: 340px; | ||
| margin-left: 43%; | ||
| min-height: 150px; | ||
| } | ||
| &__sad-image { | ||
| width: 505px; | ||
| height: 400px; | ||
| bottom: 0; | ||
| padding-top: 20px; | ||
| background-color: $top-nav-bg; | ||
| overflow: hidden; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| } | ||
| &__text { | ||
| padding-top: 3%; | ||
| color: white; | ||
| } | ||
| &__text-small { | ||
| font-size: 16px; | ||
| font-size: $font-size-root; | ||
| line-height: 1.5; | ||
| text-align: center; | ||
| color: white; | ||
| font-weight: normal; | ||
| } | ||
| &__i-vuestic { | ||
| margin-top: 3%; | ||
| z-index: 2; | ||
| height: $auth-wallpaper-ivuestic-h; | ||
| width: 100%; | ||
| } | ||
| &__not-found-wallpaper-sad { | ||
| overflow: hidden; | ||
| position: absolute; | ||
| height: 40%; | ||
| width: 100%; | ||
| bottom: 0; | ||
| padding-left: 80%; | ||
| } | ||
| &__wallpaper { | ||
| overflow: hidden; | ||
| background-color: $top-nav-bg; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| } | ||
| @include media-breakpoint-down(xs) { | ||
| .vuestic-page-not-found-custom { | ||
| overflow: hidden; | ||
| height: $auth-mobile-main-h; | ||
| &__custom-image { | ||
| width: 90%; | ||
| padding-top: 30px; | ||
| margin-right: 30px; | ||
| } | ||
| &__sad-image { | ||
| width: 200px; | ||
| height: 200px; | ||
| overflow: hidden; | ||
| } | ||
| &__wallpaper-button { | ||
| width: 100%; | ||
| margin-left: 0; | ||
| } | ||
| .back-button { | ||
| max-width: 300px; | ||
| padding-left: 30px; | ||
| padding-right: 30px; | ||
| } | ||
| } | ||
| &__message { | ||
| justify-content: center; | ||
| } | ||
| &__i-vuestic { | ||
| margin-top: 5%; | ||
| } | ||
| &__not-found-wallpaper-sad { | ||
| overflow: hidden; | ||
| height: 25%; | ||
| padding-left: 50%; | ||
| } | ||
| &__text-small { | ||
| font-size: 15px; | ||
| } | ||
|
|
||
Oops, something went wrong.