Improve proposal-list animation

Leonardo Merlin
1 parent d3cac6d4
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
src/app/pages/programas/programa.controller.js
src/app/pages/programas/programa.html
src/app/pages/programas/programas.scss
@@ -60,7 +60,7 @@
       var vm = this;
       // notify parents - handled by parents
-      vm.$scope.$emit('proposal-carousel:toProposals');
+      vm.$scope.$emit('proposal-carousel:showProposals');
     };
     var directive = {
 <div class="proposal-list">
-	<div class="table-responsive" ng-if="vm.loading">
-		<div class="table-responsive">Carregando...</div>
+	<div class="" ng-if="vm.loading">
+		<div class="">Carregando...</div>
 	</div>
-	<div class="table-responsive" ng-if="!vm.loading && vm.proposalsPerPage">
+	<div class="" ng-if="!vm.loading && vm.proposalsPerPage">
 		<table class="table table-striped">
 			<thead>
 				<tr>
@@ -25,13 +25,13 @@
 							</div>
 						</div>
 						<div class="row row-actions">
-							<div class="col-md-8">
+							<div class="col-sm-8">
 								<button type="button" class="btn btn-link btn-rate color-theme-common-fg" ng-click="vm.showContent(proposal)">
 									Avalie esta proposta
 									<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 								</button>
 							</div>
-							<div class="col-md-4">
+							<div class="col-sm-4">
 								<proposal-stats class="text-right" views="{{::proposal.hits}}" up="{{::proposal.votes_for}}" down="{{::proposal.votes_against}}"></proposal-stats>
 							</div>
 						</div>
@@ -118,16 +118,26 @@
   ProgramaPageController.prototype.attachListeners = function() {
     var vm = this;
-    vm.$scope.$on('proposal-carousel:toProposals', function() {
+    vm.$scope.$on('proposal-carousel:showProposals', function() {
       if(!vm._proposal_list){
         vm._proposal_list = vm.$element.find('.proposal-ranking-section');
       }
-      vm._proposal_list.slideToggle();
+      vm._proposal_list.slideDown();
       angular.element('body').animate({scrollTop: vm._proposal_list.offset().top}, 'fast');
     });
   };
+  ProgramaPageController.prototype.hideProposals = function() {
+    var vm = this;
+
+    if(!vm._proposal_list){
+      vm._proposal_list = vm.$element.find('.proposal-ranking-section');
+    }
+
+    vm._proposal_list.slideUp();
+  };
+
   ProgramaPageController.prototype.makeProposal = function() {
     var vm = this;
@@ -85,6 +85,9 @@
       <div class="container">
         <div class="proposal-ranking-section-header">
           <h3 class="color-theme-fg">Resultados de propostas mais votadas</h3>
+          <button class="btn btn-close" ng-click="pagePrograma.hideProposals()">
+            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+          </button>
         </div>
         <div class="proposal-ranking-section-table">
           <proposal-list proposals="pagePrograma.proposals"></proposal-list>
@@ -69,10 +69,19 @@
     h3 {
         margin-top: 0;
     }
-
 }
 .proposal-ranking-section {
     background-color: #f1f1f1;
     margin: 30px 0;
+
+    .proposal-ranking-section-header{
+        position: relative;
+    }
+
+    .btn-close {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
 }
	@@ -60,7 +60,7 @@		@@ -60,7 +60,7 @@
60	var vm = this;	60	var vm = this;
61		61
62	// notify parents - handled by parents	62	// notify parents - handled by parents
63	- vm.$scope.$emit('proposal-carousel:toProposals');	63	+ vm.$scope.$emit('proposal-carousel:showProposals');
64	};	64	};
65		65
66	var directive = {	66	var directive = {
	@@ -69,10 +69,19 @@		@@ -69,10 +69,19 @@
69	h3 {	69	h3 {
70	margin-top: 0;	70	margin-top: 0;
71	}	71	}
72	-
73	}	72	}
74		73
75	.proposal-ranking-section {	74	.proposal-ranking-section {
76	background-color: #f1f1f1;	75	background-color: #f1f1f1;
77	margin: 30px 0;	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	}