Fix scroll behaviour. Add footer directive

Leonardo Merlin
1 parent 7f9a88ee
Showing 11 changed files with 64 additions and 22 deletions Show diff stats
src/app/components/proposal-carousel/proposal-carousel.directive.js
src/app/components/proposal-carousel/proposal-carousel.html
src/app/components/proposal-carousel/proposal-carousel.scss
src/app/index.run.js
src/app/pages/article/article.controller.js
src/app/pages/auth/auth.controller.js
src/app/pages/programas/programa.controller.js
src/app/pages/programas/programa.html
src/app/pages/programas/programas.controller.js
src/app/pages/programas/programas.html
src/index.html
@@ -9,11 +9,12 @@
   function proposalCarousel() {
  
     /** @ngInject */
-    function ProposalCarouselController($scope, $element, $timeout, $log) {
+    function ProposalCarouselController($scope, $state, $element, $timeout, $log) {
       $log.debug('ProposalCarouselController');
  
       var vm = this;
       vm.$scope = $scope;
+      vm.$state = $state;
       vm.$element = $element;
       vm.$timeout = $timeout;
       vm.$log = $log;
@@ -63,6 +64,18 @@
       vm.$scope.$emit('proposal-carousel:showProposalsList');
     };
  
+    ProposalCarouselController.prototype.showContent = function (proposal) {
+      var vm = this;
+
+      vm.$state.go('programa', {
+        slug: proposal.parent.slug,
+        proposal_id: proposal.id
+      }, {
+        location: true,
+        reload: true
+      });
+    };
+
     var directive = {
       restrict: 'E',
       templateUrl: 'app/components/proposal-carousel/proposal-carousel.html',
@@ -16,7 +16,15 @@
     <div class="proposal-carousel-middle" ng-swipe-left="vm.swipeLeft()" ng-swipe-right="vm.swipeRight()">
       <div ng-repeat="proposal in vm.proposals" class="animation-swipe">
         <div class="content">
-          <div ng-show="vm.activeIndex === $index">{{::proposal.abstract}}</div>
+          <div ng-show="vm.activeIndex === $index">
+            <div class="inner">{{::proposal.abstract}}</div>
+          </div>
+        </div>
+        <div class="join">
+          <button type="button" class="btn btn-link btn-rate color-theme-common-fg" ng-click="vm.showContent(proposal)">
+            Participe
+            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+          </button>
         </div>
         <div class="proposal-carousel-middle-watermark" ng-show="vm.activeIndex === $index">
           <span>{{::($index+1)}}º</span>
@@ -26,7 +34,7 @@
     <div class="proposal-carousel-bottom color-theme-common-bg" ng-click="vm.showProposalsList()">
       <div>Veja as propostas mais votadas</div>
       <div class="proposal-carousel-bottom-icon">
-        <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
+        <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
       </div>
     </div>
   </div>
@@ -9,12 +9,12 @@
         color: #fff;
         font-weight: bold;
         font-size: 25px;
-        padding: 20px 15px;
+        padding: 10px 15px;
  
         &-triggers {
             position: absolute;
             right: 15px;
-            top: 20px;
+            top: 8px;
  
             button {
                 border: 1px solid #fff;
@@ -46,14 +46,26 @@
  
         .content {
             position: relative;
-            z-index: 2;
+            z-index: 10;
+        }
+
+        .join {
+            position: absolute;
+            bottom: 32px;
+            z-index: 10;
+
+            .btn {
+                padding: 0;
+                font-weight: bold;
+                font-size: 16px;
+            }
         }
  
         &-watermark {
             position: absolute;
             bottom: 1px;
             left: -5px;
-            color: #ddd;
+            color: #e6e6e6;
             font-size: 150px;
             font-weight: bold;
             line-height: 116px;
@@ -142,7 +142,7 @@
  
       if (mainContentArea) {
         $timeout(function() {
-          $rootScope.scrollTo(mainContentArea, $event);
+          $rootScope.scrollTo(angular.element(mainContentArea), $event);
         }, 90); // force queue
       } else {
         $log.warn('role="main" not found.');
@@ -6,10 +6,11 @@
     .controller('ArticlePageController', ArticlePageController);
  
   /** @ngInject */
-  function ArticlePageController(DialogaService, $state, $sce, $log) {
+  function ArticlePageController(DialogaService, $rootScope, $state, $sce, $log) {
     var vm = this;
  
     vm.DialogaService = DialogaService;
+    vm.$rootScope = $rootScope;
     vm.$state = $state;
     vm.$sce = $sce;
     vm.$log = $log;
@@ -17,6 +18,8 @@
     vm.init();
     vm.loadData();
  
+    vm.$rootScope.focusMainContent();
+
     vm.$log.debug('ArticlePageController');
   }
  
@@ -26,6 +26,8 @@
     vm.loadData();
     vm.attachListeners();
  
+    vm.$rootScope.focusMainContent();
+
     vm.$log.debug('AuthPageController');
   }
  
@@ -7,8 +7,6 @@
  
   /** @ngInject */
   function ProgramaPageController(DialogaService, PATH, VOTE_OPTIONS, $state, $location, $scope, $rootScope, $element, $timeout, $log) {
-    $log.debug('ProgramaPageController');
-
     var vm = this;
  
     vm.DialogaService = DialogaService;
@@ -25,6 +23,9 @@
     vm.init();
     vm.loadData();
     vm.attachListeners();
+    vm.$rootScope.focusMainContent();
+
+    vm.$log.debug('ProgramaPageController');
   }
  
   ProgramaPageController.prototype.init = function() {
@@ -18,8 +18,8 @@
     </div>
   </section>
  
-  <div ng-if="pagePrograma.article.body" ng-class="pagePrograma.category.slug">
-    <section>
+  <div role="main">
+    <section ng-if="pagePrograma.article.body" ng-class="pagePrograma.category.slug">
       <div class="container">
         <div class="row">
           <article class="program-preview">
@@ -60,7 +60,7 @@
               <!-- Preview > coluna da direita -->
               <div class="col-md-4">
                 <div class="row">
-                  
+
                   <!-- Top Proposals -->
                   <div>
                     <!-- Loading Top Proposals -->
@@ -69,7 +69,7 @@
                         Carregando propostas mais votadas...
                       </div>
                     </div>
-                    
+
                     <!-- Top Proposals > Carousel -->
                     <div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
                       <h3 class="color-theme-fg">Propostas mais votadas</h3>
@@ -83,7 +83,7 @@
                       <h3 class="color-theme-fg">Propostas nesse programa</h3>
                       <proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
                     </div>
-                    
+
                     <!-- Loading Proposal Box -->
                     <div ng-if="pagePrograma.loadingProposalBox">
                       <div class="alert alert-info" role="alert">
@@ -91,7 +91,7 @@
                       </div>
                     </div>
                   </div>
-                  
+
                   <!-- No Proposals? okay! -->
                   <div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
                     <div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
@@ -6,11 +6,12 @@
     .controller('ProgramasPageController', ProgramasPageController);
  
   /** @ngInject */
-  function ProgramasPageController(DialogaService, $scope, $location, $filter, $log) {
+  function ProgramasPageController(DialogaService, $scope, $rootScope, $location, $filter, $log) {
     var vm = this;
  
     vm.DialogaService = DialogaService;
     vm.$scope = $scope;
+    vm.$rootScope = $rootScope;
     vm.$location = $location;
     vm.$filter = $filter;
     vm.$log = $log;
@@ -18,8 +19,9 @@
     vm.init();
     vm.loadData();
     vm.attachListeners();
+    vm.$rootScope.focusMainContent();
  
-    $log.debug('ProgramasPageController');
+    vm.$log.debug('ProgramasPageController');
   }
  
   ProgramasPageController.prototype.init = function () {
@@ -6,7 +6,7 @@
   </div>
 </div>
  
-<div class="page--programas">
+<div class="page--programas" role="main">
   <section class="section--info">
     <div class="container">
       <div class="row">
@@ -38,9 +38,10 @@
     <![endif]-->
  
     <app-header></app-header>
-    
+
     <div id="content" ui-view="main"></div>
-    <div ui-view="footer"></div>
+
+    <app-footer></app-footer>
  
     <div id="footer-brasil"></div>
...	...	@@ -9,11 +9,12 @@
9	9	function proposalCarousel() {
10	10
11	11	/** @ngInject */
12		- function ProposalCarouselController($scope, $element, $timeout, $log) {
	12	+ function ProposalCarouselController($scope, $state, $element, $timeout, $log) {
13	13	$log.debug('ProposalCarouselController');
14	14
15	15	var vm = this;
16	16	vm.$scope = $scope;
	17	+ vm.$state = $state;
17	18	vm.$element = $element;
18	19	vm.$timeout = $timeout;
19	20	vm.$log = $log;
...	...	@@ -63,6 +64,18 @@
63	64	vm.$scope.$emit('proposal-carousel:showProposalsList');
64	65	};
65	66
	67	+ ProposalCarouselController.prototype.showContent = function (proposal) {
	68	+ var vm = this;
	69	+
	70	+ vm.$state.go('programa', {
	71	+ slug: proposal.parent.slug,
	72	+ proposal_id: proposal.id
	73	+ }, {
	74	+ location: true,
	75	+ reload: true
	76	+ });
	77	+ };
	78	+
66	79	var directive = {
67	80	restrict: 'E',
68	81	templateUrl: 'app/components/proposal-carousel/proposal-carousel.html',
...	...
...	...	@@ -16,7 +16,15 @@
16	16	<div class="proposal-carousel-middle" ng-swipe-left="vm.swipeLeft()" ng-swipe-right="vm.swipeRight()">
17	17	<div ng-repeat="proposal in vm.proposals" class="animation-swipe">
18	18	<div class="content">
19		- <div ng-show="vm.activeIndex === $index">{{::proposal.abstract}}</div>
	19	+ <div ng-show="vm.activeIndex === $index">
	20	+ <div class="inner">{{::proposal.abstract}}</div>
	21	+ </div>
	22	+ </div>
	23	+ <div class="join">
	24	+ <button type="button" class="btn btn-link btn-rate color-theme-common-fg" ng-click="vm.showContent(proposal)">
	25	+ Participe
	26	+ <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	27	+ </button>
20	28	</div>
21	29	<div class="proposal-carousel-middle-watermark" ng-show="vm.activeIndex === $index">
22	30	<span>{{::($index+1)}}º</span>
...	...	@@ -26,7 +34,7 @@
26	34	<div class="proposal-carousel-bottom color-theme-common-bg" ng-click="vm.showProposalsList()">
27	35	<div>Veja as propostas mais votadas</div>
28	36	<div class="proposal-carousel-bottom-icon">
29		- <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg"></span>
	37	+ <span class="glyphicon glyphicon-chevron-down pull-right color-theme-common-fg" aria-hidden="true"></span>
30	38	</div>
31	39	</div>
32	40	</div>
...	...
...	...	@@ -9,12 +9,12 @@
9	9	color: #fff;
10	10	font-weight: bold;
11	11	font-size: 25px;
12		- padding: 20px 15px;
	12	+ padding: 10px 15px;
13	13
14	14	&-triggers {
15	15	position: absolute;
16	16	right: 15px;
17		- top: 20px;
	17	+ top: 8px;
18	18
19	19	button {
20	20	border: 1px solid #fff;
...	...	@@ -46,14 +46,26 @@
46	46
47	47	.content {
48	48	position: relative;
49		- z-index: 2;
	49	+ z-index: 10;
	50	+ }
	51	+
	52	+ .join {
	53	+ position: absolute;
	54	+ bottom: 32px;
	55	+ z-index: 10;
	56	+
	57	+ .btn {
	58	+ padding: 0;
	59	+ font-weight: bold;
	60	+ font-size: 16px;
	61	+ }
50	62	}
51	63
52	64	&-watermark {
53	65	position: absolute;
54	66	bottom: 1px;
55	67	left: -5px;
56		- color: #ddd;
	68	+ color: #e6e6e6;
57	69	font-size: 150px;
58	70	font-weight: bold;
59	71	line-height: 116px;
...	...
...	...	@@ -142,7 +142,7 @@
142	142
143	143	if (mainContentArea) {
144	144	$timeout(function() {
145		- $rootScope.scrollTo(mainContentArea, $event);
	145	+ $rootScope.scrollTo(angular.element(mainContentArea), $event);
146	146	}, 90); // force queue
147	147	} else {
148	148	$log.warn('role="main" not found.');
...	...
...	...	@@ -6,10 +6,11 @@
6	6	.controller('ArticlePageController', ArticlePageController);
7	7
8	8	/** @ngInject */
9		- function ArticlePageController(DialogaService, $state, $sce, $log) {
	9	+ function ArticlePageController(DialogaService, $rootScope, $state, $sce, $log) {
10	10	var vm = this;
11	11
12	12	vm.DialogaService = DialogaService;
	13	+ vm.$rootScope = $rootScope;
13	14	vm.$state = $state;
14	15	vm.$sce = $sce;
15	16	vm.$log = $log;
...	...	@@ -17,6 +18,8 @@
17	18	vm.init();
18	19	vm.loadData();
19	20
	21	+ vm.$rootScope.focusMainContent();
	22	+
20	23	vm.$log.debug('ArticlePageController');
21	24	}
22	25
...	...
...	...	@@ -26,6 +26,8 @@
26	26	vm.loadData();
27	27	vm.attachListeners();
28	28
	29	+ vm.$rootScope.focusMainContent();
	30	+
29	31	vm.$log.debug('AuthPageController');
30	32	}
31	33
...	...
...	...	@@ -7,8 +7,6 @@
7	7
8	8	/** @ngInject */
9	9	function ProgramaPageController(DialogaService, PATH, VOTE_OPTIONS, $state, $location, $scope, $rootScope, $element, $timeout, $log) {
10		- $log.debug('ProgramaPageController');
11		-
12	10	var vm = this;
13	11
14	12	vm.DialogaService = DialogaService;
...	...	@@ -25,6 +23,9 @@
25	23	vm.init();
26	24	vm.loadData();
27	25	vm.attachListeners();
	26	+ vm.$rootScope.focusMainContent();
	27	+
	28	+ vm.$log.debug('ProgramaPageController');
28	29	}
29	30
30	31	ProgramaPageController.prototype.init = function() {
...	...
...	...	@@ -18,8 +18,8 @@
18	18	</div>
19	19	</section>
20	20
21		- <div ng-if="pagePrograma.article.body" ng-class="pagePrograma.category.slug">
22		- <section>
	21	+ <div role="main">
	22	+ <section ng-if="pagePrograma.article.body" ng-class="pagePrograma.category.slug">
23	23	<div class="container">
24	24	<div class="row">
25	25	<article class="program-preview">
...	...	@@ -60,7 +60,7 @@
60	60	<!-- Preview > coluna da direita -->
61	61	<div class="col-md-4">
62	62	<div class="row">
63		-
	63	+
64	64	<!-- Top Proposals -->
65	65	<div>
66	66	<!-- Loading Top Proposals -->
...	...	@@ -69,7 +69,7 @@
69	69	Carregando propostas mais votadas...
70	70	</div>
71	71	</div>
72		-
	72	+
73	73	<!-- Top Proposals > Carousel -->
74	74	<div class="col-xs-12" ng-if="!pagePrograma.loadingTopProposals && pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0">
75	75	<h3 class="color-theme-fg">Propostas mais votadas</h3>
...	...	@@ -83,7 +83,7 @@
83	83	<h3 class="color-theme-fg">Propostas nesse programa</h3>
84	84	<proposal-box proposal="pagePrograma.randomProposal" topic="pagePrograma.article" category="pagePrograma.category" can-vote="true" focus="{{pagePrograma.search.proposal_id}}" ></proposal-box>
85	85	</div>
86		-
	86	+
87	87	<!-- Loading Proposal Box -->
88	88	<div ng-if="pagePrograma.loadingProposalBox">
89	89	<div class="alert alert-info" role="alert">
...	...	@@ -91,7 +91,7 @@
91	91	</div>
92	92	</div>
93	93	</div>
94		-
	94	+
95	95	<!-- No Proposals? okay! -->
96	96	<div ng-if="!pagePrograma.loadingTopProposals && !pagePrograma.loadingProposalBox">
97	97	<div class="col-xs-12" ng-if="!pagePrograma.randomProposal && !(pagePrograma.proposalsTopRated && pagePrograma.proposalsTopRated.length > 0)">
...	...
...	...	@@ -6,11 +6,12 @@
6	6	.controller('ProgramasPageController', ProgramasPageController);
7	7
8	8	/** @ngInject */
9		- function ProgramasPageController(DialogaService, $scope, $location, $filter, $log) {
	9	+ function ProgramasPageController(DialogaService, $scope, $rootScope, $location, $filter, $log) {
10	10	var vm = this;
11	11
12	12	vm.DialogaService = DialogaService;
13	13	vm.$scope = $scope;
	14	+ vm.$rootScope = $rootScope;
14	15	vm.$location = $location;
15	16	vm.$filter = $filter;
16	17	vm.$log = $log;
...	...	@@ -18,8 +19,9 @@
18	19	vm.init();
19	20	vm.loadData();
20	21	vm.attachListeners();
	22	+ vm.$rootScope.focusMainContent();
21	23
22		- $log.debug('ProgramasPageController');
	24	+ vm.$log.debug('ProgramasPageController');
23	25	}
24	26
25	27	ProgramasPageController.prototype.init = function () {
...	...
...	...	@@ -6,7 +6,7 @@
6	6	</div>
7	7	</div>
8	8
9		-<div class="page--programas">
	9	+<div class="page--programas" role="main">
10	10	<section class="section--info">
11	11	<div class="container">
12	12	<div class="row">
...	...