Download as
Browse Code »

Commit 877a764520ea1868190b52ea3fee484e102afe6b

Authored by Augusto dos Anjos Almeida
1 parent 4c2b08af
Exists in refactory-sass

paginas de conteudo e propostas

Showing 6 changed files with 448 additions and 191 deletions   Show diff stats
index.html
  Diff comments   View file @877a764
... ... @@ -5,6 +5,7 @@
5 5  
6 6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 7 <meta name="viewport" content="width=device-width, initial-scale=1">
  8 + <meta property="og:title" content="Dialoga Brasil" />
8 9  
9 10 <script type="text/javascript">
10 11 /**
... ... @@ -75,15 +76,27 @@
75 76  
76 77 </head>
77 78 <body>
  79 + <div id="fb-root"></div>
  80 + <script>(function(d, s, id) {
  81 + var js, fjs = d.getElementsByTagName(s)[0];
  82 + if (d.getElementById(id)) return;
  83 + js = d.createElement(s); js.id = id;
  84 + js.src = "//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.3&appId=1449495475361394";
  85 + fjs.parentNode.insertBefore(js, fjs);
  86 + }(document, 'script', 'facebook-jssdk'));</script>
  87 +
  88 +
78 89 <div class="container">
79   - <div id="proposal-result"></div>
  90 + <div id="proposal-result" class="row"></div>
80 91 </div>
81   - <div class="clearfix"></div>
82 92  
83 93 <script id="proposal-template" type="text/x-handlebars-template">
84 94 <header>
85 95 <h1><a href="#">{{article.title}}</a></h1>
86 96 <a id="display-contrast" href="#">Alto Contraste</a>
  97 + <div class="social">
  98 + <a href="#" class="fb-share" data-description="Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo">Compartilhar</a>
  99 + </div>
87 100 </header>
88 101  
89 102 <div id="content">
... ... @@ -158,6 +171,9 @@
158 171 {{/each}}
159 172 </header>
160 173  
  174 + <div class="social">
  175 + <a href="#" class="fb-share" data-caption="{{title}}" data-description="{{stripTags abstract}}">Compartilhar</a>
  176 + </div>
161 177 <div class="proposal-header">
162 178 <div class="abstract">
163 179 <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
... ... @@ -177,7 +193,7 @@
177 193 <div class="container">
178 194 <div class="col-sm-4 col-sm-offset-4">
179 195 <div class="go-to-proposal-button">
180   - <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}">
  196 + <a href="#/programas/{{id}}" data-target="proposal-item-{{id}}" class="button button-participe">
181 197 <span class="fa fa-reply"></span>
182 198 Participe
183 199 </a>
... ... @@ -186,97 +202,74 @@
186 202 </div>
187 203 </div>
188 204  
189   - <div class="make-proposal-container">
190   - <div class="make-proposal">
191   - <div class="container-title">Faça Uma Proposta</div>
192   - <div class="subtitle">Qual a sua sugestão para melhorar este programa?</div>
193   - <div class="info">Esta consulta termina em julho de 2015. Até lá, todas as propostas serão lidas e as cinco mais pontuadas em cada programa receberão resposta oficial do governo.</div>
194   - <div class="send-proposal-button send-button"><a href="#"><span>Envie Sua Proposta</span></a></div>
195   - <div class="login-container hide">Login</div>
196   - <form class="make-proposal-form save-article-form hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
197   - <div class="message hide"></div>
198   - <div>
199   - <div><label for="article_abstract">Descrição</label></div>
200   - <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
  205 + <div class="row">
  206 + <div class="make-proposal-container col-sm-6">
  207 + <div class="make-proposal box">
  208 + <div class="container-title box-title">Faça Uma Proposta</div>
  209 + <div class="subtitle box-subtitle">Qual a sua sugestão para melhorar este programa?</div>
  210 + <div class="info">Esta consulta termina em julho de 2015. Até lá, todas as propostas serão lidas e as cinco mais pontuadas em cada programa receberão resposta oficial do governo.</div>
  211 + <div class="send-proposal-button send-button box-footer"><a href="#" class="button button-send"><span>Envie Sua Proposta</span></a></div>
  212 + <div class="login-container hide">Login</div>
  213 + <form class="make-proposal-form save-article-form hide" id="make-proposal-form-{{id}}" action="{{proposal_action ../article . }}" method="post">
  214 + <div class="message hide"></div>
  215 + <div>
  216 + <div><label for="article_abstract">Descrição</label></div>
  217 + <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea>
  218 + </div>
  219 + <input type="hidden" id="type" name="article[type]" value="ProposalsDiscussionPlugin::Proposal">
  220 + <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Proposal">
  221 + <input type="submit" id="make-proposal-button" name="make-proposal-button" class="make-proposal-button" value="Enviar">
  222 + </form>
  223 + <div class="success-proposal-sent success-sent hide send-button">
  224 + <p>Sua proposta foi encaminhada com sucesso! Ela se tornará pública em até 24 horas e poderá ser apoiada por outros participantes.</p>
  225 + <a href="#">Faça nova proposta</a>
201 226 </div>
202   - <input type="hidden" id="type" name="article[type]" value="ProposalsDiscussionPlugin::Proposal">
203   - <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Proposal">
204   - <input type="submit" id="make-proposal-button" name="make-proposal-button" class="make-proposal-button" value="Enviar">
205   - </form>
206   - <div class="success-proposal-sent success-sent hide send-button">
207   - <p>Sua proposta foi encaminhada com sucesso! Ela se tornará pública em até 24 horas e poderá ser apoiada por outros participantes.</p>
208   - <a href="#">Faça nova proposta</a>
  227 + <div class="clearfix"></div>
209 228 </div>
210   - <div class="clearfix"></div>
211 229 </div>
212   - </div>
213   -
214   - <div class="support-proposal-container">
215   - <div class="support-proposal">
216   - <div class="container-title"> Apoie outras propostas</div>
217   - <div class="random-proposal"></div>
218   - <div class="loading">Carregando...</div>
219   - <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
  230 + <div class="support-proposal-container col-sm-6">
  231 + <div class="support-proposal box box-center">
  232 + <div class="container-title box-title"> Apoie outras propostas</div>
  233 + <div class="random-proposal"></div>
  234 + <div class="loading">Carregando...</div>
  235 + <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div>
  236 + </div>
220 237 </div>
221 238 </div>
222 239  
223   - <div class="results-container hide"></div>
224   -
225   - <div class="experience-proposal-container">
226   - <div class="experience-proposal">
227   - <div class="container-title">Conte sua experiência</div>
228   - <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p>
229   - <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p>
230   - <div class="send-experience-button send-button"><a href="#"><span>Envie Sua Experiência</span></a></div>
231   - <div class="login-container hide">Login</div>
232   - <form class="make-experience-form save-article-form hide" id="make-experience-form-{{id}}" action="/api/v1/articles/{{id}}/children" method="post">
233   - <div class="message hide"></div>
234   - <div>
235   - <div>
236   - <label for="article_abstract">Descrição</label>
237   - </div>
238   - <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="5000"></textarea>
239   - </div>
240   - <input type="hidden" id="content_type" name="content_type" value="ProposalsDiscussionPlugin::Story">
241   - <input type="submit" id="make-experience-button" name="make-experience-button" class="make-experience-button" value="Enviar">
242   - </form>
243   - <div class="success-experience-sent success-sent hide send-button">
244   - <p>Sua experiência foi encaminhada com sucesso!</p>
245   - <a href="#">Encaminhar Nova Experiência</a>
  240 + <div class="results-container hide box"></div>
  241 +
  242 + <div class="row">
  243 + <div class="talk-proposal-container col-sm-12">
  244 + <div class="talk-proposal box">
  245 + <div class="container-title box-title">Bate-papo com os ministros</div>
  246 + <p>Confira as datas e horários:</p>
  247 + <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
  248 + <li>
  249 + <span>Arthur Chioro</span>
  250 + <span>Saúde</span>
  251 + <div class="date"><i class="fa fa-calendar"></i> 17/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  252 + </li>
  253 + <li>
  254 + <span>Tereza Campello</span>
  255 + <span>Desenvolvimento Social</span>
  256 + <div class="date"><i class="fa fa-calendar"></i> 18/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  257 + </li>
  258 + <li>
  259 + <span>Renato Janine Ribeiro</span>
  260 + <span>Educação</span>
  261 + <div class="date"><i class="fa fa-calendar"></i> 24/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  262 + </li>
  263 + <li>
  264 + <span>José Eduardo Cardozo</span>
  265 + <span>Justiça</span>
  266 + <div class="date"><i class="fa fa-calendar"></i> 25/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
  267 + </li>
  268 + </ul>
246 269 </div>
247 270 </div>
248 271 </div>
249 272  
250   - <div class="talk-proposal-container">
251   - <div class="talk-proposal">
252   - <div class="container-title">Bate-papo com os ministros</div>
253   - <p>Confira as datas e horários:</p>
254   - <ul class="calendar" data-slick='{"infinite": false, "rows": 2}'>
255   - <li>
256   - <span>Arthur Chioro</span>
257   - <span>Saúde</span>
258   - <div class="date"><i class="fa fa-calendar"></i> 17/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
259   - </li>
260   - <li>
261   - <span>Tereza Campello</span>
262   - <span>Desenvolvimento Social</span>
263   - <div class="date"><i class="fa fa-calendar"></i> 18/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
264   - </li>
265   - <li>
266   - <span>Renato Janine Ribeiro</span>
267   - <span>Educação</span>
268   - <div class="date"><i class="fa fa-calendar"></i> 24/06/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
269   - </li>
270   - <li>
271   - <span>José Eduardo Cardozo</span>
272   - <span>Justiça</span>
273   - <div class="date"><i class="fa fa-calendar"></i> 25/04/2015</div><div class="time"><i class="fa fa-clock-o"></i> 19:00</div>
274   - </li>
275   - </ul>
276   - </div>
277   - </div>
278   -
279   - <div class="clearfix"></div>
280 273 </div>
281 274 </article>
282 275 {{!-- </div> --}}
... ... @@ -285,13 +278,16 @@
285 278  
286 279 <script id="support-proposal-template" type="text/x-handlebars-template">
287 280 <div class="abstract">
288   - <p>{{stripTags (trimString abstract 200)}}</p>
  281 + <p class="box-subtitle">{{stripTags (trimString abstract 200)}}</p>
289 282 </div>
290 283 <div class="vote-actions">
291 284 <a href="#" class="like dislike" data-vote-value="-1"></a>
292 285 <a href="#" class="like" data-vote-value="1"></a>
293   - <a href="#" class="skip">Pular</a>
294   - <a href="#" class="vote-result">Resultados</a>
  286 + <a href="#" class="skip button box-footer">Pular</a>
  287 + <a href="#" class="vote-result box-bottom">Resultados</a>
  288 + </div>
  289 + <div class="social">
  290 + <a href="#/programas/{{parent.id}}/propostas/{{id}}" class="fb-share" data-caption="{{parent.title}}" data-description="{{stripTags abstract}}">Compartilhar</a>
295 291 </div>
296 292 </script>
297 293  
... ...
js/main.js
  Diff comments   View file @877a764
... ... @@ -58,6 +58,8 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
58 58 }
59 59  
60 60 var article = data.articles[0];
  61 + var parentTitle = $('#proposal-item-'+topic_id).find('.proposal-header .title').text();
  62 + article.parent = {id: topic_id, title: parentTitle};
61 63 $randomProposal.html(supportProposalTemplate(article));
62 64 $body.off('click', '.vote-actions .skip');
63 65 $body.on('click', '.vote-actions .skip', function(e) {
... ... @@ -641,6 +643,23 @@ define([&#39;handlebars&#39;, &#39;fastclick&#39;, &#39;handlebars_helpers&#39;], function(Handlebars, F
641 643 e.preventDefault();
642 644 });
643 645  
  646 + $(document).on('click', '.social .fb-share', function(e) {
  647 + var link = $(this).attr('href');
  648 + if(link==='#' || link ==='') {
  649 + link = window.location.href;
  650 + } else {
  651 + link = 'http:'+Url.addBaseUrl(link);
  652 + }
  653 + FB.ui({
  654 + method: 'feed',
  655 + link: link,
  656 + name: $(this).data('name') || 'Dialoga Brasil',
  657 + caption: $(this).data('caption') || 'dialoga.gov.br',
  658 + description: $(this).data('description'),
  659 + }, function(response){});
  660 + e.preventDefault();
  661 + });
  662 +
644 663 $(document).on('click', '.new-user', function(e) {
645 664 var loginForm = $(this).parents('#login-form');
646 665 loginForm.hide();
... ...
novo.css
  Diff comments   View file @877a764
  1 +@charset "UTF-8";
1 2 body {
2 3 font-family: "Open Sans", sans-serif;
3 4 font-size: 16px;
... ... @@ -128,51 +129,145 @@ h4 {
128 129 padding-top: 5px;
129 130 transition: all 200ms; }
130 131  
131   -.make-proposal {
  132 +.box {
132 133 height: 500px;
133 134 border: 1px solid;
134   - margin-bottom: 20px;
135   - margin-left: 0;
136   - margin-right: 10px;
137   - margin-top: 0; }
138   - .make-proposal-container {
139   - float: left;
140   - height: 500px;
141   - position: relative;
142   - width: 50%; }
143   - .make-proposal .container-title {
144   - font-weight: 500;
  135 + margin-bottom: 10px;
  136 + padding: 20px;
  137 + position: relative; }
  138 + .box-title {
145 139 font-size: 38px;
146   - margin: 20px; }
147   - .make-proposal .subtitle {
  140 + font-weight: 400;
  141 + margin-bottom: 20px; }
  142 + .box-subtitle {
148 143 font-size: 24px;
149 144 font-weight: 700;
150   - margin: 20px; }
151   - .make-proposal .info {
152   - font-size: 14px;
153   - margin: 20px; }
154   - .make-proposal .send-proposal-button a {
155   - background-color: #000;
156   - border-radius: 5px;
  145 + line-height: 1.2;
  146 + margin-bottom: 20px; }
  147 + .box-footer, .box-bottom {
  148 + position: absolute;
157 149 bottom: 40px;
158   - color: #fff;
159   - display: block;
  150 + margin-left: -30%;
  151 + left: 50%;
  152 + width: 60%; }
  153 + .box-bottom {
  154 + bottom: 10px;
  155 + color: #000;
160 156 font-size: 14px;
161 157 font-weight: 700;
162   - left: 50%;
163   - margin-left: -30%;
164   - padding: 20px 0;
165   - position: absolute;
  158 + text-align: center; }
  159 + .box-bottom:hover, .box-bottom:focus {
  160 + color: #000; }
  161 + .box-center {
  162 + text-align: center; }
  163 +
  164 +.vote-actions .like {
  165 + background: url(images/like.png) no-repeat;
  166 + display: inline-block;
  167 + height: 72px;
  168 + margin: 0 6%;
  169 + width: 76px; }
  170 +.vote-actions .dislike {
  171 + background-image: url(images/dislike.png); }
  172 +
  173 +.results-content .total {
  174 + float: left; }
  175 +.results-content .vote-result, .results-content .updated-at {
  176 + float: right; }
  177 +.results-content table {
  178 + clear: both;
  179 + font-weight: 300; }
  180 + .results-content table tr:nth-child(odd) {
  181 + background: #e5e5e5; }
  182 + .results-content table td {
  183 + padding: 0 5px; }
  184 + .results-content table .header {
  185 + font-weight: 700;
  186 + text-align: center; }
  187 + .results-content table .abstract-text {
  188 + width: 80%; }
  189 + .results-content table .value {
166 190 text-align: center;
167   - text-transform: uppercase;
168   - transition: all 200ms;
169   - width: 60%; }
170   - .make-proposal .send-proposal-button a:hover {
171   - background-color: #333333;
172   - text-decoration: none; }
173   - .make-proposal .send-proposal-button span {
174   - padding-left: 20px;
175   - background: url(images/airplane.png) left center no-repeat; }
  191 + width: 10%; }
  192 + .results-content table .truncate {
  193 + display: table;
  194 + table-layout: fixed;
  195 + width: 100%; }
  196 + .results-content table .truncated {
  197 + overflow-x: hidden;
  198 + text-overflow: ellipsis;
  199 + white-space: nowrap; }
  200 +
  201 +.paging {
  202 + padding: 5px; }
  203 + .paging ul {
  204 + display: table;
  205 + list-style: none;
  206 + margin: auto;
  207 + padding: 0; }
  208 + .paging li {
  209 + float: left; }
  210 + .paging .page-link, .paging span {
  211 + padding: 0 7px;
  212 + font-size: 14px;
  213 + font-weight: 400;
  214 + text-align: center;
  215 + background-color: #000;
  216 + color: #fff;
  217 + display: inline-block;
  218 + line-height: 24px; }
  219 + .paging .current {
  220 + background-color: #333333; }
  221 + .paging .next {
  222 + border-radius: 0 5px 5px 0; }
  223 + .paging .prev {
  224 + border-radius: 5px 0 0 5px; }
  225 +
  226 +.slick-slider {
  227 + list-style: none;
  228 + margin-bottom: 0;
  229 + margin-left: auto;
  230 + margin-right: auto;
  231 + margin-top: 40px;
  232 + padding: 0;
  233 + position: relative;
  234 + width: 80%; }
  235 + .slick-slider li {
  236 + background-color: #eeeff1;
  237 + margin-bottom: 5px;
  238 + padding: 10px; }
  239 + .slick-slider span {
  240 + display: block; }
  241 + .slick-slider .date, .slick-slider .time {
  242 + display: inline-block;
  243 + margin-top: 20px;
  244 + width: 45%; }
  245 +.slick-list {
  246 + overflow: hidden; }
  247 +.slick-slide {
  248 + float: left; }
  249 +.slick-def, .slick-prev, .slick-next {
  250 + background-color: transparent;
  251 + border: 0;
  252 + color: #000;
  253 + font-size: 0;
  254 + position: absolute;
  255 + top: 43%;
  256 + width: 20px; }
  257 + .slick-def:before, .slick-prev:before, .slick-next:before {
  258 + color: #000;
  259 + font-family: "FontAwesome";
  260 + font-size: 20px; }
  261 +.slick-prev {
  262 + left: -25px; }
  263 + .slick-prev:before {
  264 + content: ""; }
  265 +.slick-next {
  266 + right: -25px; }
  267 + .slick-next:before {
  268 + content: ""; }
  269 +.slick-disabled {
  270 + opacity: 0.25; }
176 271  
177 272 .list-unstyled li {
178 273 border-top: 1px solid;
... ... @@ -182,25 +277,42 @@ h4 {
182 277 .list-unstyled li:first-child {
183 278 border-top: 0; }
184 279  
185   -.btn {
186   - line-height: 3.1;
187   - border-radius: 0; }
188   -
189   -.go-to-proposal-button a {
  280 +.button {
190 281 background-color: #000;
191 282 border-radius: 5px;
192 283 color: #fff;
  284 + cursor: pointer;
193 285 display: block;
194   - padding-bottom: 20px;
195   - padding-top: 20px;
  286 + font-size: 14px;
  287 + font-weight: 400;
  288 + padding: 20px 0;
196 289 text-align: center;
197 290 text-transform: uppercase;
198 291 transition: all 200ms; }
199   - .go-to-proposal-button a:hover {
  292 + .button:hover {
200 293 background-color: #333333;
201 294 text-decoration: none; }
202   - .go-to-proposal-button a .fa {
  295 + .button:hover, .button:focus {
  296 + color: #fff; }
  297 + .button-send span {
  298 + padding-left: 30px;
  299 + background-image: url(images/airplane.png);
  300 + background-position: left center;
  301 + background-repeat: no-repeat; }
  302 + .button-participe .fa {
203 303 margin-right: 10px; }
204 304  
  305 +.btn {
  306 + background-color: #fff;
  307 + border-radius: 0;
  308 + border: 1px solid #ccc;
  309 + color: #000;
  310 + line-height: 3.1;
  311 + font-size: 14px;
  312 + padding: 6px 12px; }
  313 +
  314 +.hide {
  315 + display: none; }
  316 +
205 317 h3.titulo-destaque {
206 318 font-size: 38px; }
... ...
sass/_header.scss
  Diff comments   View file @877a764
... ... @@ -4,4 +4,7 @@ header {
4 4 margin: 0;
5 5 padding: 0;
6 6 position: relative;
  7 + .social {
  8 + float: right;
  9 + }
7 10 }
... ...
sass/_proposal_detail.scss
  Diff comments   View file @877a764
... ... @@ -253,7 +253,7 @@
253 253 // background: $color url(images/black-alpha.png);
254 254 // border-top: 5px solid $color;
255 255 transition: background-color .2s;
256   -
  256 +
257 257 &:hover,
258 258 &:focus {
259 259 background-color: saturate( lighten($color, 5%), 10% );
... ... @@ -350,7 +350,7 @@
350 350 display: block;
351 351  
352 352 transition: background-color .2s;
353   -
  353 +
354 354 &:hover,
355 355 &:focus {
356 356 background-color: saturate( lighten($color, 5%), 10% );
... ... @@ -361,14 +361,14 @@
361 361 }
362 362 }
363 363 .make-proposal-container{
364   -
  364 +
365 365 .subtitle,
366 366 .info,
367 367 .success-proposal-sent {
368 368 margin: 20px;
369 369 color: #18376C;
370 370 }
371   -
  371 +
372 372 .subtitle,
373 373 .success-proposal-sent {
374 374 font-size: 24px;
... ... @@ -471,7 +471,7 @@
471 471 margin-left: -30%;
472 472  
473 473 transition: background-color .2s;
474   -
  474 +
475 475 &:hover,
476 476 &:focus {
477 477 background-color: saturate( lighten($color, 5%), 10% );
... ... @@ -535,7 +535,7 @@
535 535 }
536 536 }
537 537 .talk-proposal-container{
538   - width: 50%;
  538 + width: 100%;
539 539 float: left;
540 540 height: $container-height;
541 541 min-height: $container-height;
... ... @@ -545,7 +545,7 @@
545 545 border: 1px solid $color;
546 546 height: $container-height;
547 547 min-height: $container-height;
548   - margin: 20px 0 0 10px;
  548 + margin: 20px 0 0 0;
549 549 text-align: left;
550 550  
551 551 span {
... ... @@ -713,7 +713,7 @@
713 713 }
714 714  
715 715 @media only screen and (max-width: 992px) {
716   -
  716 +
717 717 .proposal-detail {
718 718  
719 719 .container-title {
... ... @@ -722,7 +722,7 @@
722 722 }
723 723  
724 724 .make-proposal-container {
725   -
  725 +
726 726 .subtitle {
727 727 margin: 5px 20px !important;
728 728 font-size: 20px !important;
... ... @@ -873,7 +873,7 @@
873 873 bottom: inherit !important;
874 874 }
875 875 }
876   -
  876 +
877 877 .success-experience-sent a {
878 878 position: relative !important;
879 879 left: inherit !important;
... ...
sass/novo.sass
  Diff comments   View file @877a764
... ... @@ -10,11 +10,14 @@ $radius: 5px
10 10  
11 11 // tamanhos de fontes
12 12 $font-size-base: 16px
  13 +$font-size-big: $font-size-base + 2
  14 +$font-size-small: $font-size-base - 2
13 15 $font-size-h1: 28px
14 16 $font-size-h2: 38px
15 17 $font-size-h3: 28px
16 18 $font-size-h4: 34px
17 19  
  20 +
18 21 // dicionarios
19 22 $categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3)
20 23 $categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.")
... ... @@ -173,51 +176,158 @@ h4
173 176 padding-top: $gutter * 0.25
174 177 transition: all 200ms
175 178  
176   -// fazer proposta
177   -.make-proposal
  179 +// caixas dos programas
  180 +.box
178 181 height: 500px
179 182 border: 1px solid
180   - margin-bottom: $gutter
181   - margin-left: 0
182   - margin-right: $gutter * 0.5
183   - margin-top: 0
184   - &-container
185   - float: left
186   - height: 500px
187   - position: relative
188   - width: 50%
189   - .container-title
190   - font-weight: 500
  183 + margin-bottom: $gutter * 0.5
  184 + padding: $gutter
  185 + position: relative
  186 + &-title
191 187 font-size: $font-size-h2
192   - margin: $gutter
193   - .subtitle
  188 + font-weight: 400
  189 + margin-bottom: $gutter
  190 + &-subtitle
194 191 font-size: $font-size-base * 1.5
195 192 font-weight: 700
196   - margin: $gutter
197   - .info
198   - font-size: $font-size-base * 0.875
199   - margin: $gutter
200   - .send-proposal-button
201   - a
202   - background-color: #000
203   - border-radius: $radius
204   - bottom: 40px
205   - color: #fff
206   - display: block
207   - font-size: $font-size-base * 0.875
  193 + line-height: 1.2
  194 + margin-bottom: $gutter
  195 + &-footer
  196 + position: absolute
  197 + bottom: 40px
  198 + margin-left: -30%
  199 + left: 50%
  200 + width: 60%
  201 + &-bottom
  202 + @extend .box-footer
  203 + bottom: 10px
  204 + color: #000
  205 + font-size: $font-size-small
  206 + font-weight: 700
  207 + text-align: center
  208 + &:hover, &:focus
  209 + color: #000
  210 + &-center
  211 + text-align: center
  212 +
  213 +// votacao
  214 +.vote-actions
  215 + .like
  216 + background: url(images/like.png) no-repeat
  217 + display: inline-block
  218 + height: 72px
  219 + margin: 0 6%
  220 + width: 76px
  221 + .dislike
  222 + background-image: url(images/dislike.png)
  223 +
  224 +// lista de resultados
  225 +.results-content
  226 + .total
  227 + float: left
  228 + .vote-result, .updated-at
  229 + float: right
  230 + table
  231 + clear: both
  232 + font-weight: 300
  233 + tr:nth-child(odd)
  234 + background: #e5e5e5
  235 + td
  236 + padding: 0 5px
  237 + .header
208 238 font-weight: 700
209   - left: 50%
210   - margin-left: -30%
211   - padding: $gutter 0
212   - position: absolute
213 239 text-align: center
214   - text-transform: uppercase
215   - transition: all 200ms
216   - width: 60%
217   - +hover(#000, 20%)
  240 + .abstract-text
  241 + width: 80%
  242 + .value
  243 + text-align: center
  244 + width: 10%
  245 + .truncate
  246 + display: table
  247 + table-layout: fixed
  248 + width: 100%
  249 + .truncated
  250 + overflow-x: hidden
  251 + text-overflow: ellipsis
  252 + white-space: nowrap
  253 +
  254 +// paginador
  255 +.paging
  256 + padding: $gutter * 0.25
  257 + ul
  258 + display: table
  259 + list-style: none
  260 + margin: auto
  261 + padding: 0
  262 + li
  263 + float: left
  264 + span
  265 + @extend .page-link
  266 + .page-link
  267 + padding: 0 7px
  268 + font-size: $font-size-small
  269 + font-weight: 400
  270 + text-align: center
  271 + background-color: #000
  272 + color: #fff
  273 + display: inline-block
  274 + line-height: 24px
  275 + .current
  276 + background-color: lighten(#000, 20%)
  277 + .next
  278 + border-radius: 0 $radius $radius 0
  279 + .prev
  280 + border-radius: $radius 0 0 $radius
  281 +
  282 +// calendario dos ministros
  283 +.slick
  284 + &-slider
  285 + list-style: none
  286 + margin-bottom: 0
  287 + margin-left: auto
  288 + margin-right: auto
  289 + margin-top: $gutter * 2
  290 + padding: 0
  291 + position: relative
  292 + width: 80%
  293 + li
  294 + background-color: #eeeff1
  295 + margin-bottom: $gutter * 0.25
  296 + padding: $gutter * 0.5
218 297 span
219   - padding-left: $gutter
220   - background: url(images/airplane.png) left center no-repeat
  298 + display: block
  299 + .date, .time
  300 + display: inline-block
  301 + margin-top: $gutter
  302 + width: 45%
  303 + &-list
  304 + overflow: hidden
  305 + &-slide
  306 + float: left
  307 + &-def
  308 + background-color: transparent
  309 + border: 0
  310 + color: #000
  311 + font-size: 0
  312 + position: absolute
  313 + top: 43%
  314 + width: 20px
  315 + &:before
  316 + color: #000
  317 + font-family: "FontAwesome"
  318 + font-size: 20px
  319 + &-prev
  320 + @extend .slick-def
  321 + left: -25px
  322 + &:before
  323 + content: "\f053"
  324 + &-next
  325 + @extend .slick-def
  326 + right: -25px
  327 + &:before
  328 + content: "\f054"
  329 + &-disabled
  330 + opacity: 0.25
221 331  
222 332 // lista sem bullets
223 333 .list-unstyled
... ... @@ -234,30 +344,47 @@ h4
234 344 // elementos
235 345 // ------------------------------------
236 346  
237   -// botao voltar
238   -.btn
239   - line-height: 3.1
240   - border-radius: 0
241   -
242   -// botao participe
243   -.go-to-proposal-button a
  347 +// botao padrao
  348 +.button
244 349 background-color: #000
245 350 border-radius: $radius
246 351 color: #fff
  352 + cursor: pointer
247 353 display: block
248   - padding-bottom: $gutter
249   - padding-top: $gutter
  354 + font-size: $font-size-small
  355 + font-weight: 400
  356 + padding: $gutter 0
250 357 text-align: center
251 358 text-transform: uppercase
252 359 transition: all 200ms
253 360 +hover(#000, 20%)
254   - .fa
255   - margin-right: $gutter * 0.5
  361 + &:hover, &:focus
  362 + color: #fff
  363 + &-send
  364 + span
  365 + padding-left: $gutter * 1.5
  366 + background-image: url(images/airplane.png)
  367 + background-position: left center
  368 + background-repeat: no-repeat
  369 + &-participe
  370 + .fa
  371 + margin-right: $gutter * 0.5
  372 +
  373 +// botao voltar
  374 +.btn
  375 + background-color: #fff
  376 + border-radius: 0
  377 + border: 1px solid #ccc
  378 + color: #000
  379 + line-height: 3.1
  380 + font-size: $font-size-small
  381 + padding: 6px 12px
256 382  
257 383  
258 384 // ------------------------------------
259 385 // modificadores
260 386 // ------------------------------------
261   -
  387 +.hide
  388 + display: none
262 389 h3.titulo-destaque
263 390 font-size: $font-size-h3 + 10
264 391 \ No newline at end of file
... ...