Download as
Browse Code »

Commit ed80738d508d7240e29ea6cf2c05edd0291f6781

Authored by Leonardo Merlin
2 parents 51159c6c 8784086e
Exists in master and in 4 other branches feature-captcha, production, staging, the_glorious_return_of_piwik

Merge branch 'respostas-home'

Showing 5 changed files with 279 additions and 149 deletions   Show diff stats
src/app/pages/inicio/inicio.controller.js
  Diff comments   View file @ed80738
... ... @@ -31,6 +31,7 @@
31 31 vm.article = null;
32 32 vm.events = null;
33 33 vm.featuredEvent = null;
  34 + vm.bannerRespostas = true;
34 35 vm.themes = null;
35 36 vm.selectedTheme = null;
36 37 vm.programs = null;
... ...
src/app/pages/inicio/inicio.html
  Diff comments   View file @ed80738
1 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 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 61 </div>
41   - </div>
42 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 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 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 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 96 </div>
80   - </div>
81 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 109 <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()">
96 110 <span class="icon-circle icon-small color-theme-common-bg">
97 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 141 <button type="button" class="btn btn-default" ng-click="pageInicio.submitSearch()">
128 142 <span class="icon-circle icon-small color-theme-common-bg">
129 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 177 </div>
162   - </div>
163 178 </div>
164   - </div>
165   - </div>
166   - </section>
  179 + </section>
167 180 </div>
... ...
src/app/pages/inicio/inicio.scss
  Diff comments   View file @ed80738
... ... @@ -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 240 .section-gray {
... ...
src/assets/images/banner--background-image.png 0 → 100644
View file @ed80738

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

855 Bytes