Commit 7b12a2a22130f54ff0693223dfe31796b18b56af
1 parent
2870b054
Exists in
master
and in
8 other branches
Add error page
Showing
5 changed files
with
171 additions
and
37 deletions
Show diff stats
src/app/index.route.js
@@ -155,9 +155,18 @@ | @@ -155,9 +155,18 @@ | ||
155 | 'footer': { templateUrl: 'app/pages/footer/footer.html' } | 155 | 'footer': { templateUrl: 'app/pages/footer/footer.html' } |
156 | } | 156 | } |
157 | }) | 157 | }) |
158 | + .state('erro', { | ||
159 | + url: '/erro', | ||
160 | + ncyBreadcrumb: {label: 'Erro'}, | ||
161 | + views: { | ||
162 | + 'header': { templateUrl: 'app/pages/header/header.html' }, | ||
163 | + 'main': { templateUrl: 'app/pages/erro/erro.html' }, | ||
164 | + 'footer': { templateUrl: 'app/pages/footer/footer.html' } | ||
165 | + } | ||
166 | + }) | ||
158 | ; | 167 | ; |
159 | 168 | ||
160 | - $urlRouterProvider.otherwise('/'); | 169 | + $urlRouterProvider.otherwise('/erro'); |
161 | } | 170 | } |
162 | 171 | ||
163 | })(); | 172 | })(); |
src/app/layout.scss
1 | .row-height { | 1 | .row-height { |
2 | - display: table; | ||
3 | - table-layout: fixed; | ||
4 | - height: 100%; | ||
5 | - width: 100%; | 2 | + display: table; |
3 | + table-layout: fixed; | ||
4 | + height: 100%; | ||
5 | + width: 100%; | ||
6 | +} | ||
6 | 7 | ||
7 | - @media (max-width: $screen-sm) { | ||
8 | - display: block; | ||
9 | - } | 8 | +.col-height { |
9 | + display: table-cell; | ||
10 | + float: none; | ||
11 | + height: 100%; | ||
12 | +} | ||
10 | 13 | ||
11 | - // @media (min-width: $screen-sm + 1) { | ||
12 | - // height: $hLine * 2; | ||
13 | - // } | 14 | +.col-top { |
15 | + vertical-align: top; | ||
16 | +} | ||
14 | 17 | ||
15 | - // @media (min-width: $screen-md + 1) { | ||
16 | - // height: $hLine * 2; | ||
17 | - // } | 18 | +.col-middle { |
19 | + vertical-align: middle; | ||
18 | } | 20 | } |
19 | 21 | ||
20 | -.col-height { | 22 | +.col-bottom { |
23 | + vertical-align: bottom; | ||
24 | +} | ||
25 | + | ||
26 | +@media (min-width: 480px) { | ||
27 | + .row-xs-height { | ||
28 | + display: table; | ||
29 | + table-layout: fixed; | ||
30 | + height: 100%; | ||
31 | + width: 100%; | ||
32 | + } | ||
33 | + .col-xs-height { | ||
21 | display: table-cell; | 34 | display: table-cell; |
22 | float: none; | 35 | float: none; |
23 | height: 100%; | 36 | height: 100%; |
37 | + } | ||
38 | + .col-xs-top { | ||
24 | vertical-align: top; | 39 | vertical-align: top; |
40 | + } | ||
41 | + .col-xs-middle { | ||
42 | + vertical-align: middle; | ||
43 | + } | ||
44 | + .col-xs-bottom { | ||
45 | + vertical-align: bottom; | ||
46 | + } | ||
25 | } | 47 | } |
26 | 48 | ||
27 | -.col-height--align-bottom { | 49 | +@media (min-width: 768px) { |
50 | + .row-sm-height { | ||
51 | + display: table; | ||
52 | + table-layout: fixed; | ||
53 | + height: 100%; | ||
54 | + width: 100%; | ||
55 | + } | ||
56 | + .col-sm-height { | ||
57 | + display: table-cell; | ||
58 | + float: none; | ||
59 | + height: 100%; | ||
60 | + } | ||
61 | + .col-sm-top { | ||
62 | + vertical-align: top; | ||
63 | + } | ||
64 | + .col-sm-middle { | ||
65 | + vertical-align: middle; | ||
66 | + } | ||
67 | + .col-sm-bottom { | ||
28 | vertical-align: bottom; | 68 | vertical-align: bottom; |
69 | + } | ||
29 | } | 70 | } |
30 | 71 | ||
31 | -.inside { | ||
32 | - margin-top: 20px; | ||
33 | - margin-bottom: 20px; | 72 | +@media (min-width: 992px) { |
73 | + .row-md-height { | ||
74 | + display: table; | ||
75 | + table-layout: fixed; | ||
76 | + height: 100%; | ||
77 | + width: 100%; | ||
78 | + } | ||
79 | + .col-md-height { | ||
80 | + display: table-cell; | ||
81 | + float: none; | ||
82 | + height: 100%; | ||
83 | + } | ||
84 | + .col-md-top { | ||
85 | + vertical-align: top; | ||
86 | + } | ||
87 | + .col-md-middle { | ||
88 | + vertical-align: middle; | ||
89 | + } | ||
90 | + .col-md-bottom { | ||
91 | + vertical-align: bottom; | ||
92 | + } | ||
34 | } | 93 | } |
35 | 94 | ||
36 | -.inside-full-height { | 95 | +@media (min-width: 1200px) { |
96 | + .row-lg-height { | ||
97 | + display: table; | ||
98 | + table-layout: fixed; | ||
37 | height: 100%; | 99 | height: 100%; |
38 | - margin-top: 0; | ||
39 | - margin-bottom: 0; | ||
40 | - | ||
41 | - | ||
42 | - @media (max-width: $screen-sm) { | ||
43 | - border: 1px solid; | ||
44 | - border-radius: 3px; | ||
45 | - padding: 20px; | ||
46 | - margin: 10px 0; | ||
47 | - | ||
48 | - @each $category, $color in $categories { | ||
49 | - .#{$category} & { | ||
50 | - border-color: $color; | ||
51 | - } | ||
52 | - } | ||
53 | - } | 100 | + width: 100%; |
101 | + } | ||
102 | + .col-lg-height { | ||
103 | + display: table-cell; | ||
104 | + float: none; | ||
105 | + height: 100%; | ||
106 | + } | ||
107 | + .col-lg-top { | ||
108 | + vertical-align: top; | ||
109 | + } | ||
110 | + .col-lg-middle { | ||
111 | + vertical-align: middle; | ||
112 | + } | ||
113 | + .col-lg-bottom { | ||
114 | + vertical-align: bottom; | ||
115 | + } | ||
54 | } | 116 | } |
@@ -0,0 +1,25 @@ | @@ -0,0 +1,25 @@ | ||
1 | +<div class="page--erro"> | ||
2 | + <div class="container"> | ||
3 | + <div class="row"> | ||
4 | + <div class="row-height"> | ||
5 | + <div class="col-sm-4 col-sm-height col-middle"> | ||
6 | + <div class="inside inside-full-height"> | ||
7 | + <div class="content"> | ||
8 | + <span class="icon-circle icon-wrapper-rounded"> | ||
9 | + <span class="glyphicon glyphicon-remove" aria-hidden></span> | ||
10 | + </span> | ||
11 | + <h1>Erro</h1> | ||
12 | + <p> | ||
13 | + <span style="font-weight:bold;">Mas você ainda pode:</span> | ||
14 | + <br> | ||
15 | + <!-- <button type="button" class="btn btn-link" ng-click="goBack()">retornar à página anterior</button> --> | ||
16 | + <!-- <span>•</span> --> | ||
17 | + <button type="button" class="btn btn-link" ui-sref="inicio">retornar à página inicial</button> | ||
18 | + </p> | ||
19 | + </div> | ||
20 | + </div> | ||
21 | + </div> | ||
22 | + </div> | ||
23 | + </div> | ||
24 | + </div> | ||
25 | +</div> |
@@ -0,0 +1,38 @@ | @@ -0,0 +1,38 @@ | ||
1 | +.page--erro { | ||
2 | + background-color: #f9f9f9; | ||
3 | + | ||
4 | + h1 { | ||
5 | + color: #464646; | ||
6 | + font-size: 72px; | ||
7 | + font-weight: bold; | ||
8 | + margin-bottom: 40px; | ||
9 | + } | ||
10 | + | ||
11 | + .row-height { | ||
12 | + min-height: 400px; | ||
13 | + } | ||
14 | + | ||
15 | + .content { | ||
16 | + text-align: center; | ||
17 | + } | ||
18 | + | ||
19 | + .icon-circle { | ||
20 | + display: inline-block; | ||
21 | + font-size: 40px; | ||
22 | + line-height: 33px; | ||
23 | + font-weight: normal; | ||
24 | + | ||
25 | + position: relative; | ||
26 | + top: -5px; | ||
27 | + padding: 20px; | ||
28 | + margin-top: 5px; | ||
29 | + margin-right: 30px; | ||
30 | + | ||
31 | + color: #fff; | ||
32 | + background: #c93e55; | ||
33 | + } | ||
34 | + | ||
35 | + h1 { | ||
36 | + display: inline-block; | ||
37 | + } | ||
38 | +} |
src/app/pages/footer/footer.html
@@ -3,7 +3,7 @@ | @@ -3,7 +3,7 @@ | ||
3 | <div class="row"> | 3 | <div class="row"> |
4 | <div class="col-xs-12 text-center"> | 4 | <div class="col-xs-12 text-center"> |
5 | <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a> | 5 | <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a> |
6 | - <a href="#header" class="pull-right" ng-click="scrollTo('#header')">Voltar para o topo</a> | 6 | + <a href="#header" style="position:absolute;right:0;top:-10px;" ng-click="scrollTo('#header')">Voltar para o topo</a> |
7 | </div> | 7 | </div> |
8 | </div> | 8 | </div> |
9 | </div> | 9 | </div> |