Download as
Browse Code »

Commit 53382f37f898bd0a039fb2a2888e22c1c0619d69

Authored by Leonardo Merlin
1 parent 80287b3f
Exists in master and in 6 other branches feature-captcha, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

WIP: update 'programa' page.

Showing 4 changed files with 346 additions and 212 deletions   Show diff stats
src/app/index.scss
  Diff comments   View file @53382f3
@@ -292,7 +292,9 @@ $common-color: #5E739E; @@ -292,7 +292,9 @@ $common-color: #5E739E;
292 .color-theme-common-fg {color: $common-color; } 292 .color-theme-common-fg {color: $common-color; }
293 .color-theme-common-bg {background-color: $common-color; } 293 .color-theme-common-bg {background-color: $common-color; }
294 .color-fg-white {color: #fff; } 294 .color-fg-white {color: #fff; }
295 -.color-bg-gray {color: #ccc; } 295 +.color-bg-white {background-color: #fff; }
  296 +.color-fg-gray {color: #ccc; }
  297 +.color-bg-gray {background-color: #ccc; }
296 298
297 // Contraste 299 // Contraste
298 .contraste { 300 .contraste {
src/app/pages/programas/programa.controller.js
  Diff comments   View file @53382f3
@@ -275,4 +275,20 @@ @@ -275,4 +275,20 @@
275 275
276 vm.proposalStatus = null; 276 vm.proposalStatus = null;
277 }; 277 };
  278 +
  279 + ProgramaPageController.prototype.toggleContentVisibility = function() {
  280 + var $sectionContent = angular.element('.section-content');
  281 +
  282 + if(!$sectionContent || $sectionContent.length === 0){
  283 + vm.$log.warn('".section-content" not found.');
  284 + return;
  285 + }
  286 +
  287 + if($sectionContent.is(':visible')){
  288 + $sectionContent.slideUp();
  289 + }else{
  290 + $sectionContent.slideDown();
  291 + angular.element('html,body').animate({scrollTop: $sectionContent.offset().top}, 'fast');
  292 + }
  293 + };
278 })(); 294 })();
src/app/pages/programas/programa.html
  Diff comments   View file @53382f3
1 <div class="container"> 1 <div class="container">
2 - <div class="row">  
3 - <div class="col-sm-12">  
4 - <div ncy-breadcrumb></div> 2 + <div class="row">
  3 + <div class="col-sm-12">
  4 + <div ncy-breadcrumb></div>
  5 + </div>
5 </div> 6 </div>
6 - </div>  
7 </div> 7 </div>
8 -  
9 <div class="page--program"> 8 <div class="page--program">
10 - <section>  
11 - <div class="container">  
12 - <div class="row">  
13 - <div class="col-sm-12">  
14 - <div ng-if="!pagePrograma.article && pagePrograma.loading" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>  
15 - <div ng-if="!pagePrograma.article && pagePrograma.error" class="alert alert-warning" role="alert">Erro ao carregar o programa.</div> 9 + <section ng-if="!pagePrograma.article">
  10 + <div class="container">
  11 + <div class="row">
  12 + <div class="col-sm-12">
  13 + <div ng-if="pagePrograma.loading" class="alert alert-info" role="alert">Carregando detalhes sobre o progama...</div>
  14 + <div ng-if="pagePrograma.error" class="alert alert-warning" role="alert">Erro ao carregar o programa.</div>
  15 + </div>
  16 + </div>
16 </div> 17 </div>
17 - </div>  
18 - </div>  
19 - </section>  
20 -  
21 - <div role="main" ng-class="pagePrograma.category.slug">  
22 - <section ng-if="pagePrograma.article.body">  
23 - <div class="container">  
24 - <div class="row">  
25 - <article class="program-preview">  
26 - <!-- Preview > Titulo -->  
27 - <div class="col-md-12">  
28 - <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1> 18 + </section>
  19 + <div role="main" ng-class="pagePrograma.category.slug">
  20 + <section ng-if="pagePrograma.article.body">
  21 + <div class="container">
  22 + <div class="row">
  23 + <article class="program-preview" ng-class="{ 'program-preview--archived': pagePrograma.article.archived }">
  24 + <!-- Preview > Titulo -->
  25 + <div class="col-md-12">
  26 + <h1 class="program-preview--title color-theme-fg">{{::pagePrograma.article.title}}</h1>
  27 + </div>
  28 + <!-- Preview > coluna da esquerda -->
  29 + <div class="col-md-8">
  30 + <div class="program-preview--box contraste-box">
  31 + <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div>
  32 + <div class="program-preview--box--content-wrapper">
  33 + <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">
  34 + <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>
  35 + </div>
  36 + <div class="program-preview--abstract color-theme-fg" ng-if="pagePrograma.article.archived === false">
  37 + <h2>{{::stripHtml(pagePrograma.article.summary)}}</h2>
  38 + </div>
  39 + <div class="program-preview--abstract-details" ng-if="pagePrograma.article.archived === false">
  40 + <div ng-bind-html="pagePrograma.article.summaryExtended"></div>
  41 + </div>
  42 + <div class="program-preview--share">
  43 + <div class="program-preview--share-label">COMPARTILHE ESTE <b>PROGRAMA</b></div>
  44 + <div class="dropdown">
  45 + <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>
  46 + <social-share social-url="pagePrograma.$state.href('programa', {slug: pagePrograma.article.slug}, {absolute: true})" social-text="pagePrograma.article.title" social-image="pagePrograma.banner.src" arrow-class="social-share--arrow" class="dropdown-menu dropdown-menu-right"></social-share>
  47 + </div>
  48 + </div>
  49 + <div class="program-preview--make-proposal" ng-if="pagePrograma.article.archived === false">
  50 + <div class="row">
  51 + <div class="col-sm-6">
  52 + <div class="button--themed">
  53 + <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
  54 + </div>
  55 + </div>
  56 + </div>
  57 + </div>
  58 + </div>
  59 + </div>
  60 + </div>
  61 + <!-- Preview > coluna da direita -->
  62 + <div class="col-md-4">
  63 + <div class="row">
  64 + <!-- Top Proposals -->
  65 + <div>
  66 + <!-- Loading Top Proposals -->
  67 + <div ng-if="pagePrograma.loadingTopProposals">
  68 + <div class="alert alert-info" role="alert">
  69 + Carregando propostas mais votadas...
  70 + </div>
  71 + </div>
  72 + <!-- Top Proposals > Carousel -->
  73 + <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
  74 + <h3 class="color-theme-fg">Propostas mais votadas</h3>
  75 + <proposal-carousel proposals="pagePrograma.proposalsTopRated" archived="pagePrograma.article.archived"></proposal-carousel>
  76 + </div>
  77 + </div>
  78 + <!-- Proposal Box -->
  79 + <div ng-if="!pagePrograma.article.archived">
  80 + <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">
  81 + <h3 class="color-theme-fg">Apoie outras propostas</h3>
  82 + <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" show-vote="true" focus="{{pagePrograma.search.proposal_id}}" do-vote="pagePrograma.vote(proposal_id, value)" archived="pagePrograma.article.archived"></proposal-box>
  83 + </div>
  84 + <!-- Loading Proposal Box -->
  85 + <div ng-if="pagePrograma.loadingProposalBox">
  86 + <div class="alert alert-info" role="alert">
  87 + Carregando propostas nesse programa...
  88 + </div>
  89 + </div>
  90 + </div>
  91 + <!-- No Proposals? okay! -->
  92 + <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
  93 + <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
  94 + <h3>Programas sem propostas</h3>
  95 + <p>
  96 + Este programa ainda não possui nenhuma proposta.
  97 + <div class="button--themed">
  98 + <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>
  99 + </div>
  100 + </p>
  101 + </div>
  102 + </div>
  103 + </div>
  104 + </div>
  105 + </article>
  106 + </div>
29 </div> 107 </div>
30 - <!-- Preview > coluna da esquerda -->  
31 - <div class="col-md-8">  
32 - <div class="program-preview--box contraste-box">  
33 - <div class="program-preview--banner" ng-style="{'background-image':'url( {{::pagePrograma.banner.src}} )'}"></div>  
34 - <div class="program-preview--box--content-wrapper">  
35 - <div class="program-preview--icon icon-wrapper-rounded color-theme-bg" ng-class="pagePrograma.category.slug">  
36 - <span class="icon" ng-class="'icon-tema-' + pagePrograma.category.slug"></span>  
37 - </div>  
38 - <div class="program-preview--abstract color-theme-fg">  
39 - <h2>{{::stripHtml(pagePrograma.article.summary)}}</h2>  
40 - </div>  
41 - <div class="program-preview--abstract-details">  
42 - <div ng-bind-html="pagePrograma.article.summaryExtended"></div>  
43 - </div>  
44 - <div class="program-preview--share">  
45 - <div class="program-preview--share-label">COMPARTILHE ESTE <b>PROGRAMA</b></div>  
46 - <div class="dropdown">  
47 - <button id="dropdown-share-btn" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Mostrar ou esconder a lista redes sociais para compartilhamento"><span class="icon icon-social-share-small" aria-hidden="true"></span></button>  
48 - <social-share  
49 - social-url="pagePrograma.$state.href('programa', {slug: pagePrograma.article.slug}, {absolute: true})"  
50 - social-text="pagePrograma.article.title"  
51 - social-image="pagePrograma.banner.src"  
52 - arrow-class="social-share--arrow"  
53 - class="dropdown-menu dropdown-menu-right"  
54 - ></social-share> 108 + </section>
  109 + <section id="section-proposal-list" class="proposal-extended-section" style="display:none;" ng-if="pagePrograma.proposalsTopFive && pagePrograma.proposalsTopFive.length > 0">
  110 + <div class="container">
  111 + <div class="proposal-extended-section-header">
  112 + <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>
  113 + <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalsList()">
  114 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  115 + </button>
  116 + </div>
  117 + <div class="proposal-extended-section-content">
  118 + <proposal-list proposals="pagePrograma.proposalsTopFive" archived="pagePrograma.article.archived"></proposal-list>
  119 + <div class="row text-center">
  120 + <div class="col-xs-12">
  121 + <a ui-sref="ranking({tema: pagePrograma.category.slug, programa: pagePrograma.article.slug})" class="btn btn-link">
  122 + <span ng-if="pagePrograma.total_proposals > 5">Veja todas as {{pagePrograma.total_proposals}} propostas</span>
  123 + </a>
  124 + </div>
55 </div> 125 </div>
56 - </div>  
57 - <div class="program-preview--make-proposal"> 126 + </div>
  127 + </div>
  128 + </section>
  129 + <section id="section-proposal-form" class="proposal-extended-section" style="display:none;">
  130 + <div class="container">
  131 + <div class="proposal-extended-section-header">
  132 + <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalForm()">
  133 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  134 + </button>
  135 + </div>
  136 + <div ng-if="!pagePrograma.$rootScope.currentUser">
  137 + <show-message type="'alert'" message="'Você não está logado!'" description="'Você precisa estar logado para enviar uma proposta.'"></show-message>
58 <div class="row"> 138 <div class="row">
59 - <div class="col-sm-6">  
60 - <div class="button--themed" ng-if="!pagePrograma.article.archived">  
61 - <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button> 139 + <div class="col-sm-4"></div>
  140 + <div class="col-sm-8 text-center-sm">
  141 + <a ui-sref="entrar({redirect_uri: pagePrograma.sendProposalRedirectURI})">Clique aqui para ir para a página de login</a>
62 </div> 142 </div>
63 - <div ng-if="pagePrograma.article.archived">  
64 - <button type="button"  
65 - class="btn btn-block disabled"  
66 - title="Este programa já foi analisado. Não está mais habilitado a receber novas propostas."  
67 - ng-click="pagePrograma.showDetailAboutArchived = true"  
68 - >Faça uma proposta</button> 143 + </div>
  144 + </div>
  145 + <div ng-if="pagePrograma.$rootScope.currentUser">
  146 + <div class="proposal-extended-section-content">
  147 + <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.SUCCESS">
  148 + <show-message type="'success'" message="'Proposta enviada com sucesso!'" description="'Sua proposta foi enviada para a nossa equipe de moderação. Em aproximadamente 72 horas você receberá em seu endereço de e-mail uma resposta sobre a sua proposta.'"></show-message>
  149 + <div class="row">
  150 + <div class="col-sm-4"></div>
  151 + <div class="col-sm-8 text-center-sm">
  152 + <button type="button" class="btn btn-link" ng-click="pagePrograma.sendAnotherProposal()">
  153 + Clique aqui para enviar outra proposta
  154 + </button>
  155 + </div>
  156 + </div>
  157 + </div>
  158 + <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.SENDING">
  159 + Enviando...
  160 + </div>
  161 + <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.ERROR">
  162 + <show-message type="'error'" message="'Erro ' + pagePrograma.error.code + '!'" description="pagePrograma.error.message"></show-message>
  163 + <div class="row">
  164 + <div class="col-sm-4"></div>
  165 + <div class="col-sm-8 text-center-sm">
  166 + <button type="button" class="btn btn-link" ng-click="pagePrograma.sendAnotherProposal()">
  167 + Clique aqui para enviar outra proposta
  168 + </button>
  169 + </div>
  170 + </div>
  171 + </div>
  172 + <div ng-if="!pagePrograma.proposalStatus">
  173 + <cadastro-proposta program="pagePrograma.article" status="pagePrograma.proposalStatus"></cadastro-proposta>
69 </div> 174 </div>
70 - </div>  
71 - <div class="col-sm-6" ng-show="pagePrograma.showDetailAboutArchived === true">  
72 - <p>(&#9679;) Este programa está arquivado.<br>Não pode receber novas propostas.</p>  
73 - </div>  
74 </div> 175 </div>
75 - </div>  
76 </div> 176 </div>
77 - </div>  
78 </div> 177 </div>
79 - <!-- Preview > coluna da direita -->  
80 - <div class="col-md-4">  
81 - <div class="row">  
82 -  
83 - <!-- Top Proposals -->  
84 - <div>  
85 - <!-- Loading Top Proposals -->  
86 - <div ng-if="pagePrograma.loadingTopProposals">  
87 - <div class="alert alert-info" role="alert">  
88 - Carregando propostas mais votadas... 178 + </section>
  179 + <section id="section-archived-banner" class="color-theme-bg" ng-if="pagePrograma.article.archived">
  180 + <div class="container">
  181 + <div class="row">
  182 + <div class="col-sm-12">
  183 + <h2>
  184 + <div class="program-banner--icon-container" aria-hidden="true">
  185 + <div class="program-banner--icon icon-wrapper-rounded color-bg-white" ng-class="pagePrograma.category.slug">
  186 + <span class="icon" ng-class="'icon-discussion'"></span>
  187 + </div>
  188 + </div>
  189 + <span class="archived-banner--title1">As propostas para este programa já foram</span>
  190 + <br/>
  191 + <span class="archived-banner--title2">respondidas pelo governo! Confira as respostas:</span>
  192 + </h2>
89 </div> 193 </div>
90 - </div>  
91 -  
92 - <!-- Top Proposals > Carousel -->  
93 - <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">  
94 - <h3 class="color-theme-fg">Propostas mais votadas</h3>  
95 - <proposal-carousel  
96 - proposals="pagePrograma.proposalsTopRated"  
97 - archived="pagePrograma.article.archived"  
98 - ></proposal-carousel>  
99 - </div>  
100 </div> 194 </div>
101 -  
102 - <!-- Proposal Box -->  
103 - <div ng-if="!pagePrograma.article.archived">  
104 - <div class="col-xs-12" ng-if="!pagePrograma.loadingProposalBox && pagePrograma.randomProposal" ng-class="{'focused-proposal': !!pagePrograma.search.proposal_id}">  
105 - <h3 class="color-theme-fg">Apoie outras propostas</h3>  
106 - <proposal-box  
107 - proposal="pagePrograma.randomProposal"  
108 - topic="pagePrograma.article"  
109 - category="pagePrograma.category"  
110 - show-vote="true"  
111 - focus="{{pagePrograma.search.proposal_id}}"  
112 - do-vote="pagePrograma.vote(proposal_id, value)"  
113 - archived="pagePrograma.article.archived"  
114 - ></proposal-box>  
115 - </div>  
116 -  
117 - <!-- Loading Proposal Box -->  
118 - <div ng-if="pagePrograma.loadingProposalBox">  
119 - <div class="alert alert-info" role="alert">  
120 - Carregando propostas nesse programa... 195 + </div>
  196 + </section>
  197 + <section id="section-response" ng-if="pagePrograma.article.archived">
  198 + <div ng-if="!pagePrograma.proposalsTopRated">
  199 + <div class="container">
  200 + <div class="row">
  201 + <div class="col-sm-12">
  202 + <div class="alert alert-info" role="alert">
  203 + Carregando propostas mais votadas...
  204 + </div>
  205 + </div>
121 </div> 206 </div>
122 - </div>  
123 - </div>  
124 -  
125 - <!-- No Proposals? okay! -->  
126 - <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">  
127 - <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">  
128 - <h3>Programas sem propostas</h3>  
129 - <p>  
130 - Este programa ainda não possui nenhuma proposta.  
131 - <div class="button--themed">  
132 - <button type="button" class="btn btn-block" ng-click="pagePrograma.showProposalForm()">Faça uma proposta</button>  
133 - </div>  
134 - </p>  
135 - </div>  
136 </div> 207 </div>
137 - </div>  
138 - </div>  
139 - </article>  
140 - </div>  
141 - </div>  
142 - </section>  
143 -  
144 - <section id="section-proposal-list" class="proposal-extended-section" style="display:none;" ng-if="pagePrograma.proposalsTopFive && pagePrograma.proposalsTopFive.length > 0">  
145 - <div class="container">  
146 - <div class="proposal-extended-section-header">  
147 - <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>  
148 - <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalsList()">  
149 - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>  
150 - </button>  
151 - </div>  
152 - <div class="proposal-extended-section-content">  
153 - <proposal-list proposals="pagePrograma.proposalsTopFive" archived="pagePrograma.article.archived"></proposal-list>  
154 - <div class="row text-center">  
155 - <div class="col-xs-12">  
156 - <a ui-sref="ranking({tema: pagePrograma.category.slug, programa: pagePrograma.article.slug})" class="btn btn-link">  
157 - <span ng-if="pagePrograma.total_proposals > 5">Veja todas as {{pagePrograma.total_proposals}} propostas</span>  
158 - </a>  
159 </div> 208 </div>
160 - </div>  
161 - </div>  
162 - </div>  
163 - </section>  
164 -  
165 - <section id="section-proposal-form" class="proposal-extended-section" style="display:none;">  
166 - <div class="container">  
167 - <div class="proposal-extended-section-header">  
168 - <button type="button" aria-label="Close" class="btn btn-close" ng-click="pagePrograma.hideProposalForm()">  
169 - <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>  
170 - </button>  
171 - </div>  
172 - <div ng-if="!pagePrograma.$rootScope.currentUser">  
173 - <show-message  
174 - type="'alert'"  
175 - message="'Você não está logado!'"  
176 - description="'Você precisa estar logado para enviar uma proposta.'"  
177 - ></show-message>  
178 - <div class="row">  
179 - <div class="col-sm-4"></div>  
180 - <div class="col-sm-8 text-center-sm">  
181 - <a ui-sref="entrar({redirect_uri: pagePrograma.sendProposalRedirectURI})">Clique aqui para ir para a página de login</a>  
182 - </div>  
183 - </div>  
184 - </div>  
185 - <div ng-if="pagePrograma.$rootScope.currentUser">  
186 - <div class="proposal-extended-section-content">  
187 - <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.SUCCESS">  
188 - <show-message  
189 - type="'success'"  
190 - message="'Proposta enviada com sucesso!'"  
191 - description="'Sua proposta foi enviada para a nossa equipe de moderação. Em aproximadamente 72 horas você receberá em seu endereço de e-mail uma resposta sobre a sua proposta.'"  
192 - ></show-message>  
193 - <div class="row">  
194 - <div class="col-sm-4"></div>  
195 - <div class="col-sm-8 text-center-sm">  
196 - <button type="button" class="btn btn-link" ng-click="pagePrograma.sendAnotherProposal()">  
197 - Clique aqui para enviar outra proposta  
198 - </button> 209 + <div ng-if="pagePrograma.proposalsTopRated">
  210 + <div class="sub-section" ng-repeat="proposal in pagePrograma.proposalsTopRated">
  211 + <div class="container">
  212 + <div class="row">
  213 + <div class="col-sm-12">
  214 + <h3 class="color-theme-fg">{{($index+1)}}a proposta mais votada:</h3>
  215 + <p>{{::proposal.abstract}}</p>
  216 +
  217 + <div class="button--themed">
  218 + <button class="btn btn-block">
  219 + Veja a resposta e o compromisso do governo
  220 + <div class="button-left-icon">
  221 + <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
  222 + </div>
  223 + </button>
  224 + </div>
  225 + </div>
  226 + </div>
  227 + </div>
199 </div> 228 </div>
200 - </div>  
201 - </div>  
202 - <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.SENDING">  
203 - Enviando...  
204 </div> 229 </div>
205 - <div ng-if="pagePrograma.proposalStatus === pagePrograma.PROPOSAL_STATUS.ERROR">  
206 - <show-message  
207 - type="'error'"  
208 - message="'Erro ' + pagePrograma.error.code + '!'"  
209 - description="pagePrograma.error.message"  
210 - ></show-message>  
211 - <div class="row">  
212 - <div class="col-sm-4"></div>  
213 - <div class="col-sm-8 text-center-sm">  
214 - <button type="button" class="btn btn-link" ng-click="pagePrograma.sendAnotherProposal()">  
215 - Clique aqui para enviar outra proposta  
216 - </button> 230 + <div class="response--context vertical-padding">
  231 + <div class="container">
  232 + <div class="row">
  233 + <div class="col-sm-5">
  234 + <div class="button--themed">
  235 + <a class="btn btn-block" ui-sref="respostas">
  236 + <span>Veja todas as propostas</span>
  237 + <br/>
  238 + <span>Respondidas pelo governo</span>
  239 + <span class="glyphicon glyphicon-chevron-right"></span>
  240 + </a>
  241 + </div>
  242 + </div>
  243 + <div class="col-sm-2"></div>
  244 + <div class="col-sm-5">
  245 + <div class="button--themed">
  246 + <button type="button" class="btn btn-block" ng-click="pagePrograma.toggleContentVisibility()">
  247 + <span>Informações sobre o programa</span>
  248 + <br/>
  249 + <span>"{{::pagePrograma.article.title}}"</span>
  250 + <span class="glyphicon glyphicon-chevron-right"></span>
  251 + </button>
  252 + </div>
  253 + </div>
  254 + </div>
217 </div> 255 </div>
218 - </div>  
219 </div> 256 </div>
220 - <div ng-if="!pagePrograma.proposalStatus">  
221 - <cadastro-proposta program="pagePrograma.article" status="pagePrograma.proposalStatus"></cadastro-proposta>  
222 - </div>  
223 - </div>  
224 - </div>  
225 - </div>  
226 - </section>  
227 -  
228 - <section class="section-content">  
229 - <article class="program-content" ng-if="pagePrograma.article" ng-class="pagePrograma.article.slug">  
230 - <div ng-bind-html="pagePrograma.article.bodyTrusted"></div>  
231 - </article>  
232 - </section>  
233 - </div> 257 + </section>
  258 + <section class="section-content" ng-style="{ display: pagePrograma.article.archived ? 'none': 'block' }">
  259 + <article class="program-content" ng-if="pagePrograma.article" ng-class="pagePrograma.article.slug">
  260 + <div ng-bind-html="pagePrograma.article.bodyTrusted"></div>
  261 + </article>
  262 + </section>
  263 + </div>
234 </div> 264 </div>
src/app/pages/programas/programas.scss
  Diff comments   View file @53382f3
@@ -182,5 +182,91 @@ @@ -182,5 +182,91 @@
182 .proposal-extended-section-header { 182 .proposal-extended-section-header {
183 position: relative; 183 position: relative;
184 } 184 }
  185 +
  186 + #section-archived-banner {
  187 + position: relative;
  188 + padding: 20px 0;
  189 + color: #fff;
  190 +
  191 + margin-top: 30px;
  192 +
  193 + h2 {
  194 + font-size: 28px;
  195 + line-height: 40px;
  196 +
  197 + @media screen and (max-width: $screen-md) {
  198 + font-size: 22px;
  199 + line-height: 30px;
  200 + }
  201 +
  202 + @media screen and (max-width: $screen-xs) {
  203 + font-size: 18px;
  204 + line-height: 24px;
  205 + }
  206 + }
  207 +
  208 + .program-banner--icon {
  209 + float: left;
  210 + margin-right: 20px;
  211 + width: 85px;
  212 + height: 85px;
  213 + overflow: hidden;
  214 +
  215 + .icon-discussion {
  216 + position: relative;
  217 + top: -3px;
  218 + left: -3px;
  219 + display: block;
  220 + width: 85px;
  221 + height: 85px;
  222 + background: red;
  223 + }
  224 + }
  225 +
  226 + .archived-banner--title2 {
  227 + font-weight: bold;
  228 + }
  229 + }
  230 +
  231 + #section-response {
  232 +
  233 + h3 {
  234 + font-weight: bold;
  235 + }
  236 + .sub-section{
  237 + padding: 20px 0;
  238 + &:nth-child(odd) {
  239 + background-color: #f1f1f1;
  240 + }
  241 +
  242 + &:nth-child(even) {
  243 + background-color: #ffffff;
  244 + }
  245 + }
  246 +
  247 + .button--themed {
  248 + position: relative;
  249 + max-width: 500px;
  250 +
  251 + button {
  252 + text-transform: uppercase;
  253 + letter-spacing: 1px;
  254 + }
  255 + }
  256 +
  257 + .button-left-icon {
  258 + position: absolute;
  259 + top: 15px;
  260 + right: 15px;
  261 +
  262 + .glyphicon {
  263 + position: relative;
  264 + top: -2px;
  265 + background-color: #fff;
  266 + padding: 6px 5px 5px 6px;
  267 + border-radius: 100%;
  268 + }
  269 + }
  270 + }
185 } 271 }
186 272