Commit e0330cec8c810e85926de6b3a1a75de92d001da8
Exists in
master
and in
4 other branches
Merge branch 'banner'
Showing
6 changed files
with
154 additions
and
77 deletions
Show diff stats
src/app/pages/inicio/inicio.html
@@ -24,7 +24,8 @@ | @@ -24,7 +24,8 @@ | ||
24 | </div> | 24 | </div> |
25 | </div> | 25 | </div> |
26 | </div> | 26 | </div> |
27 | - <div class="col-md-4" ng-if="pageInicio.featuredEvent"> | 27 | + <!-- Não faz sentido, mas poppi pediu para esconder por enquanto --> |
28 | + <div class="col-md-4" ng-hide="pageInicio.featuredEvent" ng-show="pageInicio.featuredEvent"> | ||
28 | <div class="row"> | 29 | <div class="row"> |
29 | <div class="featured-event--box" ng-click="pageInicio.showEventVideo()"> | 30 | <div class="featured-event--box" ng-click="pageInicio.showEventVideo()"> |
30 | <div class="box-top col-xs-12 col-sm-4 col-md-12"> | 31 | <div class="box-top col-xs-12 col-sm-4 col-md-12"> |
@@ -43,7 +44,8 @@ | @@ -43,7 +44,8 @@ | ||
43 | </div> | 44 | </div> |
44 | </div> | 45 | </div> |
45 | </div> | 46 | </div> |
46 | - <div class="col-md-4" ng-if="pageInicio.bannerRespostas"> | 47 | + <!-- Não faz sentido, mas poppi pediu para esconder por enquanto --> |
48 | + <div class="col-md-4" ng-hide="pageInicio.bannerRespostas" ng-show="pageInicio.bannerRespostas"> | ||
47 | <div class="banner-respostas"> | 49 | <div class="banner-respostas"> |
48 | <a ui-sref="respostas" class="banner-respostas--link-top"> | 50 | <a ui-sref="respostas" class="banner-respostas--link-top"> |
49 | <span class="banner-respostas--background-image" aria-hidden="true"></span> | 51 | <span class="banner-respostas--background-image" aria-hidden="true"></span> |
@@ -58,6 +60,22 @@ | @@ -58,6 +60,22 @@ | ||
58 | <a ui-sref="respostas" class="banner-respostas--link-bottom">Veja todas as respostas das propostas </a> | 60 | <a ui-sref="respostas" class="banner-respostas--link-bottom">Veja todas as respostas das propostas </a> |
59 | </div> | 61 | </div> |
60 | </div> | 62 | </div> |
63 | + <div class="col-md-4" ng-show="pageInicio.bannerRespostas"> | ||
64 | + <div class="banner-respostas banner-respostas--background-pink"> | ||
65 | + <a ui-sref="respostas" class="banner-respostas--link-top"> | ||
66 | + <span class="img-banner"> | ||
67 | + <img class="banner-respostas--logo banner-respostas--logo-small" src="/assets/images/marca_banner2.png" alt="Logo Dialoga Brasil"/> | ||
68 | + </span> | ||
69 | + <br> | ||
70 | + <span class="banner-respostas--text2 text-shadow">O GOVERNO FEDERAL SEGUE DIALOGANDO COM A SOCIEDADE</span> | ||
71 | + <br> | ||
72 | + <span class="banner-respostas--text3 text-bold">VOCÊ FEZ SUA PARTE PARTICIPANDO COM PROPOSTAS PARA MELHORAR O PAÍS E O GOVERNO RESPONDEU.</span> | ||
73 | + </a> | ||
74 | + <div class="teste vertical-align"> | ||
75 | + <a ui-sref="respostas" class="banner-respostas--banner2--link-bottom">CONFIRA AQUI O RESULTADO!</a> | ||
76 | + </div> | ||
77 | + </div> | ||
78 | + </div> | ||
61 | </div> | 79 | </div> |
62 | </div> | 80 | </div> |
63 | </section> | 81 | </section> |
@@ -106,75 +124,75 @@ | @@ -106,75 +124,75 @@ | ||
106 | <label for="articleQueryFilter1" class="control-label sr-only">Buscar programas:</label> | 124 | <label for="articleQueryFilter1" class="control-label sr-only">Buscar programas:</label> |
107 | <input id="articleQueryFilter1" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas"> | 125 | <input id="articleQueryFilter1" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas"> |
108 | <span class="input-group-btn"> | 126 | <span class="input-group-btn"> |
109 | - <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()"> | ||
110 | - <span class="icon-circle icon-small color-theme-common-bg"> | ||
111 | - <span class="glyphicon glyphicon-search"></span> | ||
112 | - </span> | ||
113 | - <span class="sr-only">Buscar</span> | ||
114 | - </button> | ||
115 | - </span> | ||
116 | - </div> | ||
117 | - <br/> | ||
118 | - </div> | ||
119 | - </div> | ||
120 | - <div ng-if="pageInicio.themes && !vm.loadingFilter"> | ||
121 | - <category-list categories="pageInicio.themes" selected-category="pageInicio.selectedTheme"></category-list> | ||
122 | - </div> | ||
123 | - <div ng-if="!pageInicio.themes && pageInicio.loadingThemes"> | ||
124 | - <div class="alert alert-info" role="alert"> | ||
125 | - Carregando temas. | ||
126 | - </div> | ||
127 | - </div> | ||
128 | - <div ng-if="!pageInicio.themes && pageInicio.themesError"> | ||
129 | - <div class="alert alert-danger" role="alert"> | ||
130 | - Não foi possível carregar a lista de temas neste momento. | ||
131 | - </div> | ||
132 | - </div> | 127 | + <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()"> |
128 | + <span class="icon-circle icon-small color-theme-common-bg"> | ||
129 | + <span class="glyphicon glyphicon-search"></span> | ||
130 | + </span> | ||
131 | + <span class="sr-only">Buscar</span> | ||
132 | + </button> | ||
133 | + </span> | ||
134 | + </div> | ||
135 | + <br/> | ||
136 | + </div> | ||
137 | + </div> | ||
138 | + <div ng-if="pageInicio.themes && !vm.loadingFilter"> | ||
139 | + <category-list categories="pageInicio.themes" selected-category="pageInicio.selectedTheme"></category-list> | ||
140 | + </div> | ||
141 | + <div ng-if="!pageInicio.themes && pageInicio.loadingThemes"> | ||
142 | + <div class="alert alert-info" role="alert"> | ||
143 | + Carregando temas. | ||
133 | </div> | 144 | </div> |
134 | - <div class="col-sm-8 col-md-9"> | ||
135 | - <div class="row hidden-xs"> | ||
136 | - <div class="col-xs-12"> | ||
137 | - <div class="input-group input-group-lg input-group-search"> | ||
138 | - <label for="articleQueryFilter2" class="control-label sr-only">Buscar programas:</label> | ||
139 | - <input id="articleQueryFilter2" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas"> | ||
140 | - <span class="input-group-btn"> | ||
141 | - <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()"> | ||
142 | - <span class="icon-circle icon-small color-theme-common-bg"> | ||
143 | - <span class="glyphicon glyphicon-search"></span> | ||
144 | - </span> | ||
145 | - <span class="sr-only">Buscar</span> | ||
146 | - </button> | ||
147 | - </span> | ||
148 | - </div> | ||
149 | - </div> | ||
150 | - </div> | ||
151 | - <div id="search-result" class="row"> | ||
152 | - <div class="col-sm-12"> | ||
153 | - <header class="header"> | ||
154 | - <h2>Programas</h2> | ||
155 | - <button type="button" class="btn btn-link" ng-click="pageInicio.showAllPrograms($event)"> | ||
156 | - <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas | ||
157 | - </button> | ||
158 | - </header> | ||
159 | - </div> | ||
160 | - </div> | ||
161 | - <div class="row"> | ||
162 | - <div class="col-sm-12" ng-if="pageInicio.filtredPrograms && !vm.loadingFilter"> | ||
163 | - <article-grid articles="pageInicio.filtredPrograms"></article-grid> | ||
164 | - </div> | ||
165 | - <div ng-if="!pageInicio.programs && pageInicio.loadingPrograms"> | ||
166 | - <div class="alert alert-info" role="alert"> | ||
167 | - Carregando programas. | ||
168 | - </div> | ||
169 | - </div> | ||
170 | - <div ng-if="!pageInicio.programs && pageInicio.programsError"> | ||
171 | - <div class="alert alert-danger" role="alert"> | ||
172 | - Não foi possível carregar a lista de programas neste momento. | ||
173 | - </div> | ||
174 | - </div> | ||
175 | - </div> | 145 | + </div> |
146 | + <div ng-if="!pageInicio.themes && pageInicio.themesError"> | ||
147 | + <div class="alert alert-danger" role="alert"> | ||
148 | + Não foi possível carregar a lista de temas neste momento. | ||
176 | </div> | 149 | </div> |
177 | </div> | 150 | </div> |
178 | </div> | 151 | </div> |
179 | - </section> | 152 | + <div class="col-sm-8 col-md-9"> |
153 | + <div class="row hidden-xs"> | ||
154 | + <div class="col-xs-12"> | ||
155 | + <div class="input-group input-group-lg input-group-search"> | ||
156 | + <label for="articleQueryFilter2" class="control-label sr-only">Buscar programas:</label> | ||
157 | + <input id="articleQueryFilter2" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas"> | ||
158 | + <span class="input-group-btn"> | ||
159 | + <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()"> | ||
160 | + <span class="icon-circle icon-small color-theme-common-bg"> | ||
161 | + <span class="glyphicon glyphicon-search"></span> | ||
162 | + </span> | ||
163 | + <span class="sr-only">Buscar</span> | ||
164 | + </button> | ||
165 | + </span> | ||
166 | + </div> | ||
167 | + </div> | ||
168 | + </div> | ||
169 | + <div id="search-result" class="row"> | ||
170 | + <div class="col-sm-12"> | ||
171 | + <header class="header"> | ||
172 | + <h2>Programas</h2> | ||
173 | + <button type="button" class="btn btn-link" ng-click="pageInicio.showAllPrograms($event)"> | ||
174 | + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas | ||
175 | + </button> | ||
176 | + </header> | ||
177 | + </div> | ||
178 | + </div> | ||
179 | + <div class="row"> | ||
180 | + <div class="col-sm-12" ng-if="pageInicio.filtredPrograms && !vm.loadingFilter"> | ||
181 | + <article-grid articles="pageInicio.filtredPrograms"></article-grid> | ||
182 | + </div> | ||
183 | + <div ng-if="!pageInicio.programs && pageInicio.loadingPrograms"> | ||
184 | + <div class="alert alert-info" role="alert"> | ||
185 | + Carregando programas. | ||
186 | + </div> | ||
187 | + </div> | ||
188 | + <div ng-if="!pageInicio.programs && pageInicio.programsError"> | ||
189 | + <div class="alert alert-danger" role="alert"> | ||
190 | + Não foi possível carregar a lista de programas neste momento. | ||
191 | + </div> | ||
192 | + </div> | ||
193 | + </div> | ||
194 | +</div> | ||
195 | +</div> | ||
196 | +</div> | ||
197 | +</section> | ||
180 | </div> | 198 | </div> |
src/app/pages/inicio/inicio.scss
@@ -132,7 +132,33 @@ | @@ -132,7 +132,33 @@ | ||
132 | width: 100%; | 132 | width: 100%; |
133 | $bannerHeight: 338px; | 133 | $bannerHeight: 338px; |
134 | $bannerBottomHeight: 40px; | 134 | $bannerBottomHeight: 40px; |
135 | - text-align: center; | 135 | + |
136 | + .img-banner { | ||
137 | + display: block; | ||
138 | + text-align: center; | ||
139 | + } | ||
140 | + | ||
141 | + .text-shadow { | ||
142 | + text-shadow: 0px 1px 1px #A42B5A | ||
143 | + } | ||
144 | + | ||
145 | + .text-bold { | ||
146 | + font-weight: bold; | ||
147 | + } | ||
148 | + | ||
149 | + .teste { | ||
150 | + display: block; | ||
151 | + height: 35px; | ||
152 | + padding-top: 5px; | ||
153 | + position: absolute; | ||
154 | + right: 0; | ||
155 | + bottom: 0; | ||
156 | + background-position: right; | ||
157 | + background-image: url('/assets/images/bottao_banner_1.png'); | ||
158 | + background-size: 100%; | ||
159 | + background-repeat: no-repeat; | ||
160 | + vertical-align: middle; | ||
161 | + } | ||
136 | 162 | ||
137 | &--link-top { | 163 | &--link-top { |
138 | color: #fff; | 164 | color: #fff; |
@@ -149,33 +175,66 @@ | @@ -149,33 +175,66 @@ | ||
149 | } | 175 | } |
150 | } | 176 | } |
151 | 177 | ||
152 | - &--background-image { | 178 | + &--background { |
153 | display: block; | 179 | display: block; |
154 | position: absolute; | 180 | position: absolute; |
155 | top: 0; | 181 | top: 0; |
156 | z-index: -1; | 182 | z-index: -1; |
157 | width: 100%; | 183 | width: 100%; |
158 | height: 100%; | 184 | height: 100%; |
159 | - background-image: url('/assets/images/banner--background-image.png'); | ||
160 | - background-size: cover; | ||
161 | - background-position: center; | ||
162 | - background-color: #0E1333; | 185 | + |
186 | + &-image { | ||
187 | + background-image: url('/assets/images/banner--background-image.png'); | ||
188 | + background-size: cover; | ||
189 | + background-position: center; | ||
190 | + background-color: #0E1333; | ||
191 | + } | ||
192 | + | ||
193 | + &-pink { | ||
194 | + background-color: #F84D71; | ||
195 | + } | ||
163 | } | 196 | } |
164 | 197 | ||
165 | &--logo { | 198 | &--logo { |
166 | margin: 10px; | 199 | margin: 10px; |
200 | + | ||
201 | + &-small { | ||
202 | + width: 23%; | ||
203 | + } | ||
167 | } | 204 | } |
205 | + | ||
168 | &--text1 { | 206 | &--text1 { |
169 | text-transform: uppercase; | 207 | text-transform: uppercase; |
170 | font-size: 22px; | 208 | font-size: 22px; |
171 | } | 209 | } |
172 | &--text2 { | 210 | &--text2 { |
211 | + display: block; | ||
212 | + margin-left: 10px; | ||
173 | color: #dfa821; | 213 | color: #dfa821; |
174 | - font-size: 22px; | 214 | + // font-size: 22px; |
215 | + font-size: 130%; | ||
175 | font-weight: bold; | 216 | font-weight: bold; |
176 | text-transform: uppercase; | 217 | text-transform: uppercase; |
177 | } | 218 | } |
178 | - &--text3 {} | 219 | + &--text3 { |
220 | + display: block; | ||
221 | + margin-left: 10px; | ||
222 | + font-size: 115%; | ||
223 | + } | ||
224 | + | ||
225 | + &--banner2--link-bottom { | ||
226 | + color: white; | ||
227 | + font-size: 135%; | ||
228 | + font-weight: bold; | ||
229 | + padding-right: 25px; | ||
230 | + margin-left: 5px; | ||
231 | + | ||
232 | + &:hover, | ||
233 | + &:focus, | ||
234 | + &:active { | ||
235 | + color: #fff; | ||
236 | + } | ||
237 | + } | ||
179 | 238 | ||
180 | &--link-bottom { | 239 | &--link-bottom { |
181 | color: #fff; | 240 | color: #fff; |
18.4 KB
9.02 KB
7.74 KB
11.8 KB