Download as
Browse Code »

Commit 559e7c08f77a56c62b52790ef65824021f129fbd

Authored by Leonardo Merlin
1 parent 43ca4ad7
Exists in master and in 8 other branches css-list, feature-captcha, feature-proposal-vote, feature-respostas, production, rafael, staging, the_glorious_return_of_piwik

Sync before freeze and start into new layout

Showing 4 changed files with 152 additions and 32 deletions   Show diff stats
src/app/components/programa/programa.html
  Diff comments   View file @559e7c0
... ... @@ -28,7 +28,7 @@
28 28 </header>
29 29  
30 30 <section class="call-to-action--section">
31   - <div class="row">
  31 + <div class="row show-content-row">
32 32 <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
33 33 <div class="button--themed">
34 34 <button class="btn btn-block" ng-click="vm.showContent()">Conheça o programa</button>
... ... @@ -42,6 +42,15 @@
42 42 <div class="proposal-box make-proposal">
43 43 <h2 class="proposal-box--title">Faça uma proposta</h2>
44 44 <p class="proposal-box--text">Qual a sua sugestão para melhorar este programa?</p>
  45 + <div class="row">
  46 + <div class="col-xs-8 col-xs-offset-2">
  47 + <div class="button--themed">
  48 + <button class="btn btn-block" ng-click="vm.goSendProposal()">
  49 + Envie sua proposta
  50 + </button>
  51 + </div>
  52 + </div>
  53 + </div>
45 54 </div>
46 55 </div>
47 56 </div>
... ... @@ -57,6 +66,43 @@
57 66 Lorem qual a sua sugestão para melhorar este programa
58 67 Lorem qual a sua sugestão para melhorar este programa?
59 68 </p>
  69 + <div class="col-lg-12">
  70 + <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
  71 + <div class="button--themed vote-buttons">
  72 + <button class="btn btn-circle vote-buttons-up" ng-click="vm.vote(1)">
  73 + <span class="sr-only">Eu <b>apoio</b> esta proposta.</span>
  74 + <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
  75 + </button>
  76 +
  77 + <button class="btn btn-circle vote-buttons-down" ng-click="vm.vote(-1)">
  78 + <span class="sr-only">Eu <b>não apoio</b> esta proposta.</span>
  79 + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
  80 + </button>
  81 +
  82 + <button class="btn btn-block vote-buttons-skip" ng-click="vm.vote(0)">
  83 + <span class="sr-only">Pular esta proposta.</span>
  84 + <span class="icon" aria-hidden="true"></span>
  85 + Pular
  86 + </button>
  87 + </div>
  88 + </div>
  89 + </div>
  90 + <div class="col-lg-12">
  91 + <div class="col-xs-8 col-xs-offset-2 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
  92 + <div class="text-center">
  93 + <button class="btn btn-link" ng-click="vm.showResults()">Resultados</button>
  94 + </div>
  95 + </div>
  96 + </div>
  97 + <div class="col-md-12">
  98 + <div class="col-xs-12">
  99 + <div class="text-center">
  100 + <span>Compartilhe esta proposta</span>
  101 + <social-share></social-share>
  102 + </div>
  103 + </div>
  104 + </div>
  105 + <div class="clearfix"></div>
60 106 </div>
61 107 </div>
62 108 </div>
... ...
src/app/components/programa/programa.scss
  Diff comments   View file @559e7c0
... ... @@ -42,8 +42,54 @@ $darken: 15%;
42 42 background-color: #fff;
43 43 }
44 44 }
  45 +
  46 + .btn-circle {
  47 + width: 64px;
  48 + height: 64px;
  49 + border-radius: 100%;
  50 + }
  51 +
  52 + // &.vote-buttons {
  53 + // padding-bottom: 40px;
  54 + // }
  55 +
  56 + .btn.vote-buttons-up {
  57 + float: right;
  58 + margin-right: 10px;
  59 + background-color: #32dbb5;
  60 + border-bottom: 3px solid #1da485;
  61 +
  62 + &:hover,
  63 + &:focus {
  64 + background-color: #1da485;
  65 + }
  66 + }
  67 +
  68 + .btn.vote-buttons-down {
  69 + float: left;
  70 + margin-left: 10px;
  71 + background-color: #db4127;
  72 + border-bottom: 3px solid #9c2d1a;
  73 +
  74 + &:hover,
  75 + &:focus {
  76 + background-color: #9c2d1a;
  77 + }
  78 +
  79 +
  80 + // @media (max-width: $screen-sm) {
  81 + // margin-left:
  82 + // }
  83 + }
  84 +
  85 + .vote-buttons-up,
  86 + .vote-buttons-down {
  87 + font-size: 30px;
  88 + margin-bottom: 20px;
  89 + }
45 90 }
46 91  
  92 +
47 93 .program-box {
48 94 cursor: pointer;
49 95 background-color: #fff;
... ... @@ -231,7 +277,9 @@ $darken: 15%;
231 277 .program-banner--abstract {
232 278 padding-bottom: 10px;
233 279 }
  280 +}
234 281  
  282 +.show-content-row {
235 283 .button--themed {
236 284 .btn {
237 285 font-size: 38px;
... ... @@ -243,28 +291,24 @@ $darken: 15%;
243 291 }
244 292 }
245 293  
246   -// .flexbox {
247   -// .proposal-row {
248   -// display: flex;
249   -// flex-flow: row nowrap;
250   -// // flex-direction: row;
251   -// // flex-wrap: wrap;
252   -// }
253   -
254   -// .proposal-box {
255   -// // flex: 1 100%;
256   -// flex: 1 0 auto;
257   -// // align-items: stretch;
258   -// }
259   -// }
260   -// .flexboxlegacy {}
261   -
262 294 .row-height {
263   - display: table;
264   - table-layout: fixed;
265   - height: 100%;
266   - width: 100%;
267   - border-spacing: 20px;
  295 + display: table;
  296 + table-layout: fixed;
  297 + height: 100%;
  298 + width: 100%;
  299 + border-spacing: 20px;
  300 +
  301 + @media (max-width: $screen-sm) {
  302 + display: block;
  303 + }
  304 +
  305 + // @media (min-width: $screen-sm + 1) {
  306 + // height: $hLine * 2;
  307 + // }
  308 +
  309 + // @media (min-width: $screen-md + 1) {
  310 + // height: $hLine * 2;
  311 + // }
268 312 }
269 313  
270 314 .col-height {
... ... @@ -281,6 +325,11 @@ $darken: 15%;
281 325 border-color: $color;
282 326 }
283 327 }
  328 +
  329 + @media (max-width: $screen-sm){
  330 + display: block;
  331 + border: none;
  332 + }
284 333 }
285 334  
286 335 .inside {
... ... @@ -292,8 +341,23 @@ $darken: 15%;
292 341 height: 100%;
293 342 margin-top: 0;
294 343 margin-bottom: 0;
  344 +
  345 +
  346 + @media (max-width: $screen-sm) {
  347 + border: 1px solid;
  348 + border-radius: 3px;
  349 + padding: 20px;
  350 + margin: 10px 0;
  351 +
  352 + @each $category, $color in $categories {
  353 + .#{$category} & {
  354 + border-color: $color;
  355 + }
  356 + }
  357 + }
295 358 }
296 359  
  360 +
297 361 .talk-proposal {
298 362 margin-top: -20px;
299 363 }
... ...
src/app/components/programas/programas.html
  Diff comments   View file @559e7c0
... ... @@ -22,28 +22,31 @@
22 22 <div class="col-sm-8 col-md-9">
23 23 <article class="program-list">
24 24 <header class="header">
25   - <h2>Programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
  25 + <h2>Conheça os programas <span class="small">({{vm.filtredProgramList.length}}/{{::vm.programs.length}})</span></h2>
26 26 <button type="button" class="btn btn-link" ng-click="vm.showAll($event)">
27   - <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os programas
  27 + <span class="glyphicon glyphicon-chevron-right"></span> Ver todos os {{::vm.programs.length}} programas
28 28 </button>
29 29 </header>
30 30 <div>
31 31 <div class="col-sm-12">
32 32 <aside class="form-inline">
33   - <div class="form-group">
34   - <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
35   - <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
  33 + <div class="row">
  34 + <div class="col-xs-6 col-sm-7 col-md-9">
  35 + <label for="programListFilter" class="control-label sr-only">Filtrar programas:</label>
  36 + <input id="programListFilter" type="search" class="form-control" ng-model="vm.query" placeholder="Filtrar programas" aria-label="Filtrar programas" >
  37 + </div>
36 38  
37 39 <!-- <label for="selectCategoryFilter" class="control-label sr-only">Filtrar por tema:</label>
38 40 <select id="selectCategoryFilter" name="selectCategoryFilter" class="form-control" ng-model="vm.categoryFilter" ng-options="category.name for category in vm.categories track by category.slug">
39 41 <option value="">-- Filtrar por tema --</option>
40 42 </select> -->
41 43  
42   - <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
43   - <select id="selectOrderBy" name="selectOrderBy" class="form-control" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
44   - <option value="">-- Ordernar por: --</option>
45   - </select>
46   -
  44 + <div class="col-xs-6 col-sm-5 col-md-3">
  45 + <label for="selectOrderBy" class="control-label sr-only">Ordernar por:</label>
  46 + <select id="selectOrderBy" name="selectOrderBy" class="form-control pull-right" ng-model="vm.orderCriteria" ng-options="orderCriteria.label for orderCriteria in vm.orderCriteries">
  47 + <option value="">-- Ordernar por: --</option>
  48 + </select>
  49 + </div>
47 50 <!-- <div class="checkbox">
48 51 <label>
49 52 <input type="checkbox" ng-model="vm.reverse">
... ...
src/app/components/programas/programas.scss
  Diff comments   View file @559e7c0
... ... @@ -10,6 +10,13 @@
10 10 top: 2px;
11 11 }
12 12 }
  13 +
  14 + .form-inline {
  15 + input,
  16 + select {
  17 + width: 100%;
  18 + }
  19 + }
13 20 }
14 21  
15 22 .category-list {
... ...