[ADD] fga-eps-mds/2018.2-GamesBI#96 Search bar home page

Co-authored-by: lucas <lmlucasmachadom@gmail.com> Co-authored-by: augusto <augusto.vilarins@gmail.com> Co-authored-by: Andre <andre.eduardo11@hotmail.com> Co-authored-by: Ingrid <ingr.dcg@gmail.com>
fga-eps-mds · Sep 25, 2018 · 9ec5fac · 9ec5fac
1 parent 3b89aa7
commit 9ec5fac
Show file tree

Hide file tree

Showing 6 changed files with 189 additions and 41 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/_nav.js b/src/_nav.js
@@ -1,68 +1,61 @@
 export default {
   items: [
     {
-      name: 'Dashboard',
+      name: 'Início',
       url: '/dashboard',
-      icon: 'icon-speedometer',
-      badge: {
-        variant: 'info',
-        text: 'NEW',
-      },
+      icon: 'icon-home',
     },
     {
       title: true,
-      name: 'Theme',
+      name: 'Jogos',
       wrapper: {            // optional wrapper object
         element: '',        // required valid HTML5 element tag
         attributes: {}        // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
       },
       class: ''             // optional class names space delimited list for title item ex: "text-center"
     },
     {
-      name: 'Colors',
-      url: '/theme/colors',
-      icon: 'icon-drop',
+      name: 'Tendências',
+      url: '/TrendingGames',
+      icon: 'icon-badge',
     },
     {
-      name: 'Typography',
-      url: '/theme/typography',
-      icon: 'icon-pencil',
+      name: 'Recentes',
+      url: '/base/progress-bar',
+      icon: 'icon-graph',
     },
     {
-      title: true,
-      name: 'Components',
-      wrapper: {
-        element: '',
-        attributes: {},
-      },
+      name: 'Horas jogadas',
+      url: '/theme/typography',
+      icon: 'icon-clock',
     },
     {
-      name: 'Base',
+      name: 'Gênero',
       url: '/base',
       icon: 'icon-puzzle',
       children: [
         {
-          name: 'Breadcrumbs',
+          name: 'Aventura',
           url: '/base/breadcrumbs',
           icon: 'icon-puzzle',
         },
         {
-          name: 'Cards',
+          name: 'Rpg',
           url: '/base/cards',
           icon: 'icon-puzzle',
         },
         {
-          name: 'Carousels',
+          name: 'Estratégia',
           url: '/base/carousels',
           icon: 'icon-puzzle',
         },
         {
-          name: 'Collapses',
+          name: 'Indie',
           url: '/base/collapses',
           icon: 'icon-puzzle',
         },
         {
-          name: 'Dropdowns',
+          name: 'Esportes',
           url: '/base/dropdowns',
           icon: 'icon-puzzle',
         },
@@ -255,6 +248,6 @@ export default {
         },
       ],
     },
-    
+
   ],
 };
diff --git a/src/containers/DefaultLayout/DefaultHeader.js b/src/containers/DefaultLayout/DefaultHeader.js
@@ -26,19 +26,22 @@ class DefaultHeader extends Component {
           minimized={{ src: sygnet, width: 40, height: 40, alt: 'CoreUI Logo' }}
         />
         <AppSidebarToggler className="d-md-down-none" display="lg" />
-
         <Nav className="d-md-down-none" navbar>
           <NavItem className="px-3">
             <NavLink href="#/">Home</NavLink>
           </NavItem>
-          <NavItem className="px-3">
-            <NavLink href="#/TrendingGames">Trending Games</NavLink>
-          </NavItem>
-
         </Nav>
+        <div class="wrap">
+        <div className="search">
+        <input type="text" className="searchTerm" align="center" placeholder="O que você procura?" ></input>
+        <button type="submit" className="searchButton">
+        <i className="fa fa-search"></i>
+        </button>
+        </div>
+        </div>
         <Nav className="ml-auto" navbar>
-
         </Nav>
+
         <AppAsideToggler className="d-md-down-none" />
         {/*<AppAsideToggler className="d-lg-none" mobile />*/}
       </React.Fragment>

diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
@@ -35,3 +35,77 @@ font-family: 'Open Sans', sans-serif; }
     .bg-white_04 {
         background-color: rgba(255,255,255,0.4) !important;
     }
+
+    @import url(https://fonts.googleapis.com/css?family=Open+Sans);
+
+    body{
+      background: #f2f2f2;
+      font-family: 'Open Sans', sans-serif;
+    }
+
+    .search {
+      width: 100%;
+      position: relative
+    }
+
+    .searchTerm {
+      float: left;
+      width: 100%;
+      border: 3px solid #00B4CC;
+      padding: 5px;
+      height: 36px;
+      border-radius: 5px;
+      outline: none;
+      color: #9DBFAF;
+    }
+
+    .searchTerm:focus{
+      color: #00B4CC;
+    }
+
+    .searchButton {
+      position: absolute;
+      right: -50px;
+      width: 40px;
+      height: 36px;
+      border: 1px solid #00B4CC;
+      background: #00B4CC;
+      text-align: center;
+      color: #fff;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 20px;
+    }
+
+    /*Resize the wrap to see the search bar change!*/
+    .wrap{
+      width: 10%;
+      position: absolute;
+      top: 50%;
+      left: 90%;
+      transform: translate(-50%, -50%);
+    }
+
+    .chart-wrapper_1 canvas {
+
+      width: 50%;
+    }
+
+
+      .brand-card-header .chart-wrapper_1 {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%; }
+
+        .callout .chart-wrapper_1 {
+          position: absolute;
+          top: 10px;
+          left: 50%;
+          float: right;
+          width: 50%; }
+
+          *[dir="rtl"] .callout .chart-wrapper_1 {
+            left: 0;
+            float: left; }
diff --git a/src/scss/style.css b/src/scss/style.css
@@ -12,6 +12,7 @@
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 :root {
   --blue: #20a8d8;
   --indigo: #6610f2;
@@ -9904,5 +9905,68 @@ body {
 .bg-white_04 {
   background-color: rgba(255, 255, 255, 0.4) !important; }
 
+body {
+  background: #f2f2f2;
+  font-family: 'Open Sans', sans-serif; }
+
+.search {
+  width: 100%;
+  position: relative; }
+
+.searchTerm {
+  float: left;
+  width: 100%;
+  border: 3px solid #00B4CC;
+  padding: 5px;
+  height: 36px;
+  border-radius: 5px;
+  outline: none;
+  color: #9DBFAF; }
+
+.searchTerm:focus {
+  color: #00B4CC; }
+
+.searchButton {
+  position: absolute;
+  right: -50px;
+  width: 40px;
+  height: 36px;
+  border: 1px solid #00B4CC;
+  background: #00B4CC;
+  text-align: center;
+  color: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 20px; }
+
+/*Resize the wrap to see the search bar change!*/
+.wrap {
+  width: 10%;
+  position: absolute;
+  top: 50%;
+  left: 90%;
+  transform: translate(-50%, -50%); }
+
+.chart-wrapper_1 canvas {
+  width: 50%; }
+
+.brand-card-header .chart-wrapper_1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+
+.callout .chart-wrapper_1 {
+  position: absolute;
+  top: 10px;
+  left: 50%;
+  float: right;
+  width: 50%; }
+
+*[dir="rtl"] .callout .chart-wrapper_1 {
+  left: 0;
+  float: left; }
+
 html body .app.flex-row.align-items-center {
   height: 100vh; }