From 877a764520ea1868190b52ea3fee484e102afe6b Mon Sep 17 00:00:00 2001 From: Augusto dos Anjos Almeida Date: Fri, 22 May 2015 18:48:37 -0300 Subject: [PATCH] paginas de conteudo e propostas --- index.html | 170 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------- js/main.js | 19 +++++++++++++++++++ novo.css | 202 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------- sass/_header.scss | 3 +++ sass/_proposal_detail.scss | 20 ++++++++++---------- sass/novo.sass | 225 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------- 6 files changed, 448 insertions(+), 191 deletions(-) diff --git a/index.html b/index.html index 006f8cc..6f55717 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ + + +
-
+
-
diff --git a/js/main.js b/js/main.js index afb569b..5f108f0 100644 --- a/js/main.js +++ b/js/main.js @@ -58,6 +58,8 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F } var article = data.articles[0]; + var parentTitle = $('#proposal-item-'+topic_id).find('.proposal-header .title').text(); + article.parent = {id: topic_id, title: parentTitle}; $randomProposal.html(supportProposalTemplate(article)); $body.off('click', '.vote-actions .skip'); $body.on('click', '.vote-actions .skip', function(e) { @@ -641,6 +643,23 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F e.preventDefault(); }); + $(document).on('click', '.social .fb-share', function(e) { + var link = $(this).attr('href'); + if(link==='#' || link ==='') { + link = window.location.href; + } else { + link = 'http:'+Url.addBaseUrl(link); + } + FB.ui({ + method: 'feed', + link: link, + name: $(this).data('name') || 'Dialoga Brasil', + caption: $(this).data('caption') || 'dialoga.gov.br', + description: $(this).data('description'), + }, function(response){}); + e.preventDefault(); + }); + $(document).on('click', '.new-user', function(e) { var loginForm = $(this).parents('#login-form'); loginForm.hide(); diff --git a/novo.css b/novo.css index 7caa029..bd5f322 100644 --- a/novo.css +++ b/novo.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; body { font-family: "Open Sans", sans-serif; font-size: 16px; @@ -128,51 +129,145 @@ h4 { padding-top: 5px; transition: all 200ms; } -.make-proposal { +.box { height: 500px; border: 1px solid; - margin-bottom: 20px; - margin-left: 0; - margin-right: 10px; - margin-top: 0; } - .make-proposal-container { - float: left; - height: 500px; - position: relative; - width: 50%; } - .make-proposal .container-title { - font-weight: 500; + margin-bottom: 10px; + padding: 20px; + position: relative; } + .box-title { font-size: 38px; - margin: 20px; } - .make-proposal .subtitle { + font-weight: 400; + margin-bottom: 20px; } + .box-subtitle { font-size: 24px; font-weight: 700; - margin: 20px; } - .make-proposal .info { - font-size: 14px; - margin: 20px; } - .make-proposal .send-proposal-button a { - background-color: #000; - border-radius: 5px; + line-height: 1.2; + margin-bottom: 20px; } + .box-footer, .box-bottom { + position: absolute; bottom: 40px; - color: #fff; - display: block; + margin-left: -30%; + left: 50%; + width: 60%; } + .box-bottom { + bottom: 10px; + color: #000; font-size: 14px; font-weight: 700; - left: 50%; - margin-left: -30%; - padding: 20px 0; - position: absolute; + text-align: center; } + .box-bottom:hover, .box-bottom:focus { + color: #000; } + .box-center { + text-align: center; } + +.vote-actions .like { + background: url(images/like.png) no-repeat; + display: inline-block; + height: 72px; + margin: 0 6%; + width: 76px; } +.vote-actions .dislike { + background-image: url(images/dislike.png); } + +.results-content .total { + float: left; } +.results-content .vote-result, .results-content .updated-at { + float: right; } +.results-content table { + clear: both; + font-weight: 300; } + .results-content table tr:nth-child(odd) { + background: #e5e5e5; } + .results-content table td { + padding: 0 5px; } + .results-content table .header { + font-weight: 700; + text-align: center; } + .results-content table .abstract-text { + width: 80%; } + .results-content table .value { text-align: center; - text-transform: uppercase; - transition: all 200ms; - width: 60%; } - .make-proposal .send-proposal-button a:hover { - background-color: #333333; - text-decoration: none; } - .make-proposal .send-proposal-button span { - padding-left: 20px; - background: url(images/airplane.png) left center no-repeat; } + width: 10%; } + .results-content table .truncate { + display: table; + table-layout: fixed; + width: 100%; } + .results-content table .truncated { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + +.paging { + padding: 5px; } + .paging ul { + display: table; + list-style: none; + margin: auto; + padding: 0; } + .paging li { + float: left; } + .paging .page-link, .paging span { + padding: 0 7px; + font-size: 14px; + font-weight: 400; + text-align: center; + background-color: #000; + color: #fff; + display: inline-block; + line-height: 24px; } + .paging .current { + background-color: #333333; } + .paging .next { + border-radius: 0 5px 5px 0; } + .paging .prev { + border-radius: 5px 0 0 5px; } + +.slick-slider { + list-style: none; + margin-bottom: 0; + margin-left: auto; + margin-right: auto; + margin-top: 40px; + padding: 0; + position: relative; + width: 80%; } + .slick-slider li { + background-color: #eeeff1; + margin-bottom: 5px; + padding: 10px; } + .slick-slider span { + display: block; } + .slick-slider .date, .slick-slider .time { + display: inline-block; + margin-top: 20px; + width: 45%; } +.slick-list { + overflow: hidden; } +.slick-slide { + float: left; } +.slick-def, .slick-prev, .slick-next { + background-color: transparent; + border: 0; + color: #000; + font-size: 0; + position: absolute; + top: 43%; + width: 20px; } + .slick-def:before, .slick-prev:before, .slick-next:before { + color: #000; + font-family: "FontAwesome"; + font-size: 20px; } +.slick-prev { + left: -25px; } + .slick-prev:before { + content: ""; } +.slick-next { + right: -25px; } + .slick-next:before { + content: ""; } +.slick-disabled { + opacity: 0.25; } .list-unstyled li { border-top: 1px solid; @@ -182,25 +277,42 @@ h4 { .list-unstyled li:first-child { border-top: 0; } -.btn { - line-height: 3.1; - border-radius: 0; } - -.go-to-proposal-button a { +.button { background-color: #000; border-radius: 5px; color: #fff; + cursor: pointer; display: block; - padding-bottom: 20px; - padding-top: 20px; + font-size: 14px; + font-weight: 400; + padding: 20px 0; text-align: center; text-transform: uppercase; transition: all 200ms; } - .go-to-proposal-button a:hover { + .button:hover { background-color: #333333; text-decoration: none; } - .go-to-proposal-button a .fa { + .button:hover, .button:focus { + color: #fff; } + .button-send span { + padding-left: 30px; + background-image: url(images/airplane.png); + background-position: left center; + background-repeat: no-repeat; } + .button-participe .fa { margin-right: 10px; } +.btn { + background-color: #fff; + border-radius: 0; + border: 1px solid #ccc; + color: #000; + line-height: 3.1; + font-size: 14px; + padding: 6px 12px; } + +.hide { + display: none; } + h3.titulo-destaque { font-size: 38px; } diff --git a/sass/_header.scss b/sass/_header.scss index 2fa0d1c..173d411 100644 --- a/sass/_header.scss +++ b/sass/_header.scss @@ -4,4 +4,7 @@ header { margin: 0; padding: 0; position: relative; + .social { + float: right; + } } diff --git a/sass/_proposal_detail.scss b/sass/_proposal_detail.scss index 912c8bb..08c8b26 100644 --- a/sass/_proposal_detail.scss +++ b/sass/_proposal_detail.scss @@ -253,7 +253,7 @@ // background: $color url(images/black-alpha.png); // border-top: 5px solid $color; transition: background-color .2s; - + &:hover, &:focus { background-color: saturate( lighten($color, 5%), 10% ); @@ -350,7 +350,7 @@ display: block; transition: background-color .2s; - + &:hover, &:focus { background-color: saturate( lighten($color, 5%), 10% ); @@ -361,14 +361,14 @@ } } .make-proposal-container{ - + .subtitle, .info, .success-proposal-sent { margin: 20px; color: #18376C; } - + .subtitle, .success-proposal-sent { font-size: 24px; @@ -471,7 +471,7 @@ margin-left: -30%; transition: background-color .2s; - + &:hover, &:focus { background-color: saturate( lighten($color, 5%), 10% ); @@ -535,7 +535,7 @@ } } .talk-proposal-container{ - width: 50%; + width: 100%; float: left; height: $container-height; min-height: $container-height; @@ -545,7 +545,7 @@ border: 1px solid $color; height: $container-height; min-height: $container-height; - margin: 20px 0 0 10px; + margin: 20px 0 0 0; text-align: left; span { @@ -713,7 +713,7 @@ } @media only screen and (max-width: 992px) { - + .proposal-detail { .container-title { @@ -722,7 +722,7 @@ } .make-proposal-container { - + .subtitle { margin: 5px 20px !important; font-size: 20px !important; @@ -873,7 +873,7 @@ bottom: inherit !important; } } - + .success-experience-sent a { position: relative !important; left: inherit !important; diff --git a/sass/novo.sass b/sass/novo.sass index 7e21a86..2196505 100644 --- a/sass/novo.sass +++ b/sass/novo.sass @@ -10,11 +10,14 @@ $radius: 5px // tamanhos de fontes $font-size-base: 16px +$font-size-big: $font-size-base + 2 +$font-size-small: $font-size-base - 2 $font-size-h1: 28px $font-size-h2: 38px $font-size-h3: 28px $font-size-h4: 34px + // dicionarios $categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3) $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 padding-top: $gutter * 0.25 transition: all 200ms -// fazer proposta -.make-proposal +// caixas dos programas +.box height: 500px border: 1px solid - margin-bottom: $gutter - margin-left: 0 - margin-right: $gutter * 0.5 - margin-top: 0 - &-container - float: left - height: 500px - position: relative - width: 50% - .container-title - font-weight: 500 + margin-bottom: $gutter * 0.5 + padding: $gutter + position: relative + &-title font-size: $font-size-h2 - margin: $gutter - .subtitle + font-weight: 400 + margin-bottom: $gutter + &-subtitle font-size: $font-size-base * 1.5 font-weight: 700 - margin: $gutter - .info - font-size: $font-size-base * 0.875 - margin: $gutter - .send-proposal-button - a - background-color: #000 - border-radius: $radius - bottom: 40px - color: #fff - display: block - font-size: $font-size-base * 0.875 + line-height: 1.2 + margin-bottom: $gutter + &-footer + position: absolute + bottom: 40px + margin-left: -30% + left: 50% + width: 60% + &-bottom + @extend .box-footer + bottom: 10px + color: #000 + font-size: $font-size-small + font-weight: 700 + text-align: center + &:hover, &:focus + color: #000 + &-center + text-align: center + +// votacao +.vote-actions + .like + background: url(images/like.png) no-repeat + display: inline-block + height: 72px + margin: 0 6% + width: 76px + .dislike + background-image: url(images/dislike.png) + +// lista de resultados +.results-content + .total + float: left + .vote-result, .updated-at + float: right + table + clear: both + font-weight: 300 + tr:nth-child(odd) + background: #e5e5e5 + td + padding: 0 5px + .header font-weight: 700 - left: 50% - margin-left: -30% - padding: $gutter 0 - position: absolute text-align: center - text-transform: uppercase - transition: all 200ms - width: 60% - +hover(#000, 20%) + .abstract-text + width: 80% + .value + text-align: center + width: 10% + .truncate + display: table + table-layout: fixed + width: 100% + .truncated + overflow-x: hidden + text-overflow: ellipsis + white-space: nowrap + +// paginador +.paging + padding: $gutter * 0.25 + ul + display: table + list-style: none + margin: auto + padding: 0 + li + float: left + span + @extend .page-link + .page-link + padding: 0 7px + font-size: $font-size-small + font-weight: 400 + text-align: center + background-color: #000 + color: #fff + display: inline-block + line-height: 24px + .current + background-color: lighten(#000, 20%) + .next + border-radius: 0 $radius $radius 0 + .prev + border-radius: $radius 0 0 $radius + +// calendario dos ministros +.slick + &-slider + list-style: none + margin-bottom: 0 + margin-left: auto + margin-right: auto + margin-top: $gutter * 2 + padding: 0 + position: relative + width: 80% + li + background-color: #eeeff1 + margin-bottom: $gutter * 0.25 + padding: $gutter * 0.5 span - padding-left: $gutter - background: url(images/airplane.png) left center no-repeat + display: block + .date, .time + display: inline-block + margin-top: $gutter + width: 45% + &-list + overflow: hidden + &-slide + float: left + &-def + background-color: transparent + border: 0 + color: #000 + font-size: 0 + position: absolute + top: 43% + width: 20px + &:before + color: #000 + font-family: "FontAwesome" + font-size: 20px + &-prev + @extend .slick-def + left: -25px + &:before + content: "\f053" + &-next + @extend .slick-def + right: -25px + &:before + content: "\f054" + &-disabled + opacity: 0.25 // lista sem bullets .list-unstyled @@ -234,30 +344,47 @@ h4 // elementos // ------------------------------------ -// botao voltar -.btn - line-height: 3.1 - border-radius: 0 - -// botao participe -.go-to-proposal-button a +// botao padrao +.button background-color: #000 border-radius: $radius color: #fff + cursor: pointer display: block - padding-bottom: $gutter - padding-top: $gutter + font-size: $font-size-small + font-weight: 400 + padding: $gutter 0 text-align: center text-transform: uppercase transition: all 200ms +hover(#000, 20%) - .fa - margin-right: $gutter * 0.5 + &:hover, &:focus + color: #fff + &-send + span + padding-left: $gutter * 1.5 + background-image: url(images/airplane.png) + background-position: left center + background-repeat: no-repeat + &-participe + .fa + margin-right: $gutter * 0.5 + +// botao voltar +.btn + background-color: #fff + border-radius: 0 + border: 1px solid #ccc + color: #000 + line-height: 3.1 + font-size: $font-size-small + padding: 6px 12px // ------------------------------------ // modificadores // ------------------------------------ - +.hide + display: none h3.titulo-destaque font-size: $font-size-h3 + 10 \ No newline at end of file -- libgit2 0.21.2