Commit 9acab0bf2ed7d445986d283f372fadb98ea2a6a6
1 parent
d3cac6d4
Exists in
master
and in
8 other branches
Improve proposal-list animation
Showing
5 changed files
with
31 additions
and
9 deletions
Show diff stats
src/app/components/proposal-carousel/proposal-carousel.directive.js
src/app/components/proposal-list/proposal-list.html
| 1 | 1 | <div class="proposal-list"> |
| 2 | - <div class="table-responsive" ng-if="vm.loading"> | |
| 3 | - <div class="table-responsive">Carregando...</div> | |
| 2 | + <div class="" ng-if="vm.loading"> | |
| 3 | + <div class="">Carregando...</div> | |
| 4 | 4 | </div> |
| 5 | - <div class="table-responsive" ng-if="!vm.loading && vm.proposalsPerPage"> | |
| 5 | + <div class="" ng-if="!vm.loading && vm.proposalsPerPage"> | |
| 6 | 6 | <table class="table table-striped"> |
| 7 | 7 | <thead> |
| 8 | 8 | <tr> |
| ... | ... | @@ -25,13 +25,13 @@ |
| 25 | 25 | </div> |
| 26 | 26 | </div> |
| 27 | 27 | <div class="row row-actions"> |
| 28 | - <div class="col-md-8"> | |
| 28 | + <div class="col-sm-8"> | |
| 29 | 29 | <button type="button" class="btn btn-link btn-rate color-theme-common-fg" ng-click="vm.showContent(proposal)"> |
| 30 | 30 | Avalie esta proposta |
| 31 | 31 | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> |
| 32 | 32 | </button> |
| 33 | 33 | </div> |
| 34 | - <div class="col-md-4"> | |
| 34 | + <div class="col-sm-4"> | |
| 35 | 35 | <proposal-stats class="text-right" views="{{::proposal.hits}}" up="{{::proposal.votes_for}}" down="{{::proposal.votes_against}}"></proposal-stats> |
| 36 | 36 | </div> |
| 37 | 37 | </div> | ... | ... |
src/app/pages/programas/programa.controller.js
| ... | ... | @@ -118,16 +118,26 @@ |
| 118 | 118 | ProgramaPageController.prototype.attachListeners = function() { |
| 119 | 119 | var vm = this; |
| 120 | 120 | |
| 121 | - vm.$scope.$on('proposal-carousel:toProposals', function() { | |
| 121 | + vm.$scope.$on('proposal-carousel:showProposals', function() { | |
| 122 | 122 | if(!vm._proposal_list){ |
| 123 | 123 | vm._proposal_list = vm.$element.find('.proposal-ranking-section'); |
| 124 | 124 | } |
| 125 | 125 | |
| 126 | - vm._proposal_list.slideToggle(); | |
| 126 | + vm._proposal_list.slideDown(); | |
| 127 | 127 | angular.element('body').animate({scrollTop: vm._proposal_list.offset().top}, 'fast'); |
| 128 | 128 | }); |
| 129 | 129 | }; |
| 130 | 130 | |
| 131 | + ProgramaPageController.prototype.hideProposals = function() { | |
| 132 | + var vm = this; | |
| 133 | + | |
| 134 | + if(!vm._proposal_list){ | |
| 135 | + vm._proposal_list = vm.$element.find('.proposal-ranking-section'); | |
| 136 | + } | |
| 137 | + | |
| 138 | + vm._proposal_list.slideUp(); | |
| 139 | + }; | |
| 140 | + | |
| 131 | 141 | ProgramaPageController.prototype.makeProposal = function() { |
| 132 | 142 | var vm = this; |
| 133 | 143 | ... | ... |
src/app/pages/programas/programa.html
| ... | ... | @@ -85,6 +85,9 @@ |
| 85 | 85 | <div class="container"> |
| 86 | 86 | <div class="proposal-ranking-section-header"> |
| 87 | 87 | <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3> |
| 88 | + <button class="btn btn-close" ng-click="pagePrograma.hideProposals()"> | |
| 89 | + <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> | |
| 90 | + </button> | |
| 88 | 91 | </div> |
| 89 | 92 | <div class="proposal-ranking-section-table"> |
| 90 | 93 | <proposal-list proposals="pagePrograma.proposals"></proposal-list> | ... | ... |
src/app/pages/programas/programas.scss
| ... | ... | @@ -69,10 +69,19 @@ |
| 69 | 69 | h3 { |
| 70 | 70 | margin-top: 0; |
| 71 | 71 | } |
| 72 | - | |
| 73 | 72 | } |
| 74 | 73 | |
| 75 | 74 | .proposal-ranking-section { |
| 76 | 75 | background-color: #f1f1f1; |
| 77 | 76 | margin: 30px 0; |
| 77 | + | |
| 78 | + .proposal-ranking-section-header{ | |
| 79 | + position: relative; | |
| 80 | + } | |
| 81 | + | |
| 82 | + .btn-close { | |
| 83 | + position: absolute; | |
| 84 | + right: 0; | |
| 85 | + top: 0; | |
| 86 | + } | |
| 78 | 87 | } | ... | ... |