Download as
Browse Code »

Commit 8784086ebe5a517b0b7bf9368dab60f7f4189dee

Authored by Leonardo Merlin
1 parent 1730f37c
Exists in master and in 4 other branches feature-captcha, production, staging, the_glorious_return_of_piwik

Add banner-respostas at inicio page (issue #61)

Showing 5 changed files with 279 additions and 149 deletions   Show diff stats
src/app/pages/inicio/inicio.controller.js
  Diff comments   View file @8784086
@@ -31,6 +31,7 @@ @@ -31,6 +31,7 @@
31 vm.article = null; 31 vm.article = null;
32 vm.events = null; 32 vm.events = null;
33 vm.featuredEvent = null; 33 vm.featuredEvent = null;
  34 + vm.bannerRespostas = true;
34 vm.themes = null; 35 vm.themes = null;
35 vm.selectedTheme = null; 36 vm.selectedTheme = null;
36 vm.programs = null; 37 vm.programs = null;
src/app/pages/inicio/inicio.html
  Diff comments   View file @8784086
1 <div class="page--inicio" role="main"> 1 <div class="page--inicio" role="main">
2 - <section class="section-video">  
3 - <div class="container">  
4 - <div class="row">  
5 - <div class="col-md-8" ng-class="{'col-md-offset-2': !pageInicio.featuredEvent}">  
6 - <div class="video-player js-youtube">  
7 - <div class="embed-responsive embed-responsive-16by9">  
8 - <div ng-if="!pageInicio.featuredEvent || !pageInicio.featuredEvent.canView">  
9 - <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>  
10 - </div>  
11 - <div ng-if="pageInicio.featuredEvent && pageInicio.featuredEvent.canView">  
12 - <div class="js-iframe" ng-bind-html="pageInicio.featuredEvent.bodyTrusted"></div>  
13 - </div>  
14 - <div class="video-background" ng-click="pageInicio.showVideo()">  
15 - <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>  
16 - <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">  
17 - <svg height="100%" version="1.1" viewbox="0 0 68 48" width="100%"><path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path><path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path><path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path></svg>  
18 - </button>  
19 - </div>  
20 - </div>  
21 - </div>  
22 - </div>  
23 - <div class="col-md-4" ng-if="pageInicio.featuredEvent">  
24 - <div class="row">  
25 - <div class="featured-event--box" ng-click="pageInicio.showEventVideo()">  
26 - <div class="box-top col-xs-12 col-sm-4 col-md-12">  
27 - <h2 class="box-title">Bate papo com <b>MINISTROS/AS</b></h2>  
28 - </div>  
29 - <div class="box-middle col-xs-12 col-sm-4 col-md-12">  
30 - <div class="video"  
31 - ng-style="{'background-image': 'url(' + pageInicio.featuredEvent.image.url + ')'}"> 2 + <section class="section-video">
  3 + <div class="container">
  4 + <div class="row">
  5 + <div class="col-md-8" ng-class="{'col-md-offset-2': (!pageInicio.featuredEvent && !pageInicio.bannerRespostas)}">
  6 + <div class="video-player js-youtube">
  7 + <div class="embed-responsive embed-responsive-16by9">
  8 + <div ng-if="!pageInicio.featuredEvent || !pageInicio.featuredEvent.canView">
  9 + <div class="js-iframe" ng-if="pageInicio.article.videoIsLoaded" ng-bind-html="pageInicio.article.abstractTrusted"></div>
  10 + </div>
  11 + <div ng-if="pageInicio.featuredEvent && pageInicio.featuredEvent.canView">
  12 + <div class="js-iframe" ng-bind-html="pageInicio.featuredEvent.bodyTrusted"></div>
  13 + </div>
  14 + <div class="video-background" ng-click="pageInicio.showVideo()">
  15 + <div class="video-thumbnail" aria-hidden="true" style="background-image:url(/assets/images/youtube-background.png)"></div>
  16 + <button class="video-play-button" aria-live="assertive" aria-label="Assistir o vídeo tutorial Dialoga Brasil">
  17 + <svg height="100%" version="1.1" viewbox="0 0 68 48" width="100%">
  18 + <path class="ytp-play-button-bg" d="m .66,37.62 c 0,0 .66,4.70 2.70,6.77 2.58,2.71 5.98,2.63 7.49,2.91 5.43,.52 23.10,.68 23.12,.68 .00,-1.3e-5 14.29,-0.02 23.81,-0.71 1.32,-0.15 4.22,-0.17 6.81,-2.89 2.03,-2.07 2.70,-6.77 2.70,-6.77 0,0 .67,-5.52 .67,-11.04 l 0,-5.17 c 0,-5.52 -0.67,-11.04 -0.67,-11.04 0,0 -0.66,-4.70 -2.70,-6.77 C 62.03,.86 59.13,.84 57.80,.69 48.28,0 34.00,0 34.00,0 33.97,0 19.69,0 10.18,.69 8.85,.84 5.95,.86 3.36,3.58 1.32,5.65 .66,10.35 .66,10.35 c 0,0 -0.55,4.50 -0.66,9.45 l 0,8.36 c .10,4.94 .66,9.45 .66,9.45 z" fill="#1f1f1e" fill-opacity="0.9"></path>
  19 + <path d="m 26.96,13.67 18.37,9.62 -18.37,9.55 -0.00,-19.17 z" fill="#fff"></path>
  20 + <path d="M 45.02,23.46 45.32,23.28 26.96,13.67 43.32,24.34 45.02,23.46 z" fill="#ccc"></path>
  21 + </svg>
  22 + </button>
  23 + </div>
  24 + </div>
  25 + </div>
  26 + </div>
  27 + <div class="col-md-4" ng-if="pageInicio.featuredEvent">
  28 + <div class="row">
  29 + <div class="featured-event--box" ng-click="pageInicio.showEventVideo()">
  30 + <div class="box-top col-xs-12 col-sm-4 col-md-12">
  31 + <h2 class="box-title">Bate papo com <b>MINISTROS/AS</b></h2>
  32 + </div>
  33 + <div class="box-middle col-xs-12 col-sm-4 col-md-12">
  34 + <div class="video" ng-style="{'background-image': 'url(' + pageInicio.featuredEvent.image.url + ')'}">
  35 + </div>
  36 + </div>
  37 + <div class="box-bottom col-xs-12 col-sm-4 col-md-12">
  38 + <div class="date">{{pageInicio.featuredEvent.start_date | date : "dd/MM/yyyy"}}</div>
  39 + <div class="live">AO VIVO</div>
  40 + <div class="description" ng-bind-html="pageInicio.featuredEvent.abstract"></div>
  41 + </div>
  42 + <div class="clearfix"></div>
  43 + </div>
  44 + </div>
  45 + </div>
  46 + <div class="col-md-4" ng-if="pageInicio.bannerRespostas">
  47 + <div class="banner-respostas">
  48 + <a ui-sref="respostas" class="banner-respostas--link-top">
  49 + <span class="banner-respostas--background-image" aria-hidden="true"></span>
  50 + <img class="banner-respostas--logo" src="/assets/images/banner-logo--dialoga-brasil.png" alt="Logo Dialoga Brasil"/>
  51 + <br>
  52 + <span class="banner-respostas--text1">O dialoga já respondeu</span>
  53 + <br>
  54 + <span class="banner-respostas--text2">às suas solicitações!</span>
  55 + <br>
  56 + <span class="banner-respostas--text3">Vários programas contaram com centenas de participações e elas foram respondidas, confira já quais propostas foram respondidas:</span>
  57 + </a>
  58 + <a ui-sref="respostas" class="banner-respostas--link-bottom">Veja todas as respostas das propostas </a>
  59 + </div>
32 </div> 60 </div>
33 - </div>  
34 - <div class="box-bottom col-xs-12 col-sm-4 col-md-12">  
35 - <div class="date">{{pageInicio.featuredEvent.start_date | date : "dd/MM/yyyy"}}</div>  
36 - <div class="live">AO VIVO</div>  
37 - <div class="description" ng-bind-html="pageInicio.featuredEvent.abstract"></div>  
38 - </div>  
39 - <div class="clearfix"></div>  
40 </div> 61 </div>
41 - </div>  
42 </div> 62 </div>
43 - </div>  
44 - </div>  
45 - </section>  
46 -  
47 - <section class="section-event">  
48 - <div ng-if="pageInicio.events">  
49 - <event-list events="pageInicio.events"></event-list>  
50 - </div>  
51 - <div ng-if="!pageInicio.events && pageInicio.loadingEvents" class="container">  
52 - <div class="row">  
53 - <div class="col-sm-12">  
54 - <div class="alert alert-info" role="alert">Carregando lista de eventos.</div> 63 + </section>
  64 + <section class="section-event">
  65 + <div ng-if="pageInicio.events">
  66 + <event-list events="pageInicio.events"></event-list>
55 </div> 67 </div>
56 - </div>  
57 - </div>  
58 - <div ng-if="!pageInicio.events && pageInicio.eventsError" class="container">  
59 - <div class="row">  
60 - <div class="col-sm-12">  
61 - <div class="alert alert-danger" role="alert">Não foi possível carregar a lista de eventos neste momento.</div> 68 + <div ng-if="!pageInicio.events && pageInicio.loadingEvents" class="container">
  69 + <div class="row">
  70 + <div class="col-sm-12">
  71 + <div class="alert alert-info" role="alert">Carregando lista de eventos.</div>
  72 + </div>
  73 + </div>
62 </div> 74 </div>
63 - </div>  
64 - </div>  
65 - </section>  
66 -  
67 - <section class="section-info" ng-if="pageInicio.loading || pageInicio.error">  
68 - <div class="container">  
69 - <div class="row">  
70 - <div class="col-md-12">  
71 - <div ng-if="pageInicio.loading && !pageInicio.error">  
72 - <div class="alert alert-info" role="alert">Carregando conteúdo...</div> 75 + <div ng-if="!pageInicio.events && pageInicio.eventsError" class="container">
  76 + <div class="row">
  77 + <div class="col-sm-12">
  78 + <div class="alert alert-danger" role="alert">Não foi possível carregar a lista de eventos neste momento.</div>
  79 + </div>
73 </div> 80 </div>
74 -  
75 - <div ng-if="pageInicio.error">  
76 - <div class="alert alert-danger" role="alert">  
77 - Erro ao carregar o conteúdo principal.  
78 - </div> 81 + </div>
  82 + </section>
  83 + <section class="section-info" ng-if="pageInicio.loading || pageInicio.error">
  84 + <div class="container">
  85 + <div class="row">
  86 + <div class="col-md-12">
  87 + <div ng-if="pageInicio.loading && !pageInicio.error">
  88 + <div class="alert alert-info" role="alert">Carregando conteúdo...</div>
  89 + </div>
  90 + <div ng-if="pageInicio.error">
  91 + <div class="alert alert-danger" role="alert">
  92 + Erro ao carregar o conteúdo principal.
  93 + </div>
  94 + </div>
  95 + </div>
79 </div> 96 </div>
80 - </div>  
81 </div> 97 </div>
82 - </div>  
83 - </section>  
84 -  
85 - <section class="section--articles section-gray section-space-up" ng-if="pageInicio.article">  
86 - <div class="container">  
87 - <div id="lista-de-programas" class="row">  
88 - <div class="col-sm-4 col-md-3">  
89 - <div class="row visible-xs">  
90 - <div class="col-xs-12">  
91 - <div class="input-group input-group-lg input-group-search">  
92 - <label for="articleQueryFilter1" class="control-label sr-only">Buscar programas:</label>  
93 - <input id="articleQueryFilter1" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" >  
94 - <span class="input-group-btn"> 98 + </section>
  99 + <section class="section--articles section-gray section-space-up" ng-if="pageInicio.article">
  100 + <div class="container">
  101 + <div id="lista-de-programas" class="row">
  102 + <div class="col-sm-4 col-md-3">
  103 + <div class="row visible-xs">
  104 + <div class="col-xs-12">
  105 + <div class="input-group input-group-lg input-group-search">
  106 + <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">
  108 + <span class="input-group-btn">
95 <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()"> 109 <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()">
96 <span class="icon-circle icon-small color-theme-common-bg"> 110 <span class="icon-circle icon-small color-theme-common-bg">
97 <span class="glyphicon glyphicon-search"></span> 111 <span class="glyphicon glyphicon-search"></span>
98 - </span>  
99 - <span class="sr-only">Buscar</span>  
100 - </button>  
101 - </span>  
102 - </div>  
103 - <br/>  
104 - </div>  
105 - </div>  
106 - <div ng-if="pageInicio.themes && !vm.loadingFilter">  
107 - <category-list categories="pageInicio.themes" selected-category="pageInicio.selectedTheme"></category-list>  
108 - </div>  
109 - <div ng-if="!pageInicio.themes && pageInicio.loadingThemes">  
110 - <div class="alert alert-info" role="alert">  
111 - Carregando temas.  
112 - </div>  
113 - </div>  
114 - <div ng-if="!pageInicio.themes && pageInicio.themesError">  
115 - <div class="alert alert-danger" role="alert">  
116 - Não foi possível carregar a lista de temas neste momento.  
117 - </div>  
118 - </div>  
119 - </div>  
120 - <div class="col-sm-8 col-md-9">  
121 - <div class="row hidden-xs">  
122 - <div class="col-xs-12">  
123 - <div class="input-group input-group-lg input-group-search">  
124 - <label for="articleQueryFilter2" class="control-label sr-only">Buscar programas:</label>  
125 - <input id="articleQueryFilter2" type="search" class="form-control input-search" ng-model="pageInicio.query" placeholder="Buscar programas" aria-label="Buscar programas" >  
126 - <span class="input-group-btn"> 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>
  133 + </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">
127 <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()"> 141 <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()">
128 <span class="icon-circle icon-small color-theme-common-bg"> 142 <span class="icon-circle icon-small color-theme-common-bg">
129 <span class="glyphicon glyphicon-search"></span> 143 <span class="glyphicon glyphicon-search"></span>
130 - </span>  
131 - <span class="sr-only">Buscar</span>  
132 - </button>  
133 - </span>  
134 - </div>  
135 - </div>  
136 - </div>  
137 - <div id="search-result" class="row">  
138 - <div class="col-sm-12">  
139 - <header class="header">  
140 - <h2>Programas</h2>  
141 - <button type="button" class="btn btn-link" ng-click="pageInicio.showAllPrograms($event)">  
142 - <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Ver todos os {{::pageInicio.programs.length}} programas  
143 - </button>  
144 - </header>  
145 - </div>  
146 - </div>  
147 -  
148 - <div class="row">  
149 - <div class="col-sm-12" ng-if="pageInicio.filtredPrograms && !vm.loadingFilter">  
150 - <article-grid articles="pageInicio.filtredPrograms"></article-grid>  
151 - </div>  
152 - <div ng-if="!pageInicio.programs && pageInicio.loadingPrograms">  
153 - <div class="alert alert-info" role="alert">  
154 - Carregando programas.  
155 - </div>  
156 - </div>  
157 - <div ng-if="!pageInicio.programs && pageInicio.programsError">  
158 - <div class="alert alert-danger" role="alert">  
159 - Não foi possível carregar a lista de programas neste momento.  
160 - </div> 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>
  176 + </div>
161 </div> 177 </div>
162 - </div>  
163 </div> 178 </div>
164 - </div>  
165 - </div>  
166 - </section> 179 + </section>
167 </div> 180 </div>
src/app/pages/inicio/inicio.scss
  Diff comments   View file @8784086
@@ -119,6 +119,122 @@ @@ -119,6 +119,122 @@
119 } 119 }
120 } 120 }
121 } 121 }
  122 +
  123 +
  124 +
  125 +}
  126 +
  127 +.banner-respostas {
  128 + display: block;
  129 + position: relative;
  130 + border-radius: 5px;
  131 + // cursor: pointer;
  132 + width: 100%;
  133 + $bannerHeight: 338px;
  134 + $bannerBottomHeight: 40px;
  135 + text-align: center;
  136 +
  137 + &--link-top {
  138 + color: #fff;
  139 + display: table-cell;
  140 + vertical-align: middle;
  141 + position: relative;
  142 +
  143 + text-decoration: none;
  144 +
  145 + &:hover,
  146 + &:focus,
  147 + &:active {
  148 + color: #fff;
  149 + }
  150 + }
  151 +
  152 + &--background-image {
  153 + display: block;
  154 + position: absolute;
  155 + top: 0;
  156 + z-index: -1;
  157 + width: 100%;
  158 + height: 100%;
  159 + background-image: url('/assets/images/banner--background-image.png');
  160 + background-size: cover;
  161 + background-position: center;
  162 + background-color: #0E1333;
  163 + }
  164 +
  165 + &--logo {
  166 + margin: 10px;
  167 + }
  168 + &--text1 {
  169 + text-transform: uppercase;
  170 + font-size: 22px;
  171 + }
  172 + &--text2 {
  173 + color: #dfa821;
  174 + font-size: 22px;
  175 + font-weight: bold;
  176 + text-transform: uppercase;
  177 + }
  178 + &--text3 {}
  179 +
  180 + &--link-bottom {
  181 + color: #fff;
  182 + text-transform: uppercase;
  183 + font-weight: bold;
  184 + line-height: 38px;
  185 +
  186 + position: absolute;
  187 + bottom: 0;
  188 + left: 0;
  189 + display: block;
  190 + width: 100%;
  191 + height: $bannerBottomHeight;
  192 + background-color: #dfa821;
  193 + border-bottom-left-radius: 5px;
  194 + border-bottom-right-radius: 5px;
  195 + border-bottom: 2px solid #9c7513;
  196 +
  197 + &:hover,
  198 + &:focus,
  199 + &:active {
  200 + color: #fff;
  201 + }
  202 + }
  203 +
  204 + // @media screen and (min-width: $screen-lg) {}
  205 +
  206 + @media screen and (min-width: $screen-md) {
  207 + height: $bannerHeight;
  208 +
  209 + &--link-top,
  210 + &--background-image {
  211 + height: $bannerHeight - $bannerBottomHeight;
  212 + }
  213 + }
  214 +
  215 + @media screen and (min-width: $screen-sm) and (max-width: $screen-md) {
  216 + height: 255px;
  217 + margin: 30px 0 10px 0;
  218 +
  219 + &--link-top,
  220 + &--background-image {
  221 + height: 255px - $bannerBottomHeight;
  222 + }
  223 + }
  224 +
  225 + @media screen and (max-width: $screen-sm) {
  226 + margin: 30px 0 10px 0;
  227 + padding-bottom: 40px;
  228 +
  229 + &--link-top,
  230 + &--background-image {
  231 + padding-bottom: 20px;
  232 + }
  233 + }
  234 +
  235 + // @media screen and (max-width: $screen-xs) {
  236 + // margin: 15px 0;
  237 + // }
122 } 238 }
123 239
124 .section-gray { 240 .section-gray {
src/assets/images/banner--background-image.png 0 → 100644
View file @8784086

126 KB
src/assets/images/banner-logo--dialoga-brasil.png 0 → 100644
View file @8784086

855 Bytes