Commit b91f2ae95d9f7c1a59bcd19a21d037b4197c56d4
1 parent
72003778
Exists in
master
and in
8 other branches
Add double search
Showing
2 changed files
with
49 additions
and
10 deletions
Show diff stats
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 { |