Commit bd792fdbaec365ce122868ced819f5a814be859a
1 parent
c37d5578
Exists in
refactory-sass
Add novo sass.
Showing
12 changed files
with
736 additions
and
5 deletions
Show diff stats
.gitignore
| @@ -13,8 +13,4 @@ bower_components/ | @@ -13,8 +13,4 @@ bower_components/ | ||
| 13 | bower.json | 13 | bower.json |
| 14 | sass/bootstrap.scss | 14 | sass/bootstrap.scss |
| 15 | css/bootstrap.css | 15 | css/bootstrap.css |
| 16 | -html/ | ||
| 17 | -novo.css | ||
| 18 | -novo.html | ||
| 19 | -sass/novo.scss | ||
| 20 | -sass/novo | ||
| 21 | \ No newline at end of file | 16 | \ No newline at end of file |
| 17 | +html/ | ||
| 22 | \ No newline at end of file | 18 | \ No newline at end of file |
| @@ -0,0 +1,232 @@ | @@ -0,0 +1,232 @@ | ||
| 1 | +@charset "UTF-8"; | ||
| 2 | +.hide { | ||
| 3 | + display: none; } | ||
| 4 | + | ||
| 5 | +#proposal-result { | ||
| 6 | + margin: 0 auto 40px; | ||
| 7 | + width: 90%; } | ||
| 8 | + | ||
| 9 | +body { | ||
| 10 | + color: #172938; | ||
| 11 | + font-family: 'Open Sans', sans-serif; | ||
| 12 | + font-weight: 400; } | ||
| 13 | + | ||
| 14 | +h1 { | ||
| 15 | + border-bottom: 1px solid #d6dcd7; | ||
| 16 | + font-size: 28px; | ||
| 17 | + padding-bottom: 20px; | ||
| 18 | + text-transform: uppercase; } | ||
| 19 | + h1 a { | ||
| 20 | + color: #03316f; } | ||
| 21 | + | ||
| 22 | +a { | ||
| 23 | + color: #335277; | ||
| 24 | + text-decoration: none; } | ||
| 25 | + | ||
| 26 | +nav ul { | ||
| 27 | + font-size: 0; | ||
| 28 | + list-style: none; | ||
| 29 | + margin-bottom: 0; | ||
| 30 | + padding: 0; } | ||
| 31 | + nav ul li { | ||
| 32 | + display: inline-block; | ||
| 33 | + font-size: 16px; | ||
| 34 | + text-align: center; | ||
| 35 | + width: 50%; } | ||
| 36 | + nav ul li a { | ||
| 37 | + background-color: #03316f; | ||
| 38 | + border-left: 1px solid #03316f; | ||
| 39 | + border-right: 1px solid #03316f; | ||
| 40 | + border-top: 1px solid #03316f; | ||
| 41 | + color: #fff; | ||
| 42 | + font-weight: 700; | ||
| 43 | + display: block; | ||
| 44 | + padding: 20px; | ||
| 45 | + text-transform: uppercase; } | ||
| 46 | + nav ul li a.active { | ||
| 47 | + background-color: transparent; | ||
| 48 | + color: #03316f; } | ||
| 49 | + | ||
| 50 | +.proposal-category-items-saude .description:before { | ||
| 51 | + color: #fff; | ||
| 52 | + content: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) atende a todos os brasileiros. Ele é universal, integral e de responsabilidade do Governo Federal, dos estados e dos municípios."; | ||
| 53 | + font-size: 14px; } | ||
| 54 | + | ||
| 55 | +.proposal-category-items-seguranca .description:before { | ||
| 56 | + color: #fff; | ||
| 57 | + content: "A segurança pública é um direito fundamental, dever do Estado e responsabilidade de todos. Tem na proteção da vida, na disseminação da cultura de paz e na integração dos órgãos e instituições seus maiores compromissos."; | ||
| 58 | + font-size: 14px; } | ||
| 59 | + | ||
| 60 | +.proposal-category-items-educacao .description:before { | ||
| 61 | + color: #fff; | ||
| 62 | + content: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis. Agora, o Plano Nacional de Educação (PNE) definiu metas quantitativas e qualitativas para os próximos 10 anos."; | ||
| 63 | + font-size: 14px; } | ||
| 64 | + | ||
| 65 | +.proposal-category-items-reducao-da-pobreza .description:before { | ||
| 66 | + color: #fff; | ||
| 67 | + content: "Este governo escolheu como prioridade combater a pobreza e reduzir as desigualdades sociais. Por isso, o Brasil saiu do Mapa da Fome das Nações Unidas"; | ||
| 68 | + font-size: 14px; } | ||
| 69 | + | ||
| 70 | +#proposal-categories { | ||
| 71 | + border-bottom: 1px solid #03316f; | ||
| 72 | + border-left: 1px solid #03316f; | ||
| 73 | + border-right: 1px solid #03316f; | ||
| 74 | + list-style: none; | ||
| 75 | + padding: 0; } | ||
| 76 | + #proposal-categories-container { | ||
| 77 | + font-size: 0; | ||
| 78 | + padding-left: 20px; | ||
| 79 | + padding-top: 20px; | ||
| 80 | + text-align: center; } | ||
| 81 | + | ||
| 82 | +.proposal-category { | ||
| 83 | + display: inline-block; | ||
| 84 | + margin-bottom: 20px; | ||
| 85 | + margin-right: 20px; | ||
| 86 | + position: relative; | ||
| 87 | + text-align: center; } | ||
| 88 | + .proposal-category .proposal-link { | ||
| 89 | + background-color: #000; | ||
| 90 | + border-radius: 7px; | ||
| 91 | + color: #fff; | ||
| 92 | + display: inline-block; | ||
| 93 | + font-size: 14px; | ||
| 94 | + font-weight: 700; | ||
| 95 | + padding-top: 100px; | ||
| 96 | + width: 150px; } | ||
| 97 | + .proposal-category-items { | ||
| 98 | + border-radius: 7px; | ||
| 99 | + font-size: 16px; | ||
| 100 | + margin-bottom: 20px; | ||
| 101 | + margin-right: 20px; | ||
| 102 | + padding: 20px 20px 0; | ||
| 103 | + text-align: left; } | ||
| 104 | +.proposal-list { | ||
| 105 | + list-style: none; | ||
| 106 | + margin-top: 20px; | ||
| 107 | + padding: 0; } | ||
| 108 | +.proposal-item { | ||
| 109 | + display: inline-block; | ||
| 110 | + margin-bottom: 20px; | ||
| 111 | + vertical-align: top; | ||
| 112 | + width: 50%; } | ||
| 113 | + .proposal-item:nth-child(odd) .item { | ||
| 114 | + margin-right: 20px; } | ||
| 115 | +.proposal-link { | ||
| 116 | + font-family: 'Asap', sans-serif; | ||
| 117 | + font-size: 24px; | ||
| 118 | + font-weight: 700; } | ||
| 119 | + | ||
| 120 | +.arrow-box { | ||
| 121 | + border-bottom: 10px solid #000; | ||
| 122 | + border-left: 7px solid transparent; | ||
| 123 | + border-right: 7px solid transparent; | ||
| 124 | + bottom: -12px; | ||
| 125 | + height: 0; | ||
| 126 | + left: 50%; | ||
| 127 | + margin-left: -7px; | ||
| 128 | + position: absolute; | ||
| 129 | + width: 0; } | ||
| 130 | + | ||
| 131 | +.name { | ||
| 132 | + border-bottom: 2px solid #fff; | ||
| 133 | + color: #fff; | ||
| 134 | + font-size: 18px; | ||
| 135 | + font-weight: 700; | ||
| 136 | + margin-bottom: 10px; | ||
| 137 | + padding: 10px 0; } | ||
| 138 | + | ||
| 139 | +.item { | ||
| 140 | + background-color: #fff; | ||
| 141 | + border: 1px solid #03316f; | ||
| 142 | + border-radius: 7px; | ||
| 143 | + font-size: 14px; | ||
| 144 | + padding: 20px; } | ||
| 145 | + .item p { | ||
| 146 | + min-height: 60px; } | ||
| 147 | + | ||
| 148 | +.category { | ||
| 149 | + border-top: 1px dotted #172938; | ||
| 150 | + list-style: none; | ||
| 151 | + padding-left: 0; | ||
| 152 | + padding-top: 10px; } | ||
| 153 | + .category li { | ||
| 154 | + background-color: #000; | ||
| 155 | + color: #fff; | ||
| 156 | + display: inline-block; | ||
| 157 | + font-family: 'Asap', sans-serif; | ||
| 158 | + font-size: 16px; | ||
| 159 | + font-weight: 700; | ||
| 160 | + padding: 5px 12px 5px 32px; } | ||
| 161 | + | ||
| 162 | +#proposal-category-saude .proposal-link { | ||
| 163 | + background-color: #00a9bd; | ||
| 164 | + background-image: url(./images/icons/saude.png?3); | ||
| 165 | + background-position: 50% 5px; | ||
| 166 | + background-repeat: no-repeat; } | ||
| 167 | +#proposal-category-saude .arrow-box { | ||
| 168 | + border-bottom-color: #00a9bd; } | ||
| 169 | + | ||
| 170 | +.proposal-category-items-saude { | ||
| 171 | + background-color: #00a9bd; } | ||
| 172 | + | ||
| 173 | +li.category-saude { | ||
| 174 | + background-color: #00a9bd; | ||
| 175 | + background-image: url(./images/icons/saude.png?1); | ||
| 176 | + background-position: 3px center; | ||
| 177 | + background-repeat: no-repeat; | ||
| 178 | + background-size: 22px; } | ||
| 179 | + | ||
| 180 | +#proposal-category-seguranca .proposal-link { | ||
| 181 | + background-color: #e34748; | ||
| 182 | + background-image: url(./images/icons/seguranca.png?3); | ||
| 183 | + background-position: 50% 5px; | ||
| 184 | + background-repeat: no-repeat; } | ||
| 185 | +#proposal-category-seguranca .arrow-box { | ||
| 186 | + border-bottom-color: #e34748; } | ||
| 187 | + | ||
| 188 | +.proposal-category-items-seguranca { | ||
| 189 | + background-color: #e34748; } | ||
| 190 | + | ||
| 191 | +li.category-seguranca { | ||
| 192 | + background-color: #e34748; | ||
| 193 | + background-image: url(./images/icons/seguranca.png?1); | ||
| 194 | + background-position: 3px center; | ||
| 195 | + background-repeat: no-repeat; | ||
| 196 | + background-size: 22px; } | ||
| 197 | + | ||
| 198 | +#proposal-category-educacao .proposal-link { | ||
| 199 | + background-color: #ffb400; | ||
| 200 | + background-image: url(./images/icons/educacao.png?3); | ||
| 201 | + background-position: 50% 5px; | ||
| 202 | + background-repeat: no-repeat; } | ||
| 203 | +#proposal-category-educacao .arrow-box { | ||
| 204 | + border-bottom-color: #ffb400; } | ||
| 205 | + | ||
| 206 | +.proposal-category-items-educacao { | ||
| 207 | + background-color: #ffb400; } | ||
| 208 | + | ||
| 209 | +li.category-educacao { | ||
| 210 | + background-color: #ffb400; | ||
| 211 | + background-image: url(./images/icons/educacao.png?1); | ||
| 212 | + background-position: 3px center; | ||
| 213 | + background-repeat: no-repeat; | ||
| 214 | + background-size: 22px; } | ||
| 215 | + | ||
| 216 | +#proposal-category-reducao-da-pobreza .proposal-link { | ||
| 217 | + background-color: #51d0b3; | ||
| 218 | + background-image: url(./images/icons/reducao-da-pobreza.png?3); | ||
| 219 | + background-position: 50% 5px; | ||
| 220 | + background-repeat: no-repeat; } | ||
| 221 | +#proposal-category-reducao-da-pobreza .arrow-box { | ||
| 222 | + border-bottom-color: #51d0b3; } | ||
| 223 | + | ||
| 224 | +.proposal-category-items-reducao-da-pobreza { | ||
| 225 | + background-color: #51d0b3; } | ||
| 226 | + | ||
| 227 | +li.category-reducao-da-pobreza { | ||
| 228 | + background-color: #51d0b3; | ||
| 229 | + background-image: url(./images/icons/reducao-da-pobreza.png?1); | ||
| 230 | + background-position: 3px center; | ||
| 231 | + background-repeat: no-repeat; | ||
| 232 | + background-size: 22px; } |
| @@ -0,0 +1,262 @@ | @@ -0,0 +1,262 @@ | ||
| 1 | +<html lang="pt-br"> | ||
| 2 | + <head> | ||
| 3 | + <meta charset="utf-8" /> | ||
| 4 | + <title>Dialoga Brasil</title> | ||
| 5 | + | ||
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| 7 | + <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| 8 | + | ||
| 9 | + <link rel="stylesheet" href="css/bootstrap.min.css" /> | ||
| 10 | + <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | ||
| 11 | + <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> | ||
| 12 | + <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'> | ||
| 13 | + <link rel="stylesheet" href="novo.css" /> | ||
| 14 | + | ||
| 15 | + </head> | ||
| 16 | + <body> | ||
| 17 | + | ||
| 18 | + <div id='proposal-result'></div> | ||
| 19 | + | ||
| 20 | + <script id='proposal-template' type='text/x-handlebars-template'> | ||
| 21 | + <header> | ||
| 22 | + <h1><a href="/">{{article.title}}</a></h1> | ||
| 23 | + <a id='display-contrast' href='#'>Alto Contraste</a> | ||
| 24 | + </header> | ||
| 25 | + | ||
| 26 | + <div id="content"> | ||
| 27 | + <p>{{{article.body}}}</p> | ||
| 28 | + </div> | ||
| 29 | + | ||
| 30 | + <nav> | ||
| 31 | + <ul> | ||
| 32 | + <li id='nav-proposal-categories'> | ||
| 33 | + <a href="#/temas" class="active">Temas</a> | ||
| 34 | + </li> | ||
| 35 | + <li id='nav-proposal-group'> | ||
| 36 | + <a href="#/programas">Programas</a> | ||
| 37 | + </li> | ||
| 38 | + </ul> | ||
| 39 | + </nav> | ||
| 40 | + | ||
| 41 | + <ul id="proposal-categories"> | ||
| 42 | + <div id="proposal-categories-container"> | ||
| 43 | + {{#each article.categories}} | ||
| 44 | + <li id='proposal-category-{{slug}}' class="proposal-category" data-category="{{slug}}"> | ||
| 45 | + <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a> | ||
| 46 | + <div class="arrow-box" style="display: none"></div> | ||
| 47 | + </li> | ||
| 48 | + {{/each}} | ||
| 49 | + {{#each article.categories}} | ||
| 50 | + <div id='proposal-item-{{id}}' class="proposal-category-items proposal-category-items-{{slug}} hide" data-category="{{slug}}"> | ||
| 51 | + <div class="header"> | ||
| 52 | + <div class="name">{{name}}</div> | ||
| 53 | + <div class="description"></div> | ||
| 54 | + </div> | ||
| 55 | + <ul class="proposal-list"> | ||
| 56 | + {{#list_proposal ../article.children category=slug}} | ||
| 57 | + {{#link title id}}{{/link}} | ||
| 58 | + {{/list_proposal}} | ||
| 59 | + </ul> | ||
| 60 | + </div> | ||
| 61 | + {{/each}} | ||
| 62 | + </div> | ||
| 63 | + </ul> | ||
| 64 | + | ||
| 65 | + <div id="proposal-group" class='hide'> | ||
| 66 | + <label for="search-input">Selecione um programa para fazer propostas e contar sua experiência.</label> | ||
| 67 | + <div id="search-input-container"> | ||
| 68 | + <input placeholder="palavra chave" id="search-input" type="text" name="search" /> | ||
| 69 | + </div> | ||
| 70 | + <ul> | ||
| 71 | + | ||
| 72 | + {{#list_proposal article.children}} | ||
| 73 | + {{#link title id}}{{/link}} | ||
| 74 | + {{/list_proposal}} | ||
| 75 | + </ul> | ||
| 76 | + </div> | ||
| 77 | + | ||
| 78 | + {{#each article.children}} | ||
| 79 | + <div class='proposal-detail hide' id="proposal-item-{{id}}"> | ||
| 80 | + <div class='categories {{#each categories}}{{slug}} {{/each}}'> | ||
| 81 | + <ul class="select"> | ||
| 82 | + {{#each categories}} | ||
| 83 | + <li class='category proposal-category' data-category="{{slug}}"> | ||
| 84 | + <a href="#/temas/{{slug}}/{{id}}" class="proposal-link" data-target="proposal-item-{{id}}">{{name}}</a> | ||
| 85 | + <button class="go-back btn btn-default pull-right"> | ||
| 86 | + VOLTAR | ||
| 87 | + <span class="fa fa-reply"></span> | ||
| 88 | + </button> | ||
| 89 | + {{#select_proposal ../../article.children slug ../id}}{{/select_proposal}} | ||
| 90 | + </li> | ||
| 91 | + {{/each}} | ||
| 92 | + </ul> | ||
| 93 | + | ||
| 94 | + <div class='proposal-header'> | ||
| 95 | + <div class='abstract'> | ||
| 96 | + <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/> | ||
| 97 | + </div> | ||
| 98 | + <div class='title'>{{title}}</div> | ||
| 99 | + <div class='abstract'>{{{abstract}}}</div> | ||
| 100 | + <div class='show_body'> | ||
| 101 | + <a href='#/programas/{{id}}/sobre-o-programa'><span>Conheça o Programa</span></a> | ||
| 102 | + </div> | ||
| 103 | + </div> | ||
| 104 | + | ||
| 105 | + <div class='body proposal-detail-base hide'> | ||
| 106 | + {{{body}}} | ||
| 107 | + <div class='go-to-proposal-button'> | ||
| 108 | + <a href="#/programas/{{id}}" data-target='proposal-item-{{id}}'> | ||
| 109 | + <span class='fa fa-reply'></span> | ||
| 110 | + Agora contribua para a melhoria desse programa | ||
| 111 | + </a> | ||
| 112 | + </div> | ||
| 113 | + | ||
| 114 | + </div> | ||
| 115 | + <div class='make-proposal-container'> | ||
| 116 | + <div class='make-proposal'> | ||
| 117 | + <div class='container-title'>Faça Uma Proposta</div> | ||
| 118 | + <div class='subtitle'>Qual a sua sugestão para melhorar este programa?</div> | ||
| 119 | + <div class='info'>Ela se tornará pública em até 24 horas após o envio e poderá ser apoiada por outros participantes.</div> | ||
| 120 | + <div class='send-proposal-button send-button'><a href='#'><span>Envie Sua Proposta</span></a></div> | ||
| 121 | + <div class="login-container hide">Login</div> | ||
| 122 | + <form class='make-proposal-form save-article-form hide' id='make-proposal-form-{{id}}'> | ||
| 123 | + <div class="message"></div> | ||
| 124 | + <div> | ||
| 125 | + <div><label for="article_abstract">Descrição</label></div> | ||
| 126 | + <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="200"></textarea> | ||
| 127 | + </div> | ||
| 128 | + <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Proposal' type='hidden'> | ||
| 129 | + <input type='submit' id='make-proposal-button' class='make-proposal-button' name='make-proposal-button' value='Enviar'> | ||
| 130 | + </form> | ||
| 131 | + <div class='success-proposal-sent success-sent hide send-button'> | ||
| 132 | + <p>Sua proposta foi encaminhada com sucesso!</p> | ||
| 133 | + <a href='#'>Encaminhar Nova Proposta</a> | ||
| 134 | + </div> | ||
| 135 | + <br style="clear: both;" /> | ||
| 136 | + </div> | ||
| 137 | + </div> | ||
| 138 | + <div class='support-proposal-container'> | ||
| 139 | + <div class='support-proposal'> | ||
| 140 | + <div class='container-title'> Apoie outras propostas</div> | ||
| 141 | + <div class='subtitle'> Propostas da sociedade</div> | ||
| 142 | + <div class="random-proposal"></div> | ||
| 143 | + <div class="loading">Carregando...</div> | ||
| 144 | + <div class="no-proposals">Ainda não existe nenhuma proposta para este programa.</div> | ||
| 145 | + </div> | ||
| 146 | + </div> | ||
| 147 | + <div class='results-container hide'></div> | ||
| 148 | + <div class='experience-proposal-container'> | ||
| 149 | + <div class='experience-proposal'> | ||
| 150 | + <div class='container-title'>Conte sua experiência</div> | ||
| 151 | + <p>Adoraríamos que você nos contasse a sua experiência com este programa ou a de alguém que você conhece.</p> | ||
| 152 | + <p>Esta história pode nos ajudar a melhorar a nossa ação e não será divulgada.</p> | ||
| 153 | + <div class='send-experience-button send-button'><a href='#'><span>Envie Sua Experiência</span></a></div> | ||
| 154 | + <div class="login-container hide">Login</div> | ||
| 155 | + <form class='make-experience-form save-article-form hide' id='make-experience-form-{{id}}'> | ||
| 156 | + <div class="message"></div> | ||
| 157 | + <div> | ||
| 158 | + <div><label for="article_abstract">Descrição</label></div> | ||
| 159 | + <textarea id="article_abstract" class="countdown" name="article[abstract]" placeholder="Descrição" maxlength="5000"></textarea> | ||
| 160 | + </div> | ||
| 161 | + <input id='content_type' name='content_type' value='ProposalsDiscussionPlugin::Story' type='hidden'> | ||
| 162 | + <input type='submit' id='make-experience-button' class='make-experience-button' name='make-experience-button' value='Enviar'> | ||
| 163 | + </form> | ||
| 164 | + <div class='success-experience-sent success-sent hide send-button'> | ||
| 165 | + <p>Sua experiência foi encaminhada com sucesso!</p> | ||
| 166 | + <a href='#'>Encaminhar Nova Experiência</a> | ||
| 167 | + </div> | ||
| 168 | + </div> | ||
| 169 | + </div> | ||
| 170 | + <div class='talk-proposal-container'> | ||
| 171 | + <div class='talk-proposal'> | ||
| 172 | + <div class='container-title'>Fale com os ministros</div> | ||
| 173 | + <p>Confira as datas e horários disponíveis:</p> | ||
| 174 | + <ul class='calendar'> | ||
| 175 | + <li> | ||
| 176 | + <span>Arthur Chioro</span> | ||
| 177 | + <span>Saúde</span> | ||
| 178 | + <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div> | ||
| 179 | + </li> | ||
| 180 | + <li> | ||
| 181 | + <span>Teresa Campello</span> | ||
| 182 | + <span>Desenvolvimento Social</span> | ||
| 183 | + <div class='date'><i class="fa fa-calendar"></i> 22/04/2015</div><div class='time'><i class="fa fa-clock-o"></i> 09:00</div> | ||
| 184 | + </li> | ||
| 185 | + </ul> | ||
| 186 | + </div> | ||
| 187 | + </div> | ||
| 188 | + </div> | ||
| 189 | + </div> | ||
| 190 | + {{/each}} | ||
| 191 | + </script> | ||
| 192 | + | ||
| 193 | + <script id='support-proposal-template' type='text/x-handlebars-template'> | ||
| 194 | + <div class='abstract'><p>"{{trimString abstract 200}}"</p></div> | ||
| 195 | + <div class="vote-actions"> | ||
| 196 | + <a href="#" class="like dislike" data-vote-value="-1"></a> | ||
| 197 | + <a href="#" class="like" data-vote-value="1"></a> | ||
| 198 | + <a href="#" class="skip">Pular</a> | ||
| 199 | + <a href="#" class="vote-result">Resultados</a> | ||
| 200 | + </div> | ||
| 201 | + </script> | ||
| 202 | + | ||
| 203 | + <script id="results" type='text/x-handlebars-template'> | ||
| 204 | + <div class="loading">Carregando...</div> | ||
| 205 | + <div class="results-content hide"> | ||
| 206 | + <a href="#" class="vote-result">Fechar</a> | ||
| 207 | + <table> | ||
| 208 | + <tr class="header"> | ||
| 209 | + <td class="abstract-text">Texto da Alternativa</td> | ||
| 210 | + <td class="votes-for"></td> | ||
| 211 | + <td class="votes-against"></td> | ||
| 212 | + <td class="score">Pontuação</td> | ||
| 213 | + </tr> | ||
| 214 | + {{#each articles}} | ||
| 215 | + <tr> | ||
| 216 | + <td class="abstract-text"><div class="truncate"><p class="truncated">{{abstract}}</p></div></td> | ||
| 217 | + <td class="votes-for">{{votes_for}}</td> | ||
| 218 | + <td class="votes-against">{{votes_against}}</td> | ||
| 219 | + <td class="score">{{#score .}}{{/score}}</td> | ||
| 220 | + </tr> | ||
| 221 | + {{/each}} | ||
| 222 | + </table> | ||
| 223 | + </div> | ||
| 224 | + </script> | ||
| 225 | + | ||
| 226 | + <script id='login' type='text/x-handlebars-template'> | ||
| 227 | + <form id="login-form" class="login"> | ||
| 228 | + <div class="message"></div> | ||
| 229 | + <div class="username"> | ||
| 230 | + <label for="user_name" class="label">Nome de Usuário / E-mail:</label> | ||
| 231 | + <input id="user_name" name="login" type="text" placeholder="Nome do usuário / E-mail"> | ||
| 232 | + </div> | ||
| 233 | + <div class="password"> | ||
| 234 | + <label for="user_password" class="label">Senha:</label> | ||
| 235 | + <input id="user_password" name="password" type="password" placeholder="Senha"> | ||
| 236 | + </div> | ||
| 237 | + <div class="actions"> | ||
| 238 | + <input type="submit" class="login-action" value="Acessar"/> | ||
| 239 | + <a href="http://www.participa.br/account/forgot_password" target="_blank" class="forgot-password">Esqueci minha senha</a> | ||
| 240 | + </div> | ||
| 241 | + <div class="oauth"> | ||
| 242 | + <div class="label">Acessar com:</div> | ||
| 243 | + <a href="/plugin/oauth_client/facebook?oauth_client_popup=true&id=1" target="_blank" class="facebook">Facebook</a> | ||
| 244 | + <a href="/plugin/oauth_client/google_oauth2?oauth_client_popup=true&id=2" target="_blank" class="google">Google +</a> | ||
| 245 | + <a href="http://www.participa.br/account/signup" target="_blank" class="new-user">Cadastrar</a> | ||
| 246 | + </div> | ||
| 247 | + </form> | ||
| 248 | + </script> | ||
| 249 | + | ||
| 250 | + <script src='js/jquery-2.1.3.min.js'></script> | ||
| 251 | + <script src='js/jquery-ui-1.11.4.custom/jquery-ui.min.js'></script> | ||
| 252 | + <script src='js/jquery.cookie.js'></script> | ||
| 253 | + <script src='js/handlebars-v3.0.1.js'></script> | ||
| 254 | + <script src='js/handlebars-helpers.js'></script> | ||
| 255 | + <script src='js/jquery.dotdotdot.min.js'></script> | ||
| 256 | + <script src='js/jquery.maxlength.min.js'></script> | ||
| 257 | + <script src='js/layout.js'></script> | ||
| 258 | + | ||
| 259 | + <script src='js/main.js'></script> | ||
| 260 | + </body> | ||
| 261 | + | ||
| 262 | +</html> |
| @@ -0,0 +1,10 @@ | @@ -0,0 +1,10 @@ | ||
| 1 | +@import "utilities/variables"; | ||
| 2 | + | ||
| 3 | +@import "novo/variables"; | ||
| 4 | +@import "novo/utilities"; | ||
| 5 | +@import "novo/scaffolding"; | ||
| 6 | +@import "novo/nav"; | ||
| 7 | +@import "novo/proposal_categories"; | ||
| 8 | +@import "novo/proposal_group"; | ||
| 9 | +@import "novo/proposal_detail"; | ||
| 10 | +@import "novo/colors"; | ||
| 0 | \ No newline at end of file | 11 | \ No newline at end of file |
| @@ -0,0 +1,39 @@ | @@ -0,0 +1,39 @@ | ||
| 1 | +@import "../utilities/variables"; | ||
| 2 | + | ||
| 3 | +@each $category, $color in $categories { | ||
| 4 | + #proposal { | ||
| 5 | + &-category { | ||
| 6 | + &-#{$category} { | ||
| 7 | + .proposal { | ||
| 8 | + &-link { | ||
| 9 | + background-color: $color; | ||
| 10 | + background-image: url(./images/icons/#{$category}.png?3); | ||
| 11 | + background-position: 50% 5px; | ||
| 12 | + background-repeat: no-repeat; | ||
| 13 | + } | ||
| 14 | + } | ||
| 15 | + .arrow-box { | ||
| 16 | + border-bottom-color: $color; | ||
| 17 | + } | ||
| 18 | + } | ||
| 19 | + } | ||
| 20 | + } | ||
| 21 | + .proposal { | ||
| 22 | + &-category { | ||
| 23 | + &-items { | ||
| 24 | + &-#{$category} { | ||
| 25 | + background-color: $color; | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | + li.category { | ||
| 31 | + &-#{$category} { | ||
| 32 | + background-color: $color; | ||
| 33 | + background-image: url(./images/icons/#{$category}.png?1); | ||
| 34 | + background-position: 3px center; | ||
| 35 | + background-repeat: no-repeat; | ||
| 36 | + background-size: 22px; | ||
| 37 | + } | ||
| 38 | + } | ||
| 39 | +} | ||
| 0 | \ No newline at end of file | 40 | \ No newline at end of file |
| @@ -0,0 +1,27 @@ | @@ -0,0 +1,27 @@ | ||
| 1 | +nav ul { | ||
| 2 | + font-size: 0; | ||
| 3 | + list-style: none; | ||
| 4 | + margin-bottom: 0; | ||
| 5 | + padding: 0; | ||
| 6 | + li { | ||
| 7 | + display: inline-block; | ||
| 8 | + font-size: $default-font-size; | ||
| 9 | + text-align: center; | ||
| 10 | + width: 50%; | ||
| 11 | + a { | ||
| 12 | + background-color: $header-color; | ||
| 13 | + border-left: 1px solid $header-color; | ||
| 14 | + border-right: 1px solid $header-color; | ||
| 15 | + border-top: 1px solid $header-color; | ||
| 16 | + color: #fff; | ||
| 17 | + font-weight: 700; | ||
| 18 | + display: block; | ||
| 19 | + padding: $default-spacing-size; | ||
| 20 | + text-transform: uppercase; | ||
| 21 | + &.active { | ||
| 22 | + background-color: transparent; | ||
| 23 | + color: $header-color; | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | +} | ||
| 0 | \ No newline at end of file | 28 | \ No newline at end of file |
| @@ -0,0 +1,119 @@ | @@ -0,0 +1,119 @@ | ||
| 1 | +@import "utilities/variables"; | ||
| 2 | + | ||
| 3 | +@each $category, $description in $categories-descriptions { | ||
| 4 | + .proposal-category-items-#{$category} .description:before { | ||
| 5 | + color: #fff; | ||
| 6 | + content: "#{$description}"; | ||
| 7 | + font-size: $small-font-size; | ||
| 8 | + } | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +#proposal { | ||
| 12 | + &-categories { | ||
| 13 | + border-bottom: 1px solid $header-color; | ||
| 14 | + border-left: 1px solid $header-color; | ||
| 15 | + border-right: 1px solid $header-color; | ||
| 16 | + list-style: none; | ||
| 17 | + padding: 0; | ||
| 18 | + &-container { | ||
| 19 | + font-size: 0; | ||
| 20 | + padding-left: $default-spacing-size; | ||
| 21 | + padding-top: $default-spacing-size; | ||
| 22 | + text-align: center; | ||
| 23 | + } | ||
| 24 | + } | ||
| 25 | +} | ||
| 26 | +.proposal { | ||
| 27 | + &-category { | ||
| 28 | + display: inline-block; | ||
| 29 | + margin-bottom: $default-spacing-size; | ||
| 30 | + margin-right: $default-spacing-size; | ||
| 31 | + position: relative; | ||
| 32 | + text-align: center; | ||
| 33 | + .proposal { | ||
| 34 | + &-link { | ||
| 35 | + background-color: #000; | ||
| 36 | + border-radius: $default-radius-size; | ||
| 37 | + color: #fff; | ||
| 38 | + display: inline-block; | ||
| 39 | + font-size: $small-font-size; | ||
| 40 | + font-weight: 700; | ||
| 41 | + padding-top: 100px; | ||
| 42 | + width: 150px; | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | + &-items { | ||
| 46 | + border-radius: $default-radius-size; | ||
| 47 | + font-size: $default-font-size; | ||
| 48 | + margin-bottom: $default-spacing-size; | ||
| 49 | + margin-right: $default-spacing-size; | ||
| 50 | + padding: $default-spacing-size $default-spacing-size 0; | ||
| 51 | + text-align: left; | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + &-list { | ||
| 55 | + list-style: none; | ||
| 56 | + margin-top: $default-spacing-size; | ||
| 57 | + padding: 0; | ||
| 58 | + } | ||
| 59 | + &-item { | ||
| 60 | + display: inline-block; | ||
| 61 | + margin-bottom: $default-spacing-size; | ||
| 62 | + vertical-align: top; | ||
| 63 | + width: 50%; | ||
| 64 | + &:nth-child(odd) { | ||
| 65 | + .item { | ||
| 66 | + margin-right: $default-spacing-size; | ||
| 67 | + } | ||
| 68 | + } | ||
| 69 | + } | ||
| 70 | + &-link { | ||
| 71 | + font-family: 'Asap', sans-serif; | ||
| 72 | + font-size: $proposal-link-size; | ||
| 73 | + font-weight: 700; | ||
| 74 | + } | ||
| 75 | +} | ||
| 76 | +.arrow-box { | ||
| 77 | + border-bottom: 10px solid #000; | ||
| 78 | + border-left: 7px solid transparent; | ||
| 79 | + border-right: 7px solid transparent; | ||
| 80 | + bottom: -12px; | ||
| 81 | + height: 0; | ||
| 82 | + left: 50%; | ||
| 83 | + margin-left: -7px; | ||
| 84 | + position: absolute; | ||
| 85 | + width: 0; | ||
| 86 | +} | ||
| 87 | +.name { | ||
| 88 | + border-bottom: 2px solid #fff; | ||
| 89 | + color: #fff; | ||
| 90 | + font-size: $category-title-size; | ||
| 91 | + font-weight: 700; | ||
| 92 | + margin-bottom: 10px; | ||
| 93 | + padding: 10px 0; | ||
| 94 | +} | ||
| 95 | +.item { | ||
| 96 | + background-color: #fff; | ||
| 97 | + border: 1px solid $header-color; | ||
| 98 | + border-radius: $default-radius-size; | ||
| 99 | + font-size: $small-font-size; | ||
| 100 | + padding: $default-spacing-size; | ||
| 101 | + p { | ||
| 102 | + min-height: 60px; | ||
| 103 | + } | ||
| 104 | +} | ||
| 105 | +.category { | ||
| 106 | + border-top: 1px dotted $default-color; | ||
| 107 | + list-style: none; | ||
| 108 | + padding-left: 0; | ||
| 109 | + padding-top: 10px; | ||
| 110 | + li { | ||
| 111 | + background-color: #000; | ||
| 112 | + color: #fff; | ||
| 113 | + display: inline-block; | ||
| 114 | + font-family: 'Asap', sans-serif; | ||
| 115 | + font-size: $default-font-size; | ||
| 116 | + font-weight: 700; | ||
| 117 | + padding: 5px 12px 5px 32px; | ||
| 118 | + } | ||
| 119 | +} | ||
| 0 | \ No newline at end of file | 120 | \ No newline at end of file |
| @@ -0,0 +1,20 @@ | @@ -0,0 +1,20 @@ | ||
| 1 | +body { | ||
| 2 | + color: $default-color; | ||
| 3 | + font-family: 'Open Sans', sans-serif; | ||
| 4 | + font-weight: 400; | ||
| 5 | +} | ||
| 6 | + | ||
| 7 | +h1 { | ||
| 8 | + border-bottom: 1px solid #d6dcd7; | ||
| 9 | + font-size: $header-h1-size; | ||
| 10 | + padding-bottom: $default-spacing-size; | ||
| 11 | + text-transform: uppercase; | ||
| 12 | + a { | ||
| 13 | + color: $header-color; | ||
| 14 | + } | ||
| 15 | +} | ||
| 16 | + | ||
| 17 | +a { | ||
| 18 | + color: $link-color; | ||
| 19 | + text-decoration: none; | ||
| 20 | +} | ||
| 0 | \ No newline at end of file | 21 | \ No newline at end of file |
| @@ -0,0 +1,17 @@ | @@ -0,0 +1,17 @@ | ||
| 1 | +// colors | ||
| 2 | +$header-color: #03316f; | ||
| 3 | +$link-color: #335277; | ||
| 4 | +$default-color: #172938; | ||
| 5 | + | ||
| 6 | +// font sizes | ||
| 7 | +$default-font-size: 16px; | ||
| 8 | +$small-font-size: $default-font-size - 2; | ||
| 9 | +$header-h1-size: 28px; | ||
| 10 | +$category-title-size: 18px; | ||
| 11 | +$proposal-link-size: 24px; | ||
| 12 | + | ||
| 13 | +// radius sizes | ||
| 14 | +$default-radius-size: 7px; | ||
| 15 | + | ||
| 16 | +// padding defaults | ||
| 17 | +$default-spacing-size: 20px; | ||
| 0 | \ No newline at end of file | 18 | \ No newline at end of file |