Envio de Teste para a Nexaas

.gitignore

@@ -1 +1,4 @@
-.DS_Store
+# Node.js #
+node_modules
+desafio-frontend-api
+layouts

README.md

@@ -1,47 +1,23 @@
+# testeNexaas
+Teste para a Nexaas
 
-# Teste para candidatos à vagas de Front-End
+# Tecnologias Utilizadas
+HTML, CSS, SASS, VanillaJS, JQuery, Gulp e Angular
 
-O objetivo deste desafio é permitir uma melhor avaliação das suas habilidades como candidato à vaga de Front-end, de vários níveis. Este desafio deve ser feito por você em sua casa. Gaste o tempo que você quiser, porém normalmente você não deve precisar de mais do que alguns dias.
+# Instruções de Instalação em ambiente local
 
-## Instruções de entrega do desafio
+Clonar o repositório
 
-Primeiro, faça um fork deste projeto para sua conta no Github (crie uma se você não possuir). Em seguida, implemente o projeto tal qual descrito abaixo, em seu próprio fork. Por fim, empurre todas as suas alterações para o seu fork no Github e envie um pull request para este repositório original.
+cd testeNexaas
 
-Se você já entrou em contato com alguém da Nexaas sobre uma vaga, avise também essa pessoa por email, incluindo no email o seu usuário no Github.
+npm install
 
-### Instruções alternativas de entrega do desafio
-
-*Esta alternativa é direcionada aos candidatos(as) que não queiram que a submissão seja pública e/ou não saibam usar o Git*
+npm install -g sass
 
-Faça um clone deste repositório. Em seguida, implemente o projeto tal qual descrito abaixo, em seu clone local. Por fim, envie via email um arquivo patch para seu contato na Nexaas.
+npm install angular
 
-Caso você não saiba gerar um patch, não tem problema. Comprima o projeto todo em um arquivo .zip e mande por email para seu contato na Nexaas.
+npm install browser-sync gulp --save-dev
 
-Caso não saiba nem usar o Git para clonar o repositório e iniciar o projeto, também não tem problema. Clique no botão "Download ZIP" na barra lateral direita nesta página, baixe o .zip do projeto, modifique-o, comprima novamente em um novo arquivo .zip e mande por email para seu contato na Nexaas.
+gulp
 
-## Descrição do projeto
-
-Nosso desafio consiste em implementar uma aplicação client-side que consulte a [API](https://github.com/myfreecomm/desafio-frontend-api) e retorne os dados para serem mostrados no painel. 
-O usuário pode ser capaz de realizar uma busca consumindo os dados da API como mostrado nos layouts fornecidos. A fonte utilizado no projeto é a Roboto, que pode ser facilmente adicionada atravéz do site [Google Fonts](https://fonts.google.com/specimen/Roboto)
-
-**Os layouts se encontram na pasta *layouts* desse repositório.**
-
-OBS.: Esta aplicação deve funcionar nos navegadores mais recentes do mercado.
-
-### Diretrizes
-
-- Utilize algum pré-processador para o seu css, de preferência SASS. (Se quiser, fique a vontade para usar alguma lib/framework CSS)
-
-- Faça com que sua página tenha uma ótima experiência para o usuário, independente do dispositivo que ele esteja usando.
-
-- Utilize um código limpo e bem organizado, e de preferência, utilize alguma arquitetura modular para organizar seus arquivos CSS/SASS e os assets utilizados.
-
-- Documente seu projeto.
-
-### Plus
-- Crie testes do seu código JS.
-
-
-### Avaliação
-
-Seu projeto será avaliado de acordo com a qualidade do seu código e sua organização com os arquivos utilizados, além do conhecimento e bom uso da semântica HTML e CSS.
+# Pronto! O ambiente estará rodando em http://localhost:3000

css/style.css

@@ -0,0 +1,160 @@
+/* Fontes */
+/* Paleta de Cores */
+.album {
+  background-color: #fcfcfc;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Roboto", sans-serif !important;
+}
+
+p, a, li, label, td {
+  font-family: "Roboto", sans-serif !important;
+}
+
+.logo {
+  border-bottom: 1px solid #C1C1C1;
+  border-right: 1px solid #C1C1C1;
+  height: 100px;
+}
+
+.logo img {
+  margin-top: 32px;
+}
+
+.listaClientes tr {
+  display: none;
+}
+
+.loading {
+  text-transform: uppercase;
+  font-weight: bold !important;
+  font-size: 15px !important;
+  margin-top: 100px;
+}
+
+.header {
+  height: 100px;
+  border-bottom: 1px solid #C1C1C1;
+}
+
+.header .search-header {
+  border-radius: 20px;
+  border-color: #C1C1C1;
+  color: #C1C1C1;
+  padding-left: 45px;
+  background-image: url(../img/Shape.png);
+  background-position: center left;
+  background-repeat: no-repeat;
+}
+
+.sidebar {
+  border-right: 1px solid #C1C1C1;
+  height: 85vh;
+}
+
+.sidebar ul {
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar ul li {
+  list-style-type: none;
+  height: 48px;
+  line-height: 48px;
+  padding-left: 20px;
+  margin-left: -20px;
+  border-left: 5px solid #ffffff;
+  width: 113%;
+}
+
+.sidebar ul li a {
+  color: #000000;
+  font-size: 13px;
+  padding-left: 50px;
+}
+
+.sidebar ul li a:hover {
+  text-decoration: none;
+}
+
+.sidebar ul li:hover {
+  border-left: 5px solid #2B6EFA;
+  background-color: #f4f9ff;
+}
+
+.sidebar ul .active {
+  border-left: 5px solid #2B6EFA;
+  background-color: #f4f9ff;
+}
+
+.sidebar ul .active a {
+  font-weight: bold;
+}
+
+.sidebar ul .suporte {
+  border-top: 1px solid #C1C1C1;
+  position: absolute;
+  bottom: 0;
+}
+
+.sidebar ul .painel::before {
+  content: url(../img/panel-icon.png);
+  position: absolute;
+  margin-top: 8px;
+}
+
+.sidebar ul .configuracoes::before {
+  content: url(../img/gear-icon.png);
+  position: absolute;
+  margin-top: 8px;
+}
+
+.sidebar ul .suporte::before {
+  content: url(../img/chat-icon.png);
+  position: absolute;
+  margin-top: 8px;
+}
+
+.dashboard {
+  background-color: #F5F5F5;
+}
+
+.dashboard h1 {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  padding-left: 15px;
+  border-left: 5px solid #2B6EFA;
+}
+
+.dashboard h2 {
+  font-family: "Roboto", sans-serif;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+.dashboard p {
+  font-family: "Roboto", sans-serif;
+  color: #2B6EFA;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.dashboard td {
+  background-color: #ffffff;
+  height: 42px;
+  line-height: 42px;
+  vertical-align: middle;
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  border-top: none;
+  border-bottom: 15px solid #F5F5F5;
+}
+
+.dashboard td img {
+  width: 36px;
+  border-radius: 18px;
+}

gulpfile.js

@@ -0,0 +1,55 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var rename = require('gulp-rename');
+var browserSync = require('browser-sync').create();
+
+/*
+ * Variáveis
+ */
+// SASS
+var scssFiles = './src/scss/style.scss';
+
+// Caminho CSS
+var cssDest = './css';
+
+// CSS de desenvolvimento
+var sassDevOptions = {
+  outputStyle: 'expanded'
+}
+
+// CSS de produção
+var sassProdOptions = {
+  outputStyle: 'compressed'
+}
+
+// Task 'sassdev' - Run with command 'gulp sassdev'
+gulp.task('sassdev', function() {
+    return gulp.src(scssFiles)
+      .pipe(sass(sassDevOptions).on('error', sass.logError))
+      .pipe(gulp.dest(cssDest));
+  });
+
+// Task 'sassprod' - Run with command 'gulp sassprod'
+gulp.task('sassprod', function() {
+    return gulp.src(scssFiles)
+      .pipe(sass(sassProdOptions).on('error', sass.logError))
+      .pipe(rename('style.min.css'))
+      .pipe(gulp.dest(cssDest));
+  });
+
+  // Inicia servidor
+  gulp.task('browser-sync', function() {
+      browserSync.init({
+          server: {
+              baseDir: "./"
+          }
+      });
+  });
+
+// Task 'watch' - Run with command 'gulp watch'
+gulp.task('watch', function() {
+    gulp.watch(scssFiles, ['sassdev', 'sassprod']);
+  });
+
+// Default task - Run with command 'gulp'
+gulp.task('default', ['sassdev', 'sassprod', 'watch', 'browser-sync']);