Download as
Browse Code »

Commit 7b12a2a22130f54ff0693223dfe31796b18b56af

Authored by Leonardo Merlin
1 parent 2870b054
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Add error page

Showing 5 changed files with 171 additions and 37 deletions   Show diff stats
src/app/index.route.js
  Diff comments   View file @7b12a2a
... ... @@ -155,9 +155,18 @@
155 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
  Diff comments   View file @7b12a2a
1 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 34 display: table-cell;
22 35 float: none;
23 36 height: 100%;
  37 + }
  38 + .col-xs-top {
24 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 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 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 }
... ...
src/app/pages/erro/erro.html 0 → 100644
  Diff comments   View file @7b12a2a
... ... @@ -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>&#8226;</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>
... ...
src/app/pages/erro/erro.scss 0 → 100644
  Diff comments   View file @7b12a2a
... ... @@ -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
  Diff comments   View file @7b12a2a
... ... @@ -3,7 +3,7 @@
3 3 <div class="row">
4 4 <div class="col-xs-12 text-center">
5 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 7 </div>
8 8 </div>
9 9 </div>
... ...