From 7b12a2a22130f54ff0693223dfe31796b18b56af Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Tue, 1 Sep 2015 14:02:43 -0300
Subject: [PATCH] Add error page

---
 src/app/index.route.js           |  11 ++++++++++-
 src/app/layout.scss              | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------
 src/app/pages/erro/erro.html     |  25 +++++++++++++++++++++++++
 src/app/pages/erro/erro.scss     |  38 ++++++++++++++++++++++++++++++++++++++
 src/app/pages/footer/footer.html |   2 +-
 5 files changed, 171 insertions(+), 37 deletions(-)
 create mode 100644 src/app/pages/erro/erro.html
 create mode 100644 src/app/pages/erro/erro.scss

diff --git a/src/app/index.route.js b/src/app/index.route.js
index 446a820..9500c67 100644
--- a/src/app/index.route.js
+++ b/src/app/index.route.js
@@ -155,9 +155,18 @@
           'footer': { templateUrl: 'app/pages/footer/footer.html' }
         }
       })
+      .state('erro', {
+        url: '/erro',
+        ncyBreadcrumb: {label: 'Erro'},
+        views: {
+          'header': { templateUrl: 'app/pages/header/header.html' },
+          'main': { templateUrl: 'app/pages/erro/erro.html' },
+          'footer': { templateUrl: 'app/pages/footer/footer.html' }
+        }
+      })
       ;
 
-    $urlRouterProvider.otherwise('/');
+    $urlRouterProvider.otherwise('/erro');
   }
 
 })();
diff --git a/src/app/layout.scss b/src/app/layout.scss
index 1b95f90..d1e255b 100644
--- a/src/app/layout.scss
+++ b/src/app/layout.scss
@@ -1,54 +1,116 @@
 .row-height {
-    display: table;
-    table-layout: fixed;
-    height: 100%;
-    width: 100%;
+  display: table;
+  table-layout: fixed;
+  height: 100%;
+  width: 100%;
+}
 
-    @media (max-width: $screen-sm) {
-        display: block;
-    }
+.col-height {
+  display: table-cell;
+  float: none;
+  height: 100%;
+}
 
-    // @media (min-width: $screen-sm + 1) {
-    //     height: $hLine * 2;
-    // }
+.col-top {
+  vertical-align: top;
+}
 
-    // @media (min-width: $screen-md + 1) {
-    //     height: $hLine * 2;
-    // }
+.col-middle {
+  vertical-align: middle;
 }
 
-.col-height {
+.col-bottom {
+  vertical-align: bottom;
+}
+
+@media (min-width: 480px) {
+  .row-xs-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+  }
+  .col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
+  }
+  .col-xs-top {
     vertical-align: top;
+  }
+  .col-xs-middle {
+    vertical-align: middle;
+  }
+  .col-xs-bottom {
+    vertical-align: bottom;
+  }
 }
 
-.col-height--align-bottom {
+@media (min-width: 768px) {
+  .row-sm-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+  }
+  .col-sm-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+  }
+  .col-sm-top {
+    vertical-align: top;
+  }
+  .col-sm-middle {
+    vertical-align: middle;
+  }
+  .col-sm-bottom {
     vertical-align: bottom;
+  }
 }
 
-.inside {
-  margin-top: 20px;
-  margin-bottom: 20px;
+@media (min-width: 992px) {
+  .row-md-height {
+    display: table;
+    table-layout: fixed;
+    height: 100%;
+    width: 100%;
+  }
+  .col-md-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+  }
+  .col-md-top {
+    vertical-align: top;
+  }
+  .col-md-middle {
+    vertical-align: middle;
+  }
+  .col-md-bottom {
+    vertical-align: bottom;
+  }
 }
 
-.inside-full-height {
+@media (min-width: 1200px) {
+  .row-lg-height {
+    display: table;
+    table-layout: fixed;
     height: 100%;
-    margin-top: 0;
-    margin-bottom: 0;
-
-
-    @media (max-width: $screen-sm) {
-        border: 1px solid;
-        border-radius: 3px;
-        padding: 20px;
-        margin: 10px 0;
-
-        @each $category, $color in $categories {
-            .#{$category} & {
-                border-color: $color;
-            }
-        }
-    }
+    width: 100%;
+  }
+  .col-lg-height {
+    display: table-cell;
+    float: none;
+    height: 100%;
+  }
+  .col-lg-top {
+    vertical-align: top;
+  }
+  .col-lg-middle {
+    vertical-align: middle;
+  }
+  .col-lg-bottom {
+    vertical-align: bottom;
+  }
 }
diff --git a/src/app/pages/erro/erro.html b/src/app/pages/erro/erro.html
new file mode 100644
index 0000000..8ae7326
--- /dev/null
+++ b/src/app/pages/erro/erro.html
@@ -0,0 +1,25 @@
+<div class="page--erro">
+  <div class="container">
+    <div class="row">
+      <div class="row-height">
+        <div class="col-sm-4 col-sm-height col-middle">
+          <div class="inside inside-full-height">
+            <div class="content">
+              <span class="icon-circle icon-wrapper-rounded">
+                <span class="glyphicon glyphicon-remove" aria-hidden></span>
+              </span>
+              <h1>Erro</h1>
+              <p>
+                <span style="font-weight:bold;">Mas você ainda pode:</span>
+                <br>
+                <!-- <button type="button" class="btn btn-link" ng-click="goBack()">retornar à página anterior</button> -->
+                <!-- <span>&#8226;</span> -->
+                <button type="button" class="btn btn-link" ui-sref="inicio">retornar à página inicial</button>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/pages/erro/erro.scss b/src/app/pages/erro/erro.scss
new file mode 100644
index 0000000..1ee3a3f
--- /dev/null
+++ b/src/app/pages/erro/erro.scss
@@ -0,0 +1,38 @@
+.page--erro {
+    background-color: #f9f9f9;
+
+    h1 {
+        color: #464646;
+        font-size: 72px;
+        font-weight: bold;
+        margin-bottom: 40px;
+    }
+
+    .row-height {
+        min-height: 400px;
+    }
+
+    .content {
+        text-align: center;
+    }
+
+    .icon-circle {
+        display: inline-block;
+        font-size: 40px;
+        line-height: 33px;
+        font-weight: normal;
+
+        position: relative;
+        top: -5px;
+        padding: 20px;
+        margin-top: 5px;
+        margin-right: 30px;
+
+        color: #fff;
+        background: #c93e55;
+    }
+
+    h1 {
+        display: inline-block;
+    }
+}
diff --git a/src/app/pages/footer/footer.html b/src/app/pages/footer/footer.html
index 6817d1a..9969dee 100644
--- a/src/app/pages/footer/footer.html
+++ b/src/app/pages/footer/footer.html
@@ -3,7 +3,7 @@
   	<div class="row">
   	  <div class="col-xs-12 text-center">
   	    <a id="termos-de-uso" ui-sref="termos-de-uso">Termos de uso</a>
-        <a href="#header" class="pull-right" ng-click="scrollTo('#header')">Voltar para o topo</a>
+        <a href="#header" style="position:absolute;right:0;top:-10px;" ng-click="scrollTo('#header')">Voltar para o topo</a>
       </div>
   	</div>
   </div>
--
libgit2 0.21.2