Commit b91f2ae95d9f7c1a59bcd19a21d037b4197c56d4

Authored by Leonardo Merlin
1 parent 72003778

Add double search

src/app/pages/inicio/inicio.html
@@ -63,6 +63,23 @@ @@ -63,6 +63,23 @@
63 <div class="container"> 63 <div class="container">
64 <div id="lista-de-programas" class="row"> 64 <div id="lista-de-programas" class="row">
65 <div class="col-sm-4 col-md-3"> 65 <div class="col-sm-4 col-md-3">
  66 + <div class="row visible-xs">
  67 + <div class="col-xs-12">
  68 + <div class="input-group input-group-lg input-group-search">
  69 + <label for="articleQueryFilter" class="control-label sr-only">Buscar programas:</label>
  70 + <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" >
  71 + <span class="input-group-btn">
  72 + <button type="button" class="btn btn-default" ng-click="pageInicio.search()">
  73 + <span class="icon-circle icon-small color-theme-common-bg">
  74 + <span class="glyphicon glyphicon-search"></span>
  75 + </span>
  76 + <span class="sr-only">Buscar</span>
  77 + </button>
  78 + </span>
  79 + </div>
  80 + <br/>
  81 + </div>
  82 + </div>
66 <div ng-if="pageInicio.themes"> 83 <div ng-if="pageInicio.themes">
67 <category-list categories="pageInicio.themes" selected-category="pageInicio.selectedTheme"></category-list> 84 <category-list categories="pageInicio.themes" selected-category="pageInicio.selectedTheme"></category-list>
68 </div> 85 </div>
@@ -78,22 +95,32 @@ @@ -78,22 +95,32 @@
78 </div> 95 </div>
79 </div> 96 </div>
80 <div class="col-sm-8 col-md-9"> 97 <div class="col-sm-8 col-md-9">
  98 + <div class="row hidden-xs">
  99 + <div class="col-xs-12">
  100 + <div class="input-group input-group-lg input-group-search">
  101 + <label for="articleQueryFilter" class="control-label sr-only">Buscar programas:</label>
  102 + <input id="articleQueryFilter" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" >
  103 + <span class="input-group-btn">
  104 + <button type="button" class="btn btn-default" ng-click="pageInicio.search()">
  105 + <span class="icon-circle icon-small color-theme-common-bg">
  106 + <span class="glyphicon glyphicon-search"></span>
  107 + </span>
  108 + <span class="sr-only">Buscar</span>
  109 + </button>
  110 + </span>
  111 + </div>
  112 + </div>
  113 + </div>
81 <div class="row"> 114 <div class="row">
82 <div class="col-sm-12"> 115 <div class="col-sm-12">
83 <header class="header"> 116 <header class="header">
84 - <h2>Conheça os programas <span class="small">({{pageInicio.filtredPrograms.length}}/{{::pageInicio.programs.length}})</span></h2> 117 + <h2>Programas</h2>
85 <button type="button" class="btn btn-link" ng-click="pageInicio.showAll($event)"> 118 <button type="button" class="btn btn-link" ng-click="pageInicio.showAll($event)">
86 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas 119 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas
87 </button> 120 </button>
88 </header> 121 </header>
89 </div> 122 </div>
90 </div> 123 </div>
91 - <div class="row">  
92 - <div class="col-xs-12">  
93 - <label for="articleQueryFilter" class="control-label sr-only">Buscar programas:</label>  
94 - <input id="articleQueryFilter" type="search" class="form-control" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" >  
95 - </div>  
96 - </div>  
97 124
98 <div class="row"> 125 <div class="row">
99 <div class="col-sm-12" ng-if="pageInicio.programs"> 126 <div class="col-sm-12" ng-if="pageInicio.programs">
src/app/pages/inicio/inicio.scss
1 .page--inicio { 1 .page--inicio {
2 - 2 +
3 .section-video { 3 .section-video {
4 padding: 20px 0; 4 padding: 20px 0;
5 // background-color: #919191; 5 // background-color: #919191;
@@ -9,8 +9,6 @@ @@ -9,8 +9,6 @@
9 9
10 .header { 10 .header {
11 position: relative; 11 position: relative;
12 - height: 40px;  
13 - margin-bottom: 10px;  
14 12
15 button { 13 button {
16 position: absolute; 14 position: absolute;
@@ -26,6 +24,20 @@ @@ -26,6 +24,20 @@
26 } 24 }
27 } 25 }
28 } 26 }
  27 +
  28 + .input-group-search {
  29 + .icon-circle {
  30 + color: #fff;
  31 + padding: 5px;
  32 + margin-top: -5px;
  33 + }
  34 + button {
  35 + border-left: none;
  36 + }
  37 + }
  38 + .input-group-btn {
  39 + background-color: #fff;
  40 + }
29 } 41 }
30 42
31 .section-gray { 43 .section-gray {